Сделайте два <div>одинаковой высоты с mootools 1.12

Question

Как сделать два одинаковых по высоте с помощью mootools 1.12, если во втором есть изображения, для которых в коде не установлен атрибут "height"?

<div id="box-1"></div>
<div id="box-2">
 <img src="..." />
 <img src="..." />
 <img src="..." />
</div>

Answer 1

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')

Очевидно срабатывает, когда onLoad не onDomReady.

Пример: http://jsfiddle.net/oskar/mE6G3/

Answer 2

Некоторые улучшения в коде Оскара:

1. Реализация Elements позволяет вызывать метод только для коллекции Element (а функции getSize и setStyle всегда доступны).
2. Использование map() для получения всех высот.
3. Возвращает коллекцию, чтобы метод можно было связать.

Таким образом, код становится:

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);
    }
});

И это можно записать так:

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