...

View Full Version : 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>
<!--
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>

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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum