CODEWITHSUNDEEP
javascriptjquery
Sinan Samet
Sinan Samet

Reputation: 6752

Div height doesn't get recalculated on resize

It works perfectly when I refresh the page, but when I resize it doesn't recalculate the div height.

JSFIDDLE

$(document).ready(function() {
    var selectorsArray = ['home', 'about', 'portfolio', 'contact'];
    responsiveResize(selectorsArray);  
$(window).resize(function(){
    var selectorsArray = ['home', 'about', 'portfolio', 'contact'];
    responsiveResize(selectorsArray);  
});
});


function responsiveResize(selectorsArray){
    $.each(selectorsArray, function( index, value ) {
        var cntcnter = $('#'+value+' .content-container');
        var height = $('#'+value+' .content-container').height();
        console.log(height);
        cntcnter.css({'height': height+'px', 'margin-top': '-'+(height/2) +'px'});
    });
}

Upvotes: 0

Views: 1005

Answers (2)

Empx
Empx

Reputation: 93

i wonder why you want to do that with jquery. i would do that in css.

like that

<div class='container'>
   <div class='column col 12'>
       <p>Your Inputs here</p>
   </div>
<div class='clear'></div>
</div>

then this in css

    .container {
         margin: 0 auto;
         width: 960px;
    }
    .col-12{
         width: 100%;
    }
.clear {clear: both;}
.column {padding: 0 .8em; float:left;}

col-6 would be width:50% col-3 would be width:25%

Upvotes: 1

VVV
VVV

Reputation: 7603

The reason it's not working is because on the first run, you set a height to the container. On the second run, it already has a height set so it's always the same value. If the text overflows the container, it's not affecting the new height in this case.

If you want to keep using your code, you need to clear/remove the height you added on the previous run.

You can use this 

var height = $('#'+value+' .content-container').css('height', '').height();

Like Chris Empx mentioned, this is easily obtainable with CSS.

Also, you could optimize the code like this fiddle

Upvotes: 2

Related Questions