jQuery resizing code causing perpetual resize event in IE7

Question

This is a bit of JavaScript (jQuery) I wrote that shrinks an element to be as high as possible while still keeping the entire page above the fold. The way it works is essentially "calculate the height difference between the document and the window, and make the element smaller by that much". (see below.)

This works fine as far as I can tell — except that unfortunately I still need IE7 support, and the behavior in that browser is kind of wonky. Specifically, calling my function seems to fire another resize event , causing a kind of feedback loop.

IE7 is apparently the only browser this happens in, and I haven't yet figured out why it happens. I've already tried making the target height smaller to make sure nothing goes out of bounds, but the result is the same.

What's the best way to make my code not fire the resize event in IE7?

function stretchToBottom($element) {

    (window.onresize = function () {

        // temporarily reset the element's height so $(document).height() yields the right value
        $element.css({maxHeight: ''});

        var heightDiff = $(document).height() - $(window).height();
        if (heightDiff <= 0) {
            return;
        }

        var initialHeight = $element[0].scrollHeight;
        var minHeight = 200;
        var targetHeight = initialHeight - heightDiff;
        var height = Math.max(targetHeight, minHeight);

        $element.css({maxHeight: height + 'px'});

    })();

}

Answer 1

wrap your code with:

<!--[if !IE7]>-->
//NONE IE code comes here
<!--<![endif]-->

<!--[if IE7]>
//ONLY IE7 code comes here
<![endif]-->

more info here

Answer 2

I just discovered this question which describes the exact same problem I have. The top two answers offered a working solution: store the current window dimensions and process the event listener only when they have actually changed.

For the record, here's the working code I currently have. I changed the function name to be more accurate and moved the "add event listener" part to outside the function.

function shrinkToFit($element) {

    $element.css({maxHeight: ''});

    var heightDiff = $(document).height() - $(window).height();
    if (heightDiff <= 0) {
        return;
    }

    var initialHeight = $element[0].scrollHeight;
    var minHeight = 200;
    var targetHeight = initialHeight - heightDiff;
    var height = Math.max(targetHeight, minHeight);

    $element.css({maxHeight: height + 'px'});

}

var lastWindowWidth = $(window).width();
var lastWindowHeight = $(window).height();
$(window).on('resize', function () {
    if (lastWindowWidth !== $(window).width() || lastWindowHeight !== $(window).height()) {
        shrinkToFit($tableContainer);
        lastWindowWidth = $(window).width();
        lastWindowHeight = $(window).height();
    }
});