CODEWITHSUNDEEP
jquery
Elijha
Elijha

Reputation: 181

Set sibling DIV the equal height (tallest)

I'm trying to set paired divs the same height.

<div class="item ">
Some text
</div>
<div class="item right">
Some text
</div>
<div class="item ">
Some text<br/>Some text<br/>Some text<br/>Some text<br/>Some text
</div>
<div class="item right">
Some text<br/>Some text<br/>Some text<br/>Some text
</div>
<div class="item ">
Some text
</div>
<div class="item right">
Some text<br/>Some text<br/>Some text
</div>

css

.item{width: 45%;float: left;position: relative;border: 1px solid #000;clear:left;}
.item.right{float:right;clear:right;}

jQuery I'm using

$('.item.right').prev().each(function() {
    leftheight = $(this).height();
    rightheight = $(this).next().height();      
    if(leftheight > rightheight){
        $(this).next().height(leftheight);
    }else{
        $(this).height(rightheight);
    }               
});

This doesn't seem to work and I can't figure out why.

I have two column layout where the divs have a pin line border, so it is very obvious when they are not the same height. the 'right class' float the item to the right. I only want the pairs the same heights as they will form a row. I don't want to use tables (css or otherwise) as the layout is dynamic for mobile (where they form a single column).

Upvotes: 5

Views: 4376

Answers (4)

JoDev
JoDev

Reputation: 6873

You have to first retrieve the max height, and then set all height to this one.

Like this : 

var max_height = 0;
$('.item.right').prev().each(function() {
  if($(this).height() > max_height) {
     max_height = $(this).height();
  }
});
$('.item.right').prev().each(function() {
    $(this).height(max_height);
}

EDIT

So the error is on next() because you are already on the right item, and you compare with the next() one... Use prev() instead!

$('.item.right').prev().each(function() {
rightheight = $(this).height();
leftheight = $(this).prev().height();      
if(rightheight > leftheight){
    $(this).prev().height(rightheight);
}else{
    $(this).height(leftheight);
}               
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

You can use map() to get the heights of the div left/right elements in to an array, then Math.max on the array to get the tallest, and use that value for both of them. Try this:

$('.item.right').each(function() {
    var $divs = $(this).add($(this).prev('.item'));
    var tallestHeight = $divs.map(function(i, el) {
        return $(el).height();
    }).get();
    $divs.height(Math.max.apply(this, tallestHeight));
});

Example fiddle

Upvotes: 8

Tats_innit
Tats_innit

Reputation: 34107

Working Demo http://jsfiddle.net/nTFtn/ or http://jsfiddle.net/6tU2m/

Is this what you looking for!

Hope this helps :)

code

$('.item.right').prev('div').each(function () {

    leftheight = $(this).height();
    alert(leftheight);
    rightheight = $(this).next().height();
    if (leftheight > rightheight) {

        $(this).next().height(leftheight);
    } else {
        $(this).height(rightheight);
    }
});

Upvotes: 2

Jai
Jai

Reputation: 74738

You can try with this(.map() and Math.max.apply()):

You have to get the heights in the array and look for the maximum value in the array then Math.max.apply() will apply the max value from the array.

$(document).ready(function() {
   var heightArray = $(".item").map(function() {
        return  $(this).height();
   }).get();
   var maxHeight = Math.max.apply(Math, heightArray);
   $(".item").height(maxHeight);
});

Tryout the fiddle

Upvotes: 3

Related Questions