status201 / jquery-equalheights

Equal heights jQuery Plugin

jquery-equalheights

Equal heights jQuery Plugin by Gijs Oliemans, Status201 Web Development

What does it do?

Little jQuery plugin to "vertically align elements" by stretching their height to match the tallest. Only elements that live exactly at the same height in the document will be maximised to the same height. This way 2 rows can vertically align nicely while having different heights.

Install

Download either the production version or the development version of jquery-equalheights.

In your web page:

<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- include jQuery Equal Heights -->
<script src="http://path/to/your/copy/of/jquery.equalheights.min.js"></script>
<script>
$( document ).ready(function() {
    $('.elements-with-different-heights').equalHeights();
});
</script>

Bower

To install jquery-equalheights via Bower:

bower install jquery-equal-heights

Options

Option	Possible values	Default
onLoad	true / false	true
onResize	true / false	true

Examples

$( document ).ready(function() {

    // make all list items with class category the same height
    $('li.category').equalHeights();
  
    // make different elements the same height
    $('p.intro, img.thumbnail').equalHeights();
  
    // only resize once now (not on window.resize and window.load) 
    $('.nav button').equalHeights({
        onResize: false,
        onLoad: false
    });
});

More info

More info at: http://dev201.nl/equal-height-jquery-plugin/