Friday, November 30, 2007

Fixing the window resize event in IE

Anyone who has hooked into the resize event of the window object in Internet Explorer knows the pain - the event is fired twice for every single movement (once for horizontal and once for vertical).  To make matters worse, if you drag the window size it doesn't get fried twice at the end, it gets fired numerous times throughout the resize.  The result of this is that if you are hooked into the event and are resizing some other elements (and probably re-rendering them too), performance suffers and the page seems unresponsive.

Luckily there is a relatively straight-forward resolution to this:

Sys.Application.add_load(function(sender, args) {
    $addHandler(window, 'resize', window_resize);
});

var resizeTimeoutId;

function window_resize(e) {
     window.clearTimeout(resizeTimeoutId);
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10);
}

Essentially you queue up the resize handling code, and then if the window resize occurs again, you cancel it, and re-queue it.  This keeps happening until the resize is complete, at which point, your doResizeCode() function is actually executed.

16 comments:

Anonymous said...

that's brilliant! :))

ayan said...

It's Superb, Outstanding, Mind blowing, Awesome and I'm out of my collection of adjectives for this great solution u'v provided!!!!

Anonymous said...

wow !!!

Anonymous said...

This workaround is fabulous. Thanks a lot.

Michael said...

2+ years later, this little blog is still helping people! thank you for this workaround, i'm using a window resize function on a flexible jcarousel and this just made it great. Thanks again!! i am bookmarking your entire blog to read through!

Feomir said...

3+ years later, and still helping people... Thanks :D

Venkatesh said...

Excellent Job Steven....

Anonymous said...

4+ years and still helping others. Thanks for the great solution.

Anonymous said...

Pure genius. I really hope I can take this strategy and apply it to other situations in the future. Much appreciated.

Destined said...

Hi, when we lock the system and unlock it, the resize event of java script is getting fired, is there any way we can stop this event when the system is unlocked.

chillwebdesigns said...

Hi have you got a working demo, i can't seem to get the code to work?

Chris Nash said...

This method is still utter genius. Definitely the best javascript tip on the web.

Omer Can Karadagli said...

here is my code:
var winW = 630, winH = 460;
function checkWinWH(){
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
alert('Window width = '+winW+' Window height = '+winH);
}
window.onload=checkWinWH;
window.onresize=window_resize;
var resizeTimeoutId;
function window_resize(e) {
window.clearTimeout(resizeTimeoutId);
resizeTimeoutId = window.setTimeout('checkWinWH();', 100);
}

Anonymous said...

Awesome, thanks very much!

Wood said...

Thanks very much... This solve my problem :)

R>>>A>>>M said...

it is 2012 and this didn't work 4 me
trying adding it to a function might help
going to try it