Tested in: IE7, FF1.5 (Windows XP), FF2 (OS X), Safari 2.0.4
| Date | Notes |
|---|---|
| 5/8/2007 | Initial release |
| 5/9/2007 | Now compensating for top/bottom borders/padding when setting the element height. However, this requires that document is using the W3C box model and that the borders/padding are specified in px. The IE "quirks" box model and em or % units are not currently supported. |
| 5/10/2007 | Renamed an internal function. Added notes regarding how to handle dynamic content in a column and browser text-resizing. |
| 5/17/2007 | Updates inspired by Michael Futreal's vjustify plugin. equalizeCols() is no longer dependent on the jquery dimensions plugin. Rewrote the logic for handling borders/padding in the height calculation, so it should now work with either W3C box model or IE "quirks" box model. The older version of the plugin can be found here. |
| 7/3/2008 | Updated the height "reset" method for IE (uses "1%" instead of "auto" to allow IE to shrink the elements correctly when the font size is decreased). Updated example to show this plugin working in conjuction with my new jquery.onfontresize.js plugin to re-equalize element heights when the user resizes her browser font. |
| 2/5/2010 | The previous "fix" for IE only worked for IE6. Added additional browser-sniffing (grrr) to support IE7/8. |
var $els = $("#col1, #col2, #col3").equalizeCols();
// requires jquery.onfontresize.js
$(document).bind("fontresize", function () {
$els.equalizeCols();
});
Michael Futreal has written a very similar plugin called vjustify (btw, vjustify is a much cooler name than equalizeCols). He has identified an issue where columns containing images without specified dimensions can cause the height calculations to be incorrect if the plugin is invoked before the images have loaded. Refer to his page for additional information.
If any of the columns contain dynamically updated content, you'll want to call $(elems).equalizeCols() anytime that you show/hide/update content in one of the columns.
UPDATE: the example code above demonstrates using my jquery.onfontresize.js plugin to re-equalize the element heights when the user resizes her browser font.
A slightly more difficult issue is how to handle text resizing in the browser. So far, the only way I've found to deal with that is to use the jQem plugin:
http://davecardwell.co.uk/javascript/jquery/plugins/jquery-em/
Then do something like this to resize the columns if the browser font size changes:
$(document).ready(function() {
$.jqem.init();
$.jqem.bind( function() {
$(elems).equalizeCols();
});
});
So far, this technique seems to work pretty well for me.