Joe_Maker
Joe_Maker

Reputation: 131

JQuery function (Window Resize)

I'm using this JQuery function to equal my div heights:

//equalize funciton
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

With this OnLoad:

$(window).load(function(){
equalHeight($("#div_right, #div_left, #div_bottom, .border"));
});

It requires that I refresh the page in order for it to take affect (after the page is resized). I would like it to either do it as the user is dragging the window, or just refresh the page after.

Which is recommended? I know the page resize won't be very smooth if the JQuery function is consistently reloading. Also, how could I change my code to fit either option?

Upvotes: 2

Views: 824

Answers (1)

Tooraj Jam
Tooraj Jam

Reputation: 1612

Call your function on both $(window).resize() and $(document).ready(). It will be OK.

EDITION:
I think this is what you need:

<script type="text/javascript"> 
$(window).resize(function() { 
    equalHeight($("#div_right, #div_left, #div_bottom, .border")); 
});

$(document).ready(function() { 
    equalHeight($("#div_right, #div_left, #div_bottom, .border")); 
}); 
</script>

Upvotes: 1

Related Questions