Center a flexible div with jQuery

Question

So I have this div which holds a form that has validation messages fade in and out changing the width and height of the div. I have some jQuery to center the div but the problem Im having is when the validation messages fade in and resize the div the jQuery doesn't respond.

I need some code to listen to the width & height of the div?

The code I have currently

resizeElement = '.blurHolder';

var holderHeight = jQuery(resizeElement).outerHeight();
var holderWidth = jQuery(resizeElement).outerWidth();

jQuery(resizeElement).css({
    'margin-top': - holderHeight / 2,
    'margin-left': - holderWidth / 2
});

Any Help?

Answer 1

change the position code so that it is the 'margin-top' : (holderHeight/2) - (divHeight/2)

and apply that for the margin left too. Also what is the position set too, absolute or relative

Answer 2

try this:

html

<div class="container">
 <div class="blurHolder"></div>
</div>

css

.container{
    background: orange;
    width: 400px;
    height: 400px;
    float: left;
    margin: 10px;
}

.container .blurHolder{
    width: 100px;
    height: 100px;
    background: #333;
}

js

$( document ).ready(function() {

    var containerHeight = $('.container').height();
    var containerWidth = $('.container').width();
    var offsetTop = (containerHeight - $('.container').find('.blurHolder').height())/2;
    var offsetLeft = (containerWidth - $('.container').find('.blurHolder').width())/2;

    $('.container').css({'padding-top': offsetTop, 'padding-left': offsetLeft, 'height': containerHeight - offsetTop, 'width': containerWidth - offsetLeft});

});

Answer 3

I've just googled a library.

It looks like you can detect onresize event for the div as easy as writing:

new ResizeSensor($('#someDiv'), yourCallbackFunction);

By the way. There is a native onresize event, but it is only supported by IE, as you can read here