CODEWITHSUNDEEP
javascriptjqueryinternet-explorer-7
user763349
user763349

Reputation: 857

jQuery: IE 7 Compatibility Issue- $(window).resize firing event and locking up

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>

Upvotes: 1

Views: 3062

Answers (1)

RwwL
RwwL

Reputation: 3308

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

Upvotes: 1

Related Questions