Question

I have the following jQuery:

$(document).ready(function(e) {
    $('#content-wrapper').height($(window).height() - $('#header-wrapper').height() - 25);
});

$(window).resize(function(e) {
    $('#content-wrapper').height($(window).height() - $('#header-wrapper').height() - 25);
});

Something tells me I’m doing it either wrong or taking a longer route.

Is there a faster way to recreate the exact same script?

Footnote: For those with a minor case of OCD, this scrip resizes a <div> to make it fill the rest of the page. The height of #header-wrapper is random and the 25 is the padding between the #header-wrapper and the #content-wrapper.

Answer 1

The issue I would think is related to resize firing many times WHILE you are resizing, and not just at completion.

See: http://jsfiddle.net/8kaar/

To remedy this, add a setTimeout, and clear it on resize, so it only executes after you stop resizing

See here: http://jsfiddle.net/8kaar/1/

So your code should change to

$(window).ready(resizeCallback);
$(window).resize(resizeCallback);

var resizeTimeoutId = null;
function resizeCallback() {
    if (resizeTimeoutId)
        window.clearTimeout(resizeTimeoutId);

    resizeTimeoutId = window.setTimeout(resizeAction, 250);
}

function resizeAction() {
    $('#content-wrapper').height($(window).height() - $('#header-wrapper').height() - 25);
}