Span tags not working Netscape

apd8x · October 15th, 2003, 09:42 AM

I am having problems with my the span tag display property. I am using the span tag to show or hide text in a form.
If <span id="name" STYLE="display:none"> then no text shows. If
<span id="name" STYLE="display: "> then the text shows.

This works fine in IE but in Netscape all my hidden text is showing. It seems that Netscape doesn't like the "display:none" style of the span tag. My JS function changes the display of the span tag based on the click of another field:

function ShowSpan()
{
if (document.studreg.service[0].checked)
name.style.display='';
else
name.style.display='none';
}

This JS function does not work in Netscape but works fine in IE. Can you help please?

planoie · October 15th, 2003, 09:54 AM

I haven't played much with the netscape DOM, but it might be a problem referencing the actual object.

In your function that changes the style, try:
    alert(name);
and see if you get [object] or something like that in the alert box. If not, and you get undefined or null, then you'll know that it's a problem referencing the span object in the document.

You can try this to reference the object:
    document.getElementById('name').style.display='';
I beleive that is the syntax that works for both I.E. and Netscape. Again, to debug you can try:
    alert(document.getElementById('name'));
to see if you get the object correctly.

Peter

apd8x · October 15th, 2003, 10:10 AM

I put document.getElementById('name').style.display=''; and that did the trick! It works in NS now.
Thanks Peter.

Anne

joefawcett · October 15th, 2003, 10:11 AM

Try this, referencing elements by id is an IE only shortcut (Tested on Netscape 7.1):

Code:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Spans</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
  function hideShow()
  {
    var spn1 = document.getElementById("spnShow"); 
    var spn2 = document.getElementById("spnHide");
    if (spn1.style.display == "inline")
    {
      spn1.style.display = "none";
      spn2.style.display = "inline";    
    }
    else
    {
      spn1.style.display = "inline";
      spn2.style.display = "none";    
    }

  }  
</script>
</head>

<body bgcolor="#FFFFFF">
<input type="button" value="Hide/Show" onclick="hideShow();">
<span id="spnShow" style="display: inline">I should be visible</span>
<span id="spnHide" style="display: none">I should not be visible</span>
</body>
</html>

--

Joe

allon · January 27th, 2005, 06:11 AM

Hi,

Based on the same idea, how would you make an entire TR toggle its display when some text above the table is clicked? The TR should initially not appear when the page is first loaded. Should be compatible with Netscape. To make it just a bit more complicated, when the page loads, the text should read "view" and when the TR is visible, the same text should read "hide" (toggle). Thanks!