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.
Great idea, encapsulating this in a class. I’ve done a similar thing before but just used a loop and had it messily embedded in my code.
Also, MooTools FTW!
Would be nice to extend Elements so you can do something like this:
$$('.someClass').equalize()or
new Elements([new Element('div')]).equalize();Elements.implement({ equalize: function(stop, prevent){ new Equalizer(this, stop, prevent).equalize(); return this; } });line 15:
…less code :) mootools ftw
Here’s the approach you suggested arian…
http://www.jsfiddle.net/sixtyseconds/U8EfF/
…and the Forge plugin: http://bit.ly/ds7tXB
Chris and David, David and Chris, you both saved me some time. Thanks! :D
@Florian, @Chris the Developer: Nice work!
A compliment from Mr Walsh! I feel so important now :D
@Chris the Developer says:
…and the Forge plugin: http://bit.ly/ds7tXB
http://www.mootools.net/forge/p/elements_equalize
The “Download” link is broken
@Chris the Developer: As you should!
I’ve added my plugin to the Forge: http://mootools.net/plugins/p/equalizer
Its not working properly on
Chrome 5.0.375.99 beta on Ubuntu
I have the same version ( minus beta ) on my window box, works fine.
Can someone help with a jQuery version of this?
There’s a jQuery version here: http://www.cssnewbie.com/equalheights-jquery-plugin/
Hey Eystein thanks for helping but the issue with that script is that it will take all classes and make them equal height that way all columns with that class name on a page gets equalized same size.
I wanted a jQuery version of this one because the beauty of this script is that it is relative to it’s parent div thus equalizing all columns but relative to their own parent div. That way I can have multiple use of this script without having all the columns with a same class name of same height.
I was actually trying to use this in a Mega Menu I was designing and the other script, link which you provided, is making all my drop-downs of the same height even if I have just 3 links in a drop-down.
David’s script is doing the job but the issue is I wanted to have just one JavaScript Library in my template and all of my template and it’s features are based on jQuery.
Thanks anyways for you help.
I found it! Here is a jQuery version just in case somebody needs it. It hakes a div and converts all its children to equal height. this way you can have various div columns with various equal heights.
// Equal Height $.fn.equalHeight = function() { $(this).each(function(){ var tallest = 0; $(this).children().each(function(i){ if (tallest < $(this).height()) { tallest = $(this).height(); } }); $(this).children().css({'height': tallest}); }); return this; }; /* Usage */ $(document).ready(function(){ $('.divClass').equalHeight(); $('#divID').equalHeight(); });Love this, thanks :). Is there a way to make multiple instances of this happen on the same page?
Came up with this:
new Equalizer('.list_coln_equalize1').equalize('height'); new Equalizer('.list_coln_equalize2').equalize('height'); new Equalizer('.list_coln_equalize3').equalize('height');Bravo !! :) love this class , Elegant short and useful !! Bravo :)
Hello,
How can i integrate this in to Joomla 1.7…
I am a newbie…
Thank you :o)
Louise: You have to make sure you load mootools in your header (i think Joomla! does this automatically – just make sure). Than, you can put this piece of code into separate js file in your template folder and load it in your header:
(something like this; js/mooEqualizer.js is the folder/name of this js file)
<script src="templates/template; ?>/js/mooEqualizer.js”>
Than put following code in to the body of your page, where you want to equalize columns (perhaps index.php):
window.addEvent('domready', function() { new Equalizer('.equalize').equalize('height'); });Last thing you have to do is to mark required columns to be equalized – give them class=”equalize”.
Louise: You have to make sure you load mootools in your header (i think Joomla! does this automatically – just make sure). Than, you can put this piece of code into separate js file in your template folder and load it in your header:
(something like this; js/mooEqualizer.js is the folder/name of this js file)
<script src="templates/template; ?>/js/mooEqualizer.js">Than put following code in to the body of your page, where you want to equalize columns (perhaps index.php):
window.addEvent('domready', function() { new Equalizer('.equalize').equalize('height'); });Last thing you have to do is to mark required columns to be equalized – give them class=”equalize”.