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
I’m not sure I understand this plug-in. I was hoping it would not fire a dozen events while the browser was being resized, but fire only once when the person has stopped dragging the browser’s width. In FF3, I get the event fired when the user pauses his movement and when he lets go of the resize handle. In IE6/IE7 I get the event fired continuously while the browser resize handle is being dragged. This is not working any better than using jQuery’s (1.3.2) built-in $(window).resize(fn).
[...]
Thanks for this contribution, very usefull!
Btw, I hate IE…
it didn’t work for me also. Below is the code i used,
jQuery( function( $ )
{
function content_resize(){
document.getElementById(‘leftDiv’).style.height=(document.body.clientHeight-260)+’px’;
document.getElementById(‘rightDiv’).style.width=(document.body.clientWidth-270)+’px’;
document.getElementById(‘rightDiv’).style.height=(document.body.clientHeight-130)+’px’;
}
$( window ).wresize( content_resize );
content_resize();
} );
It is still firing the same number of times as it does when i use resize(). Is there anything wrong in my code? your reply would be very helpful for me.
Thanks in advance.
It seems to me that this script hasn’t really fixed the problem. If i copy your test file, add firebug lite for IE7’s benefit, and drop a console.log(‘resize’) inside of your content_resize() method, it shows that IE7 is still firing the same number of times as it does when i use resize(). Am I missing something?
Awesome – All hail jquery. I spent so much time trying to figure this out. Your plugin worked perfectly in both ie7 and firefox 3. Thanks!
Very fantastic demo~~ But I have one question wanna ask you, Mr. Expert!
I am so amazing that Your example file can successfully ran in My IE7 without “IE prompt me to accept ActiveX”. This makes me very confuse. It is because Once I save as your example file with other name such as test-wresize2.htm and open it in IE7. It will prompt me to accept the ActiveX again. I have checked both original file and my new saved file have the same file size in byte and the coding are all the same. Would you please advise how can you do that? Many Thanks.
If I try to copy the second code in IE7 a yellow windows appears, sometimes with no content until I click into this. But then the code is not marked. If I try to mark it, the window closes. In FF3 this works perfect.
very neat plugin – i’m wondering how complex it would be to fire the event instantly, the idea would be to have a smooth resizing of the elements on the page, like in the old days with the table’s width at 100%. not sure how i could do this… could you exlain a bit more the logic you are using?
many thanks!
Thank you for this plugin.
But, if you have a flash in your website, there is a strange
behavior.
This plugin zoom in the flash.
Sorry for my english.
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
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 ?
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
In the above example I resize the #content DIV after a window resize occurs…
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?
The Plugin works really well. I thought I was going to have to write something myself. Well done!
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?
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.
How do u have a fixed width? only resize on the height?
Thanks Max. Fixed and incremented version to 1.1 :-)
Brillant!
…but check variable $.browser.version… It’s not numeric!
for get work, I have to change in $.browser.version != “7″