The EqualHeights jQuery Plugin

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

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

You can download the plugin here (right-click and save the link).

You can see a demo of the plugin here.

The plugin’s functionality is so simple because it’s designed to do only one thing: set all elements you specify to the same height.

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.

For example:

$(".columns").equalHeights(100,300);

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.

You can also nestle the function inside of a chain, to keep your code minimalistic:

$(".columns").equalHeights().css("color","blue");

Detailed Usage

For those not familiar with using jQuery plugins, here’s what you need to know.

1. Load the jQuery library in your document’s head. That’ll look something like this:

<script language="javascript" type="text/javascript" src="jquery.js"></script>

2. Load the equalHeights plugin the same way. Be sure the plugin comes after (i.e., below) the main jQuery script… the function relies on jQuery already being loaded:

   <script language="javascript" type="text/javascript" src="jquery.js"></script>
   <script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>

3. In order for the function to be able to calculate heights accurately, you’ll 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:

   $(document).ready(function() {
   	$(".columns").equalHeights(100,300);
   });

And that’s about all there is to it!

Known Limitations

• Sometimes this script has trouble accurately calculating heights in Internet Explorer if you’re trying to find the height of an element that contains images that don’t have heights set. Unless the height has been specified, the script seems to assume a height of zero.
• If you resize the text in your browser window, the blocks will not resize automatically. In some browsers, you would be able to fix this by calling the script again on resize, with something like:

  $(".columns").resize(function(){
   	$(".columns").equalHeights();
  });

  However, I’m given to understand that this doesn’t work on Firefox, as the browser doesn’t report text resizes as a “real” resize. I’m currently not aware of a good workaround.

Worth Mentioning

I should point out that there is a similar jQuery plugin out there already called equalHeight which has similar functionality. However, that plugin requires significantly more code and the author warns that it doesn’t work in Internet Explorer. I feel my contribution, which is very small and cross-browser compatible, is thus still worthwhile.

Further, CSS Newbie reader Jared Mellentine posted a similar jQuery function in the comments of the previous Equal Heights article. His functionality is slightly different than mine (his looks specifically for child elements, whereas mine assumes you’re specifying the elements you want to resize directly), but he did give me the idea of adding additional functionality to my plugin. So thanks, Jared!