• Demos and Downloads!
• MooTools Plugins
• About / Contact

MooTools Equal Heights Plugin: Equalizer

Keeping equal heights between elements within the same container can be hugely important for the sake of a pretty page. Unfortunately sometimes keeping columns the same height can't be done with CSS -- you need a little help from your JavaScript friends. Well...now you're in luck.

The MooTools JavaScript

var Equalizer = new Class({
	initialize: function(elements) {
		this.elements = $$(elements);
	},
	equalize: function(hw) {
		if(!hw) { hw = 'height'; }
		var max = 0,
			prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min-' : '') + hw; //ie6 ftl
			offset = 'offset' + hw.capitalize();
		this.elements.each(function(element,i) {
			var calc = element[offset];
			if(calc > max) { max = calc; }
		},this);
		this.elements.each(function(element,i) {
			element.setStyle(prop,max - (element[offset] - element.getStyle(hw).toInt()));
		});
		return max;
	}
});

The first step is cycle through each element to find which is the tallest (or widest -- this plugin accommodates for equal widths as well). Once we know the largest number we can set the min-property for the element to that number while subtracting border and padding. Simple!

The Sample Usage

var columnizer = new Equalizer('.sizeMe').equalize('height'); //call .equalize() as often as you want!

Obviously the class is super small. You create one instance, passing elements initially. From that point forward you can simply call the equalize method as many times as you would like. This is especially useful if the contents of a given column changes frequently.

Let me know if you see any room for improvement. I think this plugin will be quite useful for many developers.

Discussion

The Bottom Line