MooTools Equal Heights Plugin: Equalizer

Discussion

1. Daniel15

   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. Chris the Developer

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

   …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. David Walsh

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

   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. David Walsh

    @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. Vikram

    Can someone help with a jQuery version of this?
• Eystein

  There’s a jQuery version here: http://www.cssnewbie.com/equalheights-jquery-plugin/
• Vikram

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

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

    Love this, thanks :). Is there a way to make multiple instances of this happen on the same page?
• Patis

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

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