IE bug window resize fix
This code snippet fixes IE’s bug on window resize event. As you may have noticed when you use the .resize() and try to get the width and height of the container these are returned as 0 thus making it impossible to centre a div. You may not need this very often but trust me it will save you from going hell if you’ll ever need it!
IE resize Bug fix code snippet :
var resizeEventTimer= null;
$(window).resize(function(){
//IE fires multiple events hence we don't want to delay all of them but only the last one. Hence Clear if exists
if (resizeEventTimer){
clearTimeout(resizeEventTimer);
}
// Set Timeout and delay for 100 ms (should be enough - increase if problem persists)
resizeEventTimer = setTimeout(function(){
// start-mycode
var marginTop = ($(window).height() - settings.dHeight) / 3;
var marginLeft = ($(window).width() - settings.dWidth) / 2;
$('#myDiv').css({
top: marginTop + 'px',
left: marginLeft + 'px'
});
// end-mycode
}, 100);
});
Theory:
The idea behind this code snippet is quite simple. You may have noted that IE only returns incorrect values while resizing but returns correct values otherwise. By delaying the event with 100 ms we are allowing IE enough time to evaluate the container’s size hence returning us correct values.
Personal Note:
This is the one of the worst IE bugs I ever encountered in all my web design career if not the worst! The other one is the memory leak when using translucent PNGs in IEs which I’ll write about in the near future so stay tuned 
Happy coding and leave some comments if you found this helpful or know a better way 
You are calculating the top and left margin from a ‘settings’ variable that isn’t mentioned anywhere else in the code…I presume settings.dHeight and settings.dWidth are the Height and Width of the div in question ?
I once wrote a very small jQuery plugin that lets you absolute position a container at the center of the screen and the container dynamically changes the position when the window resizes: http://blog.dreasgrech.com/2009/12/center-container-on-screen-with.html
For it, I did not need to set a timer for the function to be invoked.
Also, when calculating the width, use outerWidth() [http://api.jquery.com/outerWidth/] instead of width() This is because outerWidth() calculates the width + padding + border whereas width() doesn’t.
Or else, you can simply calculate it yourself:
var theDiv = $(“#theDiv”);
var totalWidth = theDiv.width();
totalWidth += parseInt(theDiv.css(“padding-left”), 10) + parseInt(theDiv.css(“padding-right”), 10); //Total Padding Width
totalWidth += parseInt(theDiv.css(“margin-left”), 10) + parseInt(theDiv.css(“margin-right”), 10); //Total Margin Width
totalWidth += parseInt(theDiv.css(“borderLeftWidth”), 10) + parseInt(theDiv.css(“borderRightWidth”), 10); //Total Border Width
Hi Andreas Thanks for pointing it out … I copied the code from my TextPrest and forgot to document it.
The settings.dHeight and settings.dWidth are the dimensions of the div to be centered.
Good thing to point out as regards the outerWidth() , I din’t use it because it had no borders and no paddings.
I’ll check out your script as it is definitely much neater than my hack … Cheers for that
Ok guys
… had some time to confirm this thing and here are the results:
I am running windows 7 with IE 8 on it. The problem was that when resizing the window the width and height of the container where being returned as 0 hence making it impossible for us to center a div. Our friend Andreas Grech gave us a very neat solution to this which honestly surprised me as I had ‘wasted’ over a day to come up with this workaround.
Being determined to find why I did so (because it’s been quite a long time ago) I did some tests and so far concluded that the main reason why Andreas’ solution worked is due to the script being scripted in the body rather than in the head. Strange I know but it’s true!
I would really love if any one could prove me right or wrong as this is a very ‘serious’ issue with IE that could save a lot of time to a lot of people!
Also please note that some times for this bug to come out one needs to refresh and reload the page several times.