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 Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    CSS Custom Cursors

    Remember the Web 1.0 days where you had to customize your site in every way possible?  You abused the scrollbars in Internet Explorer, of course, but the most popular external service I can remember was CometCursor.  CometCursor let you create and use loads of custom cursors for...

  • By
    Fixing sIFR Printing with CSS and MooTools

    While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix...

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!