jQuery Height Miscalculation on Window Resize

user_4518254 0
Viewed 26

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.

jquery javascript
1 Answers
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'));
});
user_162035790
Related