JAVASCRIPTS:
// We add the "equalize" and "setRandom" methods to Elements
Elements.implement({
equalize: function(property){
var sum = 0, i, len;
len = i = this.length;
while (i--) sum += this[i].getDimensions()[property];
var average = Math.round(sum / len);
i = len;
while (i--) this.tween(property, average);
return this;
},
setRandom: function(property, min, max){
var i = this.length, value;
while (i--){
value = Math.round(min + (max - min) * Math.random());
this[i].tween(property, value);
}
return this;
}
});
window.addEvent('domready', function(){
var els = $$('div.element'), i = false;
$('link').addEvent('click', function(event){
event.stop();
i = !i
if (i) els.equalize('height');
else els.setRandom('height', 30, 150);
});
});
HTML:
<p><a id="link" href="#">Execute Example</a></p>
<div id="elements">
<div class="element"></div>
<div class="element"></div>
<div class="element otherElement"></div>
<div class="element otherElement"></div>
</div>
<h3>Code:</h3>
<pre>Elements.implement({
equalize: function(property){
var sum = 0, i, len;
len = i = this.length;
while (i--) sum += this[i].getDimensions()[property];
var average = Math.round(sum / len);
i = len;
while (i--) this.tween(property, average);
return this;
},
setRandom: function(property, min, max){
var i = this.length, value;
while (i--){
value = Math.round(min + (max - min) * Math.random());
this[i].tween(property, value);
}
return this;
}
});</pre>
<h3>Usage:</h3>
<pre>myElements.equalize(property);
myElements.setRandom(property, min, max);</pre>
CSS:
#elements {
overflow: hidden;
}
div.element {
width: 100px;
height: 50px;
border: 1px solid black;
background-color: #f9f9f9;
float: left;
margin: 5px;
}
div.otherElement {
height: 20px;
}
pre {
padding: 5px 7px;
margin: 5px 0;
background: #f5f5f5;
border: 1px solid #ddd;
color: #333;
overflow: auto;
font-size: 12px;
}