MooTools Equal Heights Plugin: Equalizer

By  on  

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.

Recent Features

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

Discussion

  1. 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!

  2. Arian

    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;
        }
    });
  3. Florian

    line 15:

    element.setStyle(prop,max - (element[offset] - element.getStyle(hw).toInt())); 
    

    …less code :) mootools ftw

  4. Here’s the approach you suggested arian…
    http://www.jsfiddle.net/sixtyseconds/U8EfF/

  5. …and the Forge plugin: http://bit.ly/ds7tXB

  6. Alex

    Chris and David, David and Chris, you both saved me some time. Thanks! :D

  7. @Florian, @Chris the Developer: Nice work!

  8. A compliment from Mr Walsh! I feel so important now :D

  9. zoop

    @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

  10. @Chris the Developer: As you should!

    I’ve added my plugin to the Forge: http://mootools.net/plugins/p/equalizer

  11. bruce

    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.

  12. Can someone help with a jQuery version of this?

    • 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.

  13. 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();
    	});
    
  14. 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');
      
  15. Itamar

    Bravo !! :) love this class , Elegant short and useful !! Bravo :)

  16. Hello,

    How can i integrate this in to Joomla 1.7…

    I am a newbie…

    Thank you :o)

    • IRQ

      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”.

    • IRQ

      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”.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!