The trouble with jQuery's window.resize in IE

To do size control on a Flash site, you usually need the Flash movie to scale up and down automatically along with the window size.

The approach I took: put a container div in place to hold it, with the Flash set to 100% width and height inside. JS listens for browser window resizing and then resets the size of the container div. The Flash side listens for stage changes and moves views to the corresponding positions, etc.

The problem showed up in the jQuery window-resize listener.

Code:

$(document).ready(function(){
WSWFobj(“100%”, “100%”, ‘swf/SiteLoader.swf’, [‘allowScriptAccess’], [‘always’], ‘flashContainer’, ‘mainFlash’);
confSize();
});
$(window).resize(function(){
alert(‘resize’);
confSize();
});

function confSize(){
var w = $(window).width();
var h = $(window).height();
if (w < minW)
w = minW;
if (h < minH)
h = minH;
$(“#wrap”).width(w);
$(“#wrap”).height(h);
}

var minW = 1004;
var minH = 650;
function setMinSize(w, h){
minW = w;
minH = h;
}

Testing in browsers, I found that IE calls confSize() over and over. The reason: IE fires the window resize event multiple times (instead of once) per actual resize. In practice, for every single resize, IE always fires multiple window.resize events rather than one.

An off-the-shelf solution: this jQuery plugin fixes the problem http://plugins.jquery.com/project/wresize(http://plugins.jquery.com/project/wresize)

This plugin tries to fix it by introducing a specific method, wresize, which you can use like this: $( selector ).wresize( your_handler )