PDA

View Full Version : Disappearing tables

mighty_muke
03-12-2002, 04:57 PM
Hi,

Does anyone know why the table in this page disappears in IE5?


<html>
<head>

<style type="text/css">
.collapse { position: absolute; visibility: hidden; }
.expand { position: relative; visibility: visible; }
</style>

<script type="text/javascript" language="javascript">

var tableToggle = true;

function toggletable() {
var temp = document.getElementById('thistable');
if (tableToggle) {
tableToggle = false;
temp.style.position = 'absolute';
temp.style.visibility = 'hidden';
} else {
tableToggle = true;
temp.style.position = 'relative';
temp.style.visibility = 'visible';
}
}

</script>

</head>
<body>

<table bgcolor="#FFCC99" width="600" cellspacing=0 border=0>
<tr>
<td>
<p><a href="javascript:toggletable();">toggle a table visible/invisible</a>
</td>
</tr>
</table>
<div id="thistable" class="expand">
<table bgcolor="#FFFFCC" width="300" cellspacing=0 border=0>
<tr>
<td>
<b>Toggle Table:</b><br> Here is the content of a table which hides and shows.
</td>
</tr>
</table>
</div>
<table bgcolor="#FFCC99" width="600" cellspacing=0 border=0>
<tr>
<td>
<p>Filler
</td>
</tr>
</table>

</body>
</html>


Thanks,
MM.
scoutt
03-12-2002, 09:37 PM
I wonder why when you have this in it

<td>
<p><a href="java script:toggletable();">toggle a table visible/invisible</a>
</td>
mighty_muke
03-12-2002, 09:44 PM
hehehe

Run the page.

First it's there.
Click the link, then it's gone.
Click the link again, and it should be there, there's room for it, but it aint there.

Any ideas why not, or how to get it back?
Thanks,
MM.
scoutt
03-12-2002, 10:29 PM
I know I was being silly. all I can say is that when you make the table visible again it doesn't seem to write anything. that is my best as i don't understand this java stuff either. maybe Jon can help when he stops in.
Goldilocks
03-13-2002, 04:34 PM
I moved this to Client-Side Scripting in the hope that you get some more help in here. ;)
Jon Hanlon
03-13-2002, 05:25 PM
Dump the lines:
temp.style.position = 'absolute';
and:
temp.style.position = 'relative';

If you don't want space reserved for the table, use

<script type="text/javascript" language="javascript">

function toggletable() {
var temp = (document.all) ? document.all.thistable : document.getElementById('thistable');
if (temp.style.visibility != 'hidden') {
temp.style.visibility = 'hidden';
temp.style.display = 'none';
} else {
temp.style.visibility = 'visible';
temp.style.display = 'block';
}
}

</script>
mighty_muke
03-13-2002, 06:13 PM
That worked great!
Thanks a lot.
MM.