jQuery EqualHeights

test w/ plugin syntax Original: http://jsfiddle.net/webrocker/E5MNC/

by Jens Grochtdreis

HTML

<div class="stage">test</div>
<div class="stage">test</div>
<div class="stage">testtest testtest testt esttest testtest testte</div>
<div class="stage">test</div>
<div class="stage">test</div>
<div class="stage">testtest testtestt est testtest test test testte sttesttest</div>
<div class="stage">test</div>
<div class="stage">test sttesttest test</div>

CSS

body {
    background: #000;
}
.stage {
    color: #333;
    width: 16%;
    margin: 2%;
    padding: 2%;
    background: #fff;
    float: left;
    border: 1px solid #900;
    border-radius: 0.25em;
    box-shadow: 0 0 0.5em 1em rgb(255,255,255),inset 0 0.15em 0.5em rgb(0,0,0);
}

JavaScript

(function($){
    $.fn.eqh = function(minH,maxH){
        var max = minH || 0;
        this.each(function(){
            var h = $(this).height();
            max = (max < h)?h:max;
        });
        if( (maxH) && max > maxH ){
            max = maxH;
        }
        return this.each(function(){
            $(this).height(max);
        });
    }
})(jQuery)
    
$('.stage').eqh();