...

View Full Version : Columns and rows



Blatch
05-12-2009, 10:56 PM
How would I go about writing a script to modify


<div id="container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>

And output into (let's say) 3 columns, 2 rows.

ABC
DEF

TinyScript
05-12-2009, 11:45 PM
that should work below; Didn't test IE


<script>
function makeDiv3by2(){
var add=30;var grab=document.getElementsByTagName('div');for(i=0; i<grab.length;i++){if(i>2){add=60}grab[i].style.position="absolute";grab[i].style.top=add+"px";grab[i].style.left=(i%3)*50+"px"};
}
</script>
<body onload="makeDiv3by2()">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>



and slightly better


<script>
function makeDiv3by2(){
var add=30;var grab=document.getElementsByTagName('div');for(i=0; i<grab.length;i++){if(i>2){add=60} with(grab[i].style) {position="absolute";top=add+"px";left=(i%3)*50+"px"}};
}
</script>
<body onload="makeDiv3by2()">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>

TinyScript
05-13-2009, 12:07 AM
You moved the goalposts!! LOL


<script>
function makeDiv3by2(){ /*begin__makeDiv3by2____________*/

/*this function builds a 3 col by 2 row layout with divs in a container div which is first positioned*/

var addtop=0;/*position is inside container. Reltaive settings will be with repect to siblings*/

var move3by2Container=document.getElementById('Div3by2_Container');

move3by2Container.style.position="absolute";
move3by2Container.style.top="200px";

var grab=document.getElementsByTagName('div');

for(i=1; i<grab.length;i++){

if(i>3) { addtop=30 } /*set vertical offset based on array position
container is array[0] this example we
switch at position 4, array[3]*/


with (grab[i].style) {

position="absolute";

top=addtop+"px";

left=(i%3)*50+"px"
}/*end with style*/

}/*end for loop*/
} /*end__makeDiv3by2____________*/
</script>
<body onload="makeDiv3by2()">

<div id="Div3by2_Container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum