window.resize event firing in Internet Explorer

Question

As you are aware, in Internet Explorer, the window.resize event is fired when any element on the page is resized. It does not matter whether the page element is resized through assigning/changing its height or style attribute, by simply adding a child element to it, or whatever -- even though the element resizing does not affect the dimensions of the viewport itself.

In my application, this is causing a nasty recursion, since in my window.resize handler I am resizing some <li> elements, which in turn re-fires window.resize, etc. Again, this is only a problem in IE.

Is there any way to prevent window.resize from firing in IE in response to elements on the page being resized?

I should also mention that I'm using jQuery.

Answer 1

I couldn't get the resize event to fire when an element resized (only tried in IE8 though).

However what is the target on the event object when you're experiencing this issue, could you do:

$(window).resize(function(e) {
    if( e.target != window ) return;
    // your stuff here
});

Answer 2

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).

Answer 3

I ran into this problem today and decided to put the following at the top of my global included javascript file:

var savedHeight = 0;
var savedWidth = 0;
Event.observe(window, 'resize', function (e) {
    if (window.innerHeight == savedHeight && 
        window.innerWidth == savedWidth) { e.stop(); }
    savedHeight = window.innerHeight;
    savedWidth = window.innerWidth;
});

That requires Prototype, by the way.