views:

151

answers:

2

How to make two with same height with mootools 1.12 when there are images in the second one which doesn't have set attribute "height" in their code?

<div id="box-1"></div>
<div id="box-2">
 <img src="..." />
 <img src="..." />
 <img src="..." />
</div>
+1  A: 
Array.extend({  
    equalize: function(){
        maxHeight = [];

        this.each(function(el){
            maxHeight.push(el.getSize().size.y);
        });

        this.setStyle('height', Math['max'].apply(Math, maxHeight));
    }
});

$$('li').equalize(); // in your case $$('#box-1, #box-2')

Obviously triggered when onLoad not onDomReady.

Example: http://jsfiddle.net/oskar/mE6G3/

Oskar Krawczyk
A: 

Some improvements to Oskars code:

  1. By implementing Elements, the method can only be called on an Element collection (and the getSize and setStyle functions are always available).
  2. Using map() to get all heights.
  3. Returning the collection, so the method can be chained.

So the code becomes:

Elements.implement({
    equalHeight: function(){
        // Get height for all elements
        var heights = this.map(function(el){
            return el.getSize().y;
        });

        // Get maximum height
        var maxHeight = Math.max.apply(Math, heights);

        // Set maximum height to all elements
        return this.setStyle('height', maxHeight);
    }
});

And this could even be written as:

Elements.implement({  
    equalHeight: function(){
        return this.setStyle('height', Math.max.apply(Math, this.map(function(el){
            return el.getSize().y;
        })));
    }
});
Ronald