Running a script automatically..

BenBox

07-09-2006, 08:43 PM

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!

brandonH

07-09-2006, 10:59 PM

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.

BenBox

07-12-2006, 10:02 AM

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!

<script>

</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>

vwphillips

07-12-2006, 01:35 PM

Dom may be an option

<!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>