Equal Height 2.0
Created Tuesday 16th of September 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on bugtracker.a-framework.org fails, e-mail me.
What it Does
This plug-in makes HTML-elements equal height by adjusting their min-height CSS properties. Of course IE6 has no clue what min-height means so the plug-in uses height for that crappy old dinosaur.
How to Use
jQuery('#content, #secondary-content').equalHeight(); would make the elements with IDs 'content' and 'secondary-content' equal height.
Example
Hi
Hi
Bye!
Example Code
HTML
<div id="jquery-equal-height-example">
<p>Hi</p>
<p>Hi<br />Bye!</p>
</div>
JS
jQuery('#jquery-equal-height-example p').equalHeight();
Source Code
jQuery.fn.equalHeight = function () {
var height = 0;
var maxHeight = 0;
// Store the tallest element's height
this.each(function () {
height = jQuery(this).outerHeight();
maxHeight = (height > maxHeight) ? height : maxHeight;
});
// Set element's min-height to tallest element's height
return this.each(function () {
var t = jQuery(this);
var minHeight = maxHeight - (t.outerHeight() - t.height());
var property = jQuery.browser.msie && jQuery.browser.version < 7 ? 'height' : 'min-height';
t.css(property, minHeight + 'px');
});
};
Random jQuery Plug-ins
Captcha Refresh
If you use a so called CAPTCHA-image on your site then you can use this plug-in to allow users to click your CAPTCHA in order to generate a new random...
Colour Picker
Use this plug-in on a normal <select>-element filled with colours to turn it in to a colour-picker widget that allows users to view all the colours in...
Drag to Select
Use this plug-in to allow your users to select certain elements by dragging a "select box". Works very similar to how you can drag-n-select files and ...
