jQuery Equal Height Plugin

Measures and sets the height of all child elements.

by DannyEnglander

HTML

<h1>Passing the parent element</h1>
<ul id="parent" class="grouping">
    <li>Hello World</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis ultrices ipsum nec placerat.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis ultrices ipsum nec placerat. Maecenas in euismod justo. Duis euismod leo eleifend turpis aliquam in volutpat nulla mattis.</li>   
</ul>
<h1>Passing a group of elements</h1>
<div id="group" class="grouping">
    <div>Hello World</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis ultrices ipsum nec placerat.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis ultrices ipsum nec placerat. Maecenas in euismod justo. Duis euismod leo eleifend turpis aliquam in volutpat nulla mattis.</div>   
</div>
<h1>Setting a fixed height of 150px</h1>
<div id="height" class="grouping">
    <div>Hello World</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis ultrices ipsum nec placerat.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis ultrices ipsum nec placerat. Maecenas in euismod justo. Duis euismod leo eleifend turpis aliquam in volutpat nulla mattis.</div>   
</div>
<h1>Setting a maximum height of 250px</h1>
<div id="maxheight" class="grouping">
    <div>Hello World</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis ultrices ipsum nec placerat.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis ultrices ipsum nec placerat. Maecenas in euismod justo. Duis euismod leo eleifend...

CSS

h1{font:600 14px/22px Arial;}
.grouping{display:block; width:510px; overflow:hidden; border:solid 1px blue; margin:10px; padding:5px 0 5px 5px;}
.grouping li, .grouping div{float:left; display:inline; width:100px; padding:10px; border:solid 1px red; margin-right:5px; overflow:hidden;}

JavaScript

//this closure reserves the $.
(function ($) {   
    $.fn.extend({        
        equalHeight: function (options) {
            //set default height to 0 or auto
            var defaults = {
                height:null,
                minHeight: 0,
                maxHeight: null               
            };
            //merge options
            options = $.extend(defaults, options);
            //cache the children (is this the parent or a group of elements)
            var children = (this.length > 1) ? this : this.children();             
            if(options.height !== null){
                //if specific height is set
                children.height(options.height);
            }else{
                //set the height to auto which releases the boxes heights
                children.css('height', 'auto');
                //loop though the elements and get their heights
                children.each(function () {            
                    //if bigger than the default set to default
                    if ($(this).outerHeight() > options.minHeight) options.minHeight= $(this).outerHeight();
                    //if maxheight is set
                    if(options.maxHeight !== null){
                        if(options.minHeight > options.maxHeight) options.minHeight= options.maxHeight;
                    }
                });
                //set the height on all the children
                children.height(options.minHeight);
            }
            //return this so the jQuery chain is preserved
            return this;
        }
     });  
})(jQuery);

$(document).ready(function () {
    //pass the parent to a group of elements
    $('#parent').equalHeight();
    //you can pass a set of elements instead of passing the parent
    $('#group div').equalHeight();
    //fixed height of 150px
    $('#height').equalHeight({height:150});
    //maximum-height of 250px
    $('#maxheight').equalHeight({maxHeight:250});
    //minimum-height of 400px
   ...