CODEWITHSUNDEEP
jquerycss
Bird87 ZA
Bird87 ZA

Reputation: 2160

Faster way to run this resize script

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.

Upvotes: 0

Views: 882

Answers (3)

CaffGeek
CaffGeek

Reputation: 22064

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);
}

Upvotes: 2

webdeveloper
webdeveloper

Reputation: 17288

First of all your solution is slower, because you finding DOM elements on each resize and wrap them to jquery object, you need cache them. Look at my example from this question: resize example

Upvotes: 0

Kostia
Kostia

Reputation: 6304

Is the #header-wrapper size change after page load? if not, then you dont need to be recalculating the height each time you resize the window, which will speed things up.

Upvotes: 0

Related Questions