{"id":292,"date":"2008-12-10T20:09:44","date_gmt":"2008-12-11T01:09:44","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=292"},"modified":"2008-12-10T20:09:44","modified_gmt":"2008-12-11T01:09:44","slug":"equalheights-jquery-plugin","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/equalheights-jquery-plugin\/","title":{"rendered":"The EqualHeights jQuery Plugin"},"content":{"rendered":"

\"\"<\/a><\/p>\n

After I wrote and published my last article on writing a function to equalize heights in jQuery,<\/a> I realized that the function would probably make a really useful jQuery plugin. This is that plugin.<\/p>\n

This is also my first attempt at a jQuery plugin, so I apologize in advance if I\u2019ve done something painfully stupid (and painfully obvious) to any and all plugin veterans out there. Luckily, the functionality is extremely simple.<\/p>\n

You can download the plugin here (right-click and save the link).<\/p>\n

You can see a demo of the plugin here.<\/a><\/p>\n

The plugin\u2019s functionality is so simple because it\u2019s designed to do only one thing: set all elements you specify to the same height.<\/p>\n

This plugin is slightly more sophisticated than the function I wrote earlier this week. Instead of being stuck setting all your columns to the height of the tallest element, you can also (optionally) specify a minimum and maximum height you want the element to be.<\/p>\n

For example:<\/p>\n

$(\".columns\").equalHeights(100,300);<\/pre>\n
This would set all your elements to be at least 100px tall, but no more than 300px tall. If your tallest elements contain more than 300px worth of content, the containing element will still be resized, and a scroll bar will appear on the side of the element. If you only specify one number, that number will be treated like the minimum height, meaning all elements will be at least that number of pixels tall.<\/p>\n
You can also nestle the function inside of a chain, to keep your code minimalistic:<\/p>\n
$(\".columns\").equalHeights().css(\"color\",\"blue\");<\/pre>\n
Detailed Usage<\/h3>\n
For those not familiar with using jQuery plugins, here\u2019s what you need to know.<\/p>\n
    \n
  1. Load the jQuery library in your document\u2019s head. That\u2019ll look something like this:<\/li>\n
    <script language="javascript" type="text\/javascript" src="jquery.js"><\/script><\/pre>\n<\/li>\n
  2. Load the equalHeights plugin the same way. Be sure the plugin comes after<\/em> (i.e., below) the main jQuery script… the function relies on jQuery already being loaded:\n
    <script language="javascript" type="text\/javascript" src="jquery.js"><\/script>\n<script language="javascript" type="text\/javascript" src="jquery.equalheights.js"><\/script><\/pre>\n<\/li>\n
  3. In order for the function to be able to calculate heights accurately, you\u2019ll need to make sure it waits until the page is done loading before running. So wrap the function call (just like you should most all of your jQuery functions) in a $(docment).ready() function, like so:\n
    $(document).ready(function() {\n\t$(\".columns\").equalHeights(100,300);\n});<\/pre>\n<\/li>\n<\/ol>\n
    And that\u2019s about all there is to it!<\/p>\n
    Known Limitations<\/h3>\n