CODEWITHSUNDEEP
javascriptjquery
user2928137
user2928137

Reputation: 59

on window resize change div height

.content-block class content dynamic text, so height is different to each block. Is there any way, on window resize, to get max height of .content-block and apply to all other .content-block?

.content-block{
    height: 72px;
    display: block;
}

<div class="content-block">
    <span><img src='a.png'/></span>
    <span>
        <B>Lorem Ipsum</b>
        when an unknown printer took a galley of type and scrambled it to make a type specimen book
    </span>

    <span><img src='b.png'/></span>
    <span>  
        <b>Lorem Ipsum</b>
        is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
    </span>
</div>

Upvotes: 0

Views: 219

Answers (3)

damian
damian

Reputation: 5444

There are several ways to do this.

Checkout this example on jsfiddle

function getMaxHeight(){
    return maxHeight = Math.max.apply(null, $(".content-block").map(function (){
        return $(this).height();
    }).get());
}

$(window).resize(function(){
    $('.content-block').css('height', 'auto');
    $('.content-block').css('height', getMaxHeight);
});

$('.content-block').css('height', getMaxHeight);

Upvotes: 2

Md. Al-Amin
Md. Al-Amin

Reputation: 1441

Check your answer here. I added another div to show you the demo and also added a background to the divs.

http://jsfiddle.net/Lxtn4

HTML:

<div class="content-block" id="getmax"> <span><img src='a.png'/></span>
 <span><B>Lorem Ipsum</b>when an unknown printer took a galley of  type and scrambled it to make a type specimen book</span>
 <span><img src='b.png'/></span>
 <span>  
  <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry.    
  Lorem Ipsum has
  </span>

</div>
<br>
<div class="content-block">My div</div>

CSS:

.content-block {
    height: 72px;
    display: block;
    background:blue;
}

JS: 

$(window).resize(function () {
    var x = $("#getmax").height();
    $(".content-block").css("height", x);
});

Upvotes: 0

Ben
Ben

Reputation: 11208

You can loop through all .content-block elements, checking if the height of a current .content-block is higher than the highest height found already. If so, overwrite it and finally set the height to all .content-block elements to the iMaxHeight.

It can be done by using something like:

$(document).ready(function() { 
  var iMaxHeight = 0;
  $('.content-block').each(function() { 
    if($(this).css('height') > iMaxHeight) { 
      iMaxHeight = $(this).css('height');
    }
  }
  $('.content-block').css('height', iMaxHeight);
}

Upvotes: 2

Related Questions