Equalizes dimensions of selected elements

Equalizes dimensions of selected elements

by Oski Krawczyk

HTML

<ul>
    <li class="large"></li>
    <li></li>
    <li></li>
</ul>

CSS

li {
    float: left;
    width: 50px;
    height: 70px;
    border: solid 1px red;
    margin-right: 10px;
}

.large {
    height: 200px;
}

JavaScript

/*
* Equalizes dimensions of a collection of elements
*
* els.equalize(options);
*
* Options:
*
* - dir: (str) height|width
* - mode: (str) max|min
* - offset: (int) offset
* - raw: (bool) returns only the value
*
*/

Array.implement({  
    equalize: function(options){
        
        options = {
            'dir': options.dir,
            'mode': options.mode,
            'offset': options.offset,
            'raw': options.raw
        };
        
        var dir = $pick(options.dir, 'height');
        var axis = options.dir == 'height' ? 'y' : 'x';
        maxHeight = [];
        
        this.each(function(el){
            maxHeight.push(el.getSize()[axis]);
        });
        
        var dimension = Math[$pick(options.mode, 'max')].apply(Math, maxHeight) + $pick(options.offset, 0);
        
        if (!options.raw){
            this.setStyle(options.dir, dimension);
        }
        
        return dimension;
    }
});

var maxHeight = $$('li').equalize({
    dir: 'height',
    mode: 'max',
    raw: true
});

$$('li').tween('height', maxHeight);