Basically
i have few divs with flexible height and fixed paddings so its being pretty difficult to have them all with same height,
i am trying like this:
$(document).ready(function(){
$('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content').outerHeight( $('header:eq(0)').outerHeight() );
console.log($('header:eq(0)').outerHeight(true));
});
But the problem is that header is not allways the highest, so i need to
check wich one is higher (considering that there are more than one .content elements)
apply outerHeight to all of them
but i can't find a good/beautifull way (have one solution but i need to many if's and variables) to do this
any clue?
-EDIT-
while waiting i came up with this
$(document).ready(function(){
var height = 0;
$('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content,header').each(function(){
if($(this).outerHeight() > height){
height = $(this).outerHeight();
}
});
$('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content,header').each(function(){
$(this).outerHeight(height);
});
console.log('highest height is '+height); //it doesn't output the highest value
});
but the most of those divs are in display:none
is that the problem?
Instead of adding display none, give them the class "hide" and use this.
$(function(){
var height = 0;
$('.hide').show();
$('header').each(function(){
height = Math.max( height, $(this).outerHeight() )
});
$('.hide').hide();
$('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content').outerHeight(height);
console.log($('header:eq(0)').outerHeight(true));
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With