Sep 23
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
September 26th, 2007 at 12:04:44
Brillant!
…but check variable $.browser.version… It’s not numeric!
for get work, I have to change in $.browser.version != “7″
September 26th, 2007 at 20:29:28
Thanks Max. Fixed and incremented version to 1.1 :-)
October 3rd, 2007 at 06:39:40
How do u have a fixed width? only resize on the height?
December 31st, 2007 at 04:20:30
This works well. Thanks! But this works only at the end of the window resize event in firefox, and during in IE. Is there some way I can call an event handler DURING the resize (that works cross browser?) I’d like to adjust some splitter panes while the window is being resized.
March 21st, 2008 at 19:42:08
When I use the plugin and call a function with passing variables, such as resize(800,700), it bombs out. Any way the plugin could use functions with passing variables? Any one else experienced this problem and come up with a work around?
April 24th, 2008 at 16:51:34
The Plugin works really well. I thought I was going to have to write something myself. Well done!
June 15th, 2008 at 04:53:40
This is a fantastic plugin. But I need a huge refinement. I need to perform a resize on an element AFTER MSIE 6/7 have finished the resize. Can you think of any voodoo that can know when that event occurs?
June 15th, 2008 at 10:52:34
In the above example I resize the #content DIV after a window resize occurs…
July 18th, 2008 at 04:11:53
Andrea,
Thanks for posting your solution. I noticed that binding multiple wresize handlers only executes the last one. Is that by design? Would it make sense to enhance the plugin to execute all attached handlers, in sequence?
Thanks
Alex
September 24th, 2008 at 06:35:33
hi,
I am trying to use the jQuery splitter with richFaces, which i am able to integerate using tag. However, I am not able to make that “bind” function work with rich faces. I used the following query
Can you people help me in binding it ?
September 25th, 2008 at 15:57:08
Hi, thank you for such a useful plugin. Can i ask a question?
Does this only fire when the user’s browser is IE6 or IE7?
I have written a website with a resizing image gallery. It works in all browsers except IE<8 and then it only breaks on resize of the window. What i would like to do is still have a $(window).bind(”resize”){func} to resize the images except for IE<8 where i could use
jQuery( function($) {
function content_resize(){
window.location.reload(true);
}
$( window ).wresize( content_resize );
} );
this would force a refesh which is a minor annoyance for IE users and completely ok by me ; )
Thank you