Variable not resetting in function of event handler

Question

I have a page with 3 columns in it and varying amounts of text. These 3 columns need to be the same height. I have written a function that looks at the height of each column, checks which is tallest, and then sets all of their heights to that length.

I've got an event handler on the window.onresize event that runs this function. At the start of this function, the variable max_height is set to 0. The problem is, it never seems to get reset to 0 after being called multiple times. The new max_height just seems to keep being added to it, the heights of the columns grow taller on each resize. What am I missing?

function resizeHeights(){
    var callouts = $('.callout');
    var max_height = 0;
    callouts.each(function(i){
        if($(callouts[i]).height() > max_height){
            max_height = $(callouts[i]).height();
            console.dir(max_height);
            $(callouts[i]).height(0);
        }   
    });
    callouts.each(function(i){
        $(callouts[i]).height(max_height + 50);
    });
}

$(window).on('resize', function(){
    resizeHeights();
});

score 0 · Accepted Answer · edited May 23 '17 at 12:28

Your code is setting max_height to the tallest column you have. And, since you end up setting all your columns to max_height + 50, then each time you call this function, the columns will grow by 50 pixels.

The problem is that you are never able to see the "natural" height of the columns because once you've called this function once, the height is hard-wired to what you previously set it to and not allow to respond to layout changes due to the window changing size.

What you probably need to so is to clear the css height settings from all columns, then force a browser relayout (so the new natural height is calculated), then run the rest of the code in your function so you can see the natural height of the columns and based your manual height setting based on the new natural height values.

See this answer for how to force the browser to do a layout.

score 0 · Answer 2 · answered Jan 29 '15 at 04:27

0

Try to rename ur variable max_height to ex. max_height2. Just to insure there is no conflicts with other global variable has the same name if there is.

answered Jan 29 '15 at 04:27

Abdallah Al Barmawi

86
1
8

A local variable always take precedence over a global with the same name so this cannot be the issue. – jfriend00 Jan 29 '15 at 06:19
we are right,but we are a developer and should try every thing. – Abdallah Al Barmawi Jan 29 '15 at 06:28
Not really. It makes more sense to know which things could be causing it rather than making blind guesses or spending any time on things that actually can't be causing it. – jfriend00 Jan 29 '15 at 06:30

Variable not resetting in function of event handler

2 Answers2