ucantblamem

One of the things that I’m continually doing is figuring out sneaky ways of making websites display in ways that CSS doesn’t really do too well (yet). One of those things is making multiple elements have equal height, the way that tables do.I’ve been using JavaScript to achieve this for quite a while, but it wasn’t until last week that I decided to make a MooTools plugin out of it. As with many things that I abstract, I thought that someone else might find this useful. So, without further ado, here is the plugin:

var Equalizer = new Class({

    elements: [],
    height: 0,

    initialize: function(elements) {
        this.elements = $$(elements);
        this.calculateHeight();

        if (this.height > 0) {
            this.resizeElements();
        }
    },

    calculateHeight: function() {
        $$(this.elements).each(function(el) {
            if (el.offsetHeight > this.height) {
                this.height = el.offsetHeight;
            }
        }, this);
    },

    resizeElements: function() {
        $$(this.elements).each(function(el) {
            el.setStyles({
                'height': this.height + 'px'
            });
        }, this);
    }

});

To use it, you just need to send it an object collection like so:

window.addEvent('domready', function() {
	var eq = new Equalizer($$('.mydiv', '#myotherdiv', 'body ul li'));
});

If you notice issues, please give me as much information as possible in the comments and I’ll take a look at it.

Update: 16/06/2008

A newer version of this plugin is now available for MooTools 1.2.

This entry was posted on Sunday, January 27th, 2008 at 5:57 pm and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.