Question

The Solution:

http://noteslog.com/post/how-to-fix-the-resize-event-in-ie/

Development Issue:

I am having an IE7 compatibility issue with jQuery. Essentially what is supposed to happen is the resize event tells two divs to not show, and changes another div to visible. Then after a setTimeout occurs the divs are changed back on, and the other div that was shown is not shown; then reloads the page. This works fine in IE8, IE9, Mozilla, Chrome, and Safari. So this has to be something relevant to IE7. Any suggestions and ideas? I am always grateful for anything.

<script type="text/javascript">
    $(document).ready(function(){
        $(window).resize(function() {
            $('#res_mainContainer').css({"display":"none"});
                    for ( var h = 1; h < 100; h++)
                             {
                                    $('#CarLot' + h).css({"visibility":"hidden"});
                             } 
            $('#loading').css({"display":"block"});
              var constantResize =  jQuery(window).width() + 'x' + jQuery(window).height();
              $("#WINDOWS_RESOLUTION").text(constantResize);


        setTimeout( function() {
            $('#res_mainContainer').css({"display":"block"});
                    for ( var h = 1; h < 100; h++)
                             {
                                    $('#CarLot' + h).css({"visibility":"visible"});
                             } 
            $('#loading').css({"display":"none"});
            location.reload()
            }, 2000 );

        });
    });
</script>

The old JavaScript that was used when throttled:

<script type="text/javascript">
var timeoutId;
function throttleResize(fn) {
window.onresize = function () {
    window.clearTimeout(timeoutId);
    timeoutId = window.setTimeout(function () {fn.call();}, 1000);
    document.getElementById("loading").className = "loading-visible";
    document.getElementById('res_mainContainer').style.visibility = 'hidden';
             for ( var h = 1; h < 40; h++)
                 {
                 document.getElementById('Carlot' + h ).style.visibility = 'hidden';
                 } 
    };
}

function doSomething() {
window.location.reload(true);
document.getElementById("loading").className = "loading-invisible";
document.getElementById('res_mainContainer').style.visibility = 'visible';
             for ( var h = 1; h < 40; h++)
                 {
                 document.getElementById('CarLot' + h ).style.visibility = 'visible';
                 }
}

throttleResize(doSomething);

</script>

Answer 1

Resize fires continuously in IE and in WebKit browsers, so when you reize the window you’re potentially calling your handler dozens or hundreds of times, so that’s probably why you’re seeing IE7 (with a much slower JS engine then IE8 or any other modern browser) lock up.

Usually what you want to do is to throttle the resize event (call it less often). See here: http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html