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 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Running a script automatically..

    Hey all,

    I've written a function which toggles columns in a table to be shown/hidden.

    Theres basically 6 columns. When I click on a link to execute the script it toggles between showing the first 5 columns, and the first and last.

    However, when the page intially loads all 6 columns are shown.. which I don't want. So, my question is how can I get the function to automatically execute when the page loads? (without using the body onLoad tag, because that is all defined beforehand..)

    Thanks for any help/directions!

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts

    hiding the columns

    can you provid the exact source of this , it would help in helping you.

    you can try using the style attribute of the elements.

    style="visibility:hidden;"

    or what you originally asked....


    set the call to the function after the </body> tag.

    the script will work becuase once the </body> tag has been loaded into the user browser, the body has been defined along with all elements within in.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey!

    Thanks for the reply! I can see how that visibility thing will work (I got it half working, but not how I wanted it too.. not sure how to go about it)

    This is my code below (with a simplified table so it doesn't take up 300 lines!)

    Initally, all columns are shown.. but I need it so the toggle is activated immediately (hiding the last column) and only showing 1-3..

    Hope this helps,

    Thanks for the help!

    Code:
    <script>
    <!-- 
    var colSwitch = true;
    
    function switchColumns(table_id, firstColSet, secondColSet) {
    	
        if (colSwitch) 	colSwitch = false
        else           	colSwitch = true;
    	
        var style;
    
    	var columnArray = firstColSet.split(',');	
    	for (var i=0; i<columnArray.length; i++) {	
      	 	var tbl  = document.getElementById(table_id);
        	var rows = tbl.getElementsByTagName('tr');
    
        	if (colSwitch) 	style = 'block'
        	else          	style = 'none';
    
        	for (var row=0; row<rows.length; row++) {
          		var cels = rows[row].getElementsByTagName('td')
          		cels[columnArray[i]].style.display=style;
        	}	    	
        }
        
    	var columnArray2 = secondColSet.split(',');	
    	for (var i=0; i<columnArray2.length; i++) {	
      	 	var tbl  = document.getElementById(table_id);
        	var rows = tbl.getElementsByTagName('tr');
    
        	if (colSwitch) 	style = 'none'
        	else          	style = 'block';
    
        	for (var row=0; row<rows.length; row++) {
          		var cels = rows[row].getElementsByTagName('td')
          		cels[columnArray2[i]].style.display=style;
        	}	    	
        }    
        
        
    }
    
    -->
    </script>
    <p><a href="javascript:switchColumns('thisTable', '1,2', '3');">Toggle columns</a></p>
    <table width="100%" border="1" id="thisTable">
      <tr> 
        <td width="50%">Col1</td>
        <td width="25%">Col2</td>
        <td width="25%">Col3</td>
        <td width="50%">Col4</td>
      </tr>
    </table>

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Dom may be an option
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body onload="Init('thisTable');Cols('thisTable');">
    
    <script>
    
    var UseCols='0:3';
    
    
    function Init(id){
     var tbdy=document.getElementById(id);
     var rows=tbdy.getElementsByTagName('TR');
     tbdy.ary=[];
     for (var zxc0=0;zxc0<rows.length;zxc0++){
      tbdy.ary[zxc0]=[];
      var cols=rows[zxc0].getElementsByTagName('TD');
      for (var zxc1=0;zxc1<cols.length;zxc1++){
       tbdy.ary[zxc0].push(cols[zxc1]);
      }
     }
    }
    
    function Cols(id,usec){
     var tbdy=document.getElementById(id);
     var rows=tbdy.getElementsByTagName('TR');
     for (var zxc0=0;zxc0<rows.length;zxc0++){
      for (var zxc1=0;zxc1<tbdy.ary[zxc0].length;zxc1++){
       if (tbdy.ary[zxc0][zxc1].parentNode==rows[zxc0]){ rows[zxc0].removeChild(tbdy.ary[zxc0][zxc1]); }
      }
     }
     for (var zxc2=0;zxc2<rows.length;zxc2++){
      for (var zxc3=0;zxc3<tbdy.ary[zxc2].length;zxc3++){
       if (UseCols.match(zxc3)){
        rows[zxc2].appendChild(tbdy.ary[zxc2][zxc3]);
       }
      }
     }
     UseCols=(UseCols=='0:3')?'1:2':'0:3';
    }
    
    -->
    </script>
    <p><a href="javascript:Cols('thisTable');">Toggle columns</a></p>
    <table width="100%" border="1" >
     <tbody  id="thisTable" >
      <tr>
        <td width="50%">Col1</td>
        <td width="25%">Col2</td>
        <td width="25%">Col3</td>
        <td width="50%">Col4</td>
      </tr>
      <tr>
        <td width="50%">Col1</td>
        <td width="25%">Col2</td>
        <td width="25%">Col3</td>
        <td width="50%">Col4</td>
      </tr>
     </tbody>
    </table>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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