How to fix the resize event in IE
In IE the window resize event is fired multiple times per actual resize: it is a well known issue for IE6 and IE7, but they misbehave along different patterns. Actually it seems that IE6 is worse than IE7.
After quite a long session of R&D, I’ve got to a pretty good solution, in the form of a jQuery plugin: jquery.wresize.js
/*
===============================================================================
WResize is the jQuery plugin for fixing the IE window resize bug
...............................................................................
Copyright 2007 / Andrea Ercolino
-------------------------------------------------------------------------------
LICENSE: http://www.opensource.org/licenses/mit-license.php
WEBSITE: http://noteslog.com/
===============================================================================
*/
( function( $ )
{
$.fn.wresize = function( f )
{
version = '1.1';
wresize = {fired: false, width: 0};
function resizeOnce()
{
if ( $.browser.msie )
{
if ( ! wresize.fired )
{
wresize.fired = true;
}
else
{
var version = parseInt( $.browser.version, 10 );
wresize.fired = false;
if ( version < 7 )
{
return false;
}
else if ( version == 7 )
{
//a vertical resize is fired once, an horizontal resize twice
var width = $( window ).width();
if ( width != wresize.width )
{
wresize.width = width;
return false;
}
}
}
}
return true;
}
function handleWResize( e )
{
if ( resizeOnce() )
{
return f.apply(this, [e]);
}
}
this.each( function()
{
if ( this == window )
{
$( this ).resize( handleWResize );
}
else
{
$( this ).resize( f );
}
} );
return this;
};
} ) ( jQuery );If you want to try it, here is a test page, where a div is automatically resized when the window is resized.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden;"> <head> <title> test window resize </title> <script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script> <script type="text/javascript" src="jquery.wresize.js"></script> <script type="text/javascript">jQuery( function( $ ) { function content_resize() { var w = $( window ); var H = w.height(); var W = w.width(); $( '#content' ).css( {width: W-20, height: H-20} ); } $( window ).wresize( content_resize ); content_resize(); } );</script> </head> <body> <div id="content" style="border: 1px dashed silver; position:absolute; overflow:auto;"> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div> </body> </html>
References:
http://dev.jquery.com
http://snook.ca
http://ecmascript.stchur.com
Themocracy
Hello guys I just discovered another problem which might help you.
I am using jQuery and I have window.resize event to call a function which will re-position the div appended to the body.
Now when I set the LEFT css property of that appended div, the window.resize event get trigger for NO GOOD REASON.
It it results in an infinite loop, triggering the window.resize again and again.
The code without fix:
=============
$(window).resize(function(){
onResize = function() {
//The method which sets the LEFT css property which triggers window.resize again and it was a infinite loop
setWrapperPosition($mainWrapper.parent());
}
window.clearTimeout(resizeTimeout);
resizeTimeout = window.setTimeout(onResize, 10);
});
Solution:
=====
var winWidth = $(window).width(),
winHeight = $(window).height();
$(window).resize(function(){
onResize = function() {
//The method which sets the LEFT css property which triggers window.resize again and it was a infinite loop
setWrapperPosition($mainWrapper.parent());
}
//New height and width
var winNewWidth = $(window).width(),
winNewHeight = $(window).height();
// compare the new height and width with old one
if(winWidth!=winNewWidth || winHeight!=winNewHeight)
{
window.clearTimeout(resizeTimeout);
resizeTimeout = window.setTimeout(onResize, 10);
}
//Update the width and height
winWidth = winNewWidth;
winHeight = winNewHeight;
});
So basically it will check if the height or width is changed (which will happen ONLY when you actually resize with window).
Thanks Hari…Very, Very nice
What a life saver!
My apologies: add the following at the LAST statement of DelayedResize.
window.clearTimeout(windowResizeTimeout);
I’m sorry if I sound negative, but I think that the following is a way better solution to for those who are looking into NOT executing the same code too many times. The “DelayedResize” method bellow will execute multiple times before user releases the mouse (e.g. drag window size handle, then pause without releasing the mouse), but not even nearly as many times as the onResize fires by default. And, this does not change Mozilla’s behavior at all.
$(document).ready(function()
{
var tempCounter = 0;
var windowResizeTimeout;
window.onresize = function()
{
window.clearTimeout(windowResizeTimeout);
windowResizeTimeout = window.setTimeout(DelayedResize, 100);
};
function DelayedResize()
{
window.status = ++tempCounter;
// Add your original window.onresize implementation here
}
}
Great plugin. Saved me from a serious headache with IE/FF resizing! I did have some trouble copying and pasting your code. Whatever you’re using to display code on this page is a bit buggy. Thanks again!
I’m also not sure I understand how this is supposed to work. I’m developing a plugin for generic resizing (of windows, images, etc.). When I enter the plugin using the regular jQuery event handler method — $(selector).resize(function(){…$(selector).plugin(options)…} — jQuery gives a “this” object with at least one member. If instead I enter the plugin using wresize — $(selector).wresize($(selector).plugin(options)) — the plugin sees a “this” object with this.length == 0. Shouldn’t the plugin get identical “this” objects from jquery’s resize and wresize?
ABSOLUTELY BRILLIANT!
I have been trying to work around the IE Resize Bug many times, many hours and for many different projects!
Finally, thanks to you, I have a solution which I can tailor for every need!!!
I really owe my thanks to you and hope that others find it as useful as I did!
thanks
Thank you :)