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 |
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.