PDA

Click to See Complete Forum and Search --> : Hiding tables in Netscape

krahb
12-19-2002, 03:22 PM
Hi all:
I have three radio buttons on my form. I also have three tables defined in my form which are invisible (style="display:none" ). I want to display only one of the tables and hide the other two based on the user radio button selection. I have got this to work with IE using the document.all object. But, this object is supported only by IE and not by Netscape. Does anybody know how to work this for Netscape.

Thanks in Advance,
Krahb
gil davis
12-19-2002, 03:39 PM
That depends on the version of Netscape you are asking about. If it is 4.x, forget it.

If it is NS 6 or better, use

document.getElementById(whatever you use after 'all' in IE, in quotes).style.display = whatever;
Nedals
12-19-2002, 07:46 PM
Actually you can make it work for NS 4xx

Here's a short example.
You do need to set the 'absolute position' of the tables. NS has trouble with position:relative

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="javascript">
<!--
NS4 = (document.layers) ? true : false;
function hide() {
if (NS4) document.thetable.visibility='hide' // 'show' will make the table visible
}
window.onload = hide;
//-->
</script>
</head>

<body bgcolor="#ffffff" topmargin=0 marginheight=0 leftmargin=0 marginwidth=0>
<div id="thetable" style="position:absolute; top:100; left:100">
<table border=1>
<tr><td>Contents</td></tr>
</table>
</div>
</body>
</html>

This MAY also work for NS6 and NS7 but I'm not sure!
To make it work for IE use

document.all.thetable.style.visibility = 'hidden' //'visible' to show

Hope this helps....
swon
12-19-2002, 07:58 PM
NS4 = (document.layers) ? true : false;
IE4 = (document.all && !document.getElementById) ? true : false;
NS6 = (!document.all && document.getElementById) ? true : false; // for Ns6 or better and IE >5


function hide() {
if (NS4){ document.["thetable"].visibility="hide";}
if(IE4){document.all["thetable].style.visibility = "hidden";}
if(NS6){document.getElementById("thetable").style.visibility="hidden";}
}


for IE 4,5,6 NS 4,6,7

'thetable' should be an div tag including your table
(<div id="thetable"><table><tr><td></td></tr></table></div>
gil davis
12-19-2002, 08:03 PM
Originally posted by nedals
Actually you can make it work for NS 4xx
Not as requested. The style "display: none" collapses the table, and the rest of the page reflows. Netscape 4.x will not do that. In fact, all it would do is what your example does - makes the table invisible. Of course if he doesn't mind the gaping hole your method would create in the page, then great!
Nedals
12-20-2002, 01:39 AM
Gil....
Based on the question, it would appear that one of the tables is always visible, so this method should work.

swon's response shows the additional coding for full cross-browser operation but, and I may be mistaken, you will need to add the....
style="position:absolute,etc...."
in the table tag for this to work with NS4.
swon
12-20-2002, 03:18 AM
That's true, nedals, I've forgotten!
krahb
12-20-2002, 01:27 PM
for IE 4,5,6 NS 4,6,7

'thetable' should be an div tag including your table
(<div id="thetable"><table><tr><td></td></tr></table></div>

======
This works as intended. Thanks!!