CODEWITHSUNDEEP
javascriptjqueryhtml
iMax
iMax

Reputation: 587

Detected height of a percentage-width-div is still the same after resizing the window? jQuery

It is hard to explain… so I opened a Fiddle: http://jsfiddle.net/qga046f3/

Goal: My goal is to get three divs of the same height. So I detect all the heights and choose the biggest one and apply this height to the other div-containers. If the user resizes the browser-window the heights of the divs should be re-adjust. But jQuery gives me always the same height from first time. Why?

This is my jQuery code: 

var adjustheights = function(){
    heights = [];
    $('.element').each(function(i){
        heights.push($(this).outerHeight());
    }); 
    var maxHeight = Math.max.apply(Math, heights);
    $('.element').css('height', maxHeight);
    $('.maxheight').html(maxHeight);
}

adjustheights();

$(window).resize(function(){
    adjustheights();    
});

Upvotes: 0

Views: 167

Answers (1)

Teknotica
Teknotica

Reputation: 1136

You need to reset (remove) the height of each element before adding the new one. jQuery adds an inline style when you set a height via CSS, so you need to remove it and add it again with the new value: (http://jsfiddle.net/qga046f3/4/)

var adjustheights = function(){

        heights = [];

        $('.element').each(function(i){
            // Reset height first
            $(this).removeAttr('style');
            heights.push($(this).outerHeight());
        }); 

        var maxHeight = Math.max.apply(Math, heights);

        $('.element').css('height', maxHeight);

        $('.maxheight').html(maxHeight);

        console.log(heights);
}

adjustheights();

$(window).resize(function(){

        adjustheights();

});

Upvotes: 1

Related Questions