CODEWITHSUNDEEP
jquerycssheight
Arg Geo
Arg Geo

Reputation: 1035

jQuery Height Adjustment

Is there any way to say: IF John's height is larger THAN Mike's height THEN make Mike's height equal to John's height? CSS (although I don't believe this can be done with CSS) or jQuery.

See the image --> http://i50.tinypic.com/2ecdstw.jpg to see what I mean.

Upvotes: 1

Views: 117

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206618

jsBin demo

$(".elements").height(Math.max.apply(null, $(".elements").map(function () {
    return $(this).height();
}).get()));

Here is the CSS only solution:

  .el_wrapper{
    position:relative;
    display:table;
    overflow:hidden;
  }      
  .el{
    position:relative;
    display:inline-block;
    overflow:hidden;
    width:150px;
    float:left;
    background:#eee;
    margin:3px;
    padding:10px;
    margin-bottom:-3000px;
    padding-bottom:3015px;
  }

jsBin demo 2

Upvotes: 0

Ryan Lanciaux
Ryan Lanciaux

Reputation: 5976

You could do something like this with jQuery using the height style property.

if($(".john").height() > $(".mike").height())
{
    $(".john").height($(".mike").height());
}

UPDATE

Demo of above code

Upvotes: 1

Nikita Shekhov
Nikita Shekhov

Reputation: 503

 $.fn.equalHeight = function(){
    var h = 0;
    this.each(function(){
        h = Math.max(h, $(this).height());
    }).height(h);
 };

Is this small plugin it what you need?

Upvotes: 1

adeneo
adeneo

Reputation: 318342

var john = $("#john").css('height'), //use css
    mike = $("#mike").height(); //or just the height() method

if (john>mike) mike=john;

Upvotes: 1

Related Questions