Equalizes dimensions of selected elements
Equalizes dimensions of selected elements
HTML
<ul>
<li >aaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaa<br/></li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
CSS
ul
{
overflow:hidden;
}
li {
float: left;
width: 50px;
height: 70px;
border: solid 1px red;
margin-right: 10px;
}
.a {
height: 200px;
}
JavaScript
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();