Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2003
    Location
    USA
    Posts
    99
    Thanks
    24
    Thanked 0 Times in 0 Posts

    Columns and rows

    How would I go about writing a script to modify

    Code:
    <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
    Last edited by Blatch; 05-12-2009 at 10:10 PM.

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    that should work below; Didn't test IE
    Code:
    <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
    Code:
    <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>
    Last edited by TinyScript; 05-12-2009 at 10:53 PM.

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    You moved the goalposts!! LOL
    Code:
    <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>
    Last edited by TinyScript; 05-12-2009 at 11:29 PM.

  • Users who have thanked TinyScript for this post:

    Blatch (05-12-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •