Rabu, 25 Juli 2012

Element Width Adjuster

Html:
<div id="parent">
     <div id="child" class="columns-3">
     </div>

     <div id="child" class="columns-3 right">
     </div>
     <div id="child" class="columns-3 right">
     </div>
     <div id="child2" class="columns-2">
     </div>
     <div id="child2" class="columns-2 right">
     </div>
</div>

CSS:

#parent {width:900px; height:100px;float:left;}
#child {float:left;height:80px;background:#fdfdfd;}
#child2 {float:left;height:80px;background:#ffaaff;}

JavaScript

// Call the width setter function. commands: column_setter(name of element, name of element to have left margin , margin between element, and number of width set).
column_setter('.columns-3', 'right', 10, 3);
column_setter('.columns-2', 'right', 10, 2);

//6. function set elements width with element_name according to the parent's width;
function column_setter(myEls, myNextEls, marginBetweenElements, numberOfElements) {
var mycolumn = document.id(document.body).getElements(myEls);
var mydown2 = document.id(document.body).getElements(myEls +  myNextEls);
mydown2.setStyle('margin-left',marginBetweenElements);
mycolumn.each(function(element) {
//get Parent div
var myParent = element.getParent('div');
//measure Parent div's width
var parentsize = myParent.getSize();
var parentWidth = parentsize.x;
//measure Parent div's padding
paddingRight = myParent.getStyle('padding-right').toInt();
paddingLeft = myParent.getStyle('padding-left').toInt();
//measure Parent div's border
parentBorderLeft = myParent.getStyle('border-left').toInt();
parentBorderRight = myParent.getStyle('border-right').toInt();
// measure the margin. 3 columns has 2 margin. assume they are 5px each
var mycolumnwidth = (parentWidth - paddingRight - paddingLeft - parentBorderLeft - parentBorderRight - (marginBetweenElements*(numberOfElements-1)))/numberOfElements;
element.setStyle('width',mycolumnwidth);
});
}
//6. set elements width and height width 

Tidak ada komentar: