javascript - 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 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 results in an infinite loop, triggering the window.resize again and again.

The code without fix:

$(window).resize(function(){
    var onResize = function(){
        //The method which alter some css properties triggers 
        //window.resize again and it ends in an infinite loop
        someMethod();
    }
    window.clearTimeout(resizeTimeout);
    resizeTimeout = window.setTimeout(onResize, 10);
});

Solution:

var winWidth = $(window).width(),
    winHeight = $(window).height();

$(window).resize(function(){
    var onResize = function(){
        //The method which alter some css properties triggers 
        //window.resize again and it ends in an infinite loop
        someMethod();
    }

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