CODEWITHSUNDEEP
javascriptjquery
user4518254
user4518254

Reputation: 21

jQuery Height Miscalculation on Window Resize

I have some divs with an equal height determined through the following function:

function equalHeights() {
    var sameHeightDivs = $('.equal-heights');
    var maxHeight = 0;
    sameHeightDivs.each(function() {
        maxHeight = Math.max(maxHeight, $(this).outerHeight());
    });
    sameHeightDivs.css({ height: maxHeight + 'px' });
}

equalHeights($('.equal-heights'));

$(window).resize(function(){
  equalHeights($('.equal-heights'));
});

However, when the window resizes, it keeps essentially doubling the divs height. My intention was to simply recalculate the div heights.

Upvotes: 2

Views: 30

Answers (1)

Thomson Mixab
Thomson Mixab

Reputation: 657

function equalHeights() {
    var sameHeightDivs = $('.equal-heights');
    var maxHeight = 0;
    sameHeightDivs.each(function() {
        maxHeight = Math.max(maxHeight, $(this).outerHeight());
    });
    // **** clear old css height before put in a new one *****
    sameHeightDivs.css({"height":""});
    sameHeightDivs.css({ height: maxHeight + 'px' });
}

equalHeights($('.equal-heights'));

$(window).resize(function(){
  equalHeights($('.equal-heights'));
});

Upvotes: 1

Related Questions