jQuery Plugin For Equalizing The Height of Your Elements - Equal Height Columns

File Size: 4.17KB
Views Total: 1754
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Equalizing The Height of Your Elements - Equal Height Columns

Equal Height Columns is an useful jQuery plugin that equalize the height of elements to make them have the same height. Ideal for creating a clean and neat layout for your website.

See also:

Basic Usage:

1. Create a collection of html elements that have different height.

<div id="example">
<div class="left">
...
</div>
<div class="center">
...
</div>
<div class="right">
...
</div>
</div>

2. Load the jQuery javascript library and jQuery Equal Height Columns at the bottom of your page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.equal-height-columns.js"></script>

3. Set all the DIVs have the same height. The height is the highest of the passed elements.

<script>
$(#example).equalHeightColumns();
</script>

4. Options.

<script>
$(#example).equalHeightColumns({

speed : 0,
// Speed of the element's height change animation.

height : 0,
// Set the height that all of passed elements should be.

minHeight : 0,
// Set the minimum height all of the elements should be.

maxHeight : 0,
//Set the maximum height all of the elements should be.

resize : function()
// Resize columns. 
});
</script>

This awesome jQuery plugin is developed by dogzworld. For more Advanced Usages, please check the demo page or visit the official website.