problem with style.display="none" in NN7

A

Andy Fish

Hi,

I have a section of a web page that I want to be able to make appear and
disappear with javascript, with the things below it moving up and down as
appropriate. I'm not using absolute positioning or anthing fancy. I put the
aforementioned section in a div:

<div id="foo">
... optional stuff in here
</div>

when I want to hide it, I do this:

document.getElementById("foo").style.display="none";

and to show it again I do this:

document.getElementById("foo").style.display="inline";

This works fine in IE6 and Opera, but I have a problem with NN7. When the
page comes up it's visible. the first time I hide it, it works fine, then I
show it again and it works, the second time I try to hide it, nothing
happens - the display style gets set to 'none' but the div is still visible
on the page.

if the div contains only text (no tags at all), it works OK every time.

Can anybody throw any light on this or suggest possible workarounds?

Many thanks

Andy
 
K

Klaus Krtschil

Andy said:
Hi,

I have a section of a web page that I want to be able to make appear and
disappear with javascript, with the things below it moving up and down as
appropriate. I'm not using absolute positioning or anthing fancy. I put the
aforementioned section in a div:

<div id="foo">
... optional stuff in here
</div>

when I want to hide it, I do this:

document.getElementById("foo").style.display="none";

and to show it again I do this:

document.getElementById("foo").style.display="inline";

This works fine in IE6 and Opera, but I have a problem with NN7. When the
page comes up it's visible. the first time I hide it, it works fine, then I
show it again and it works, the second time I try to hide it, nothing
happens - the display style gets set to 'none' but the div is still visible
on the page.

if the div contains only text (no tags at all), it works OK every time.

Can anybody throw any light on this or suggest possible workarounds?

Many thanks

Andy

Can you provide a link? That would help a lot.

Klaus
 
A

Andy Fish

here's a complete stand-alone example:

<HTML><head><script language="javascript">
function Button1_onclick()
{document.getElementById("foo").style.display="none";}
function Button2_onclick()
{document.getElementById("foo").style.display="inline";}
</script></head>
<BODY>
<p>this is always visible</p>
<div id="foo"><p>this is sometimes visible</p></div>
<P>
<INPUT id="Button1" type="button" value="Button" name="Button1"
onclick="return Button1_onclick()">
<INPUT id="Button2" type="button" value="Button" name="Button2"
onclick="return Button2_onclick()">
</P>
</BODY>
</HTML>

click on the left button to make the text disappear and the right button to
make it appear. on Netscape 7 it only works once then it stays visible all
the time. other browsers seem to work OK.
 
L

Lee

Andy Fish said:
here's a complete stand-alone example:
[...]
click on the left button to make the text disappear and the right button to
make it appear. on Netscape 7 it only works once then it stays visible all
the time. other browsers seem to work OK.

It works fine for me in Netscape 7.1.
What messages do you see in the JavaScript console?
 
R

Robert E. Boughner

Makes sense since DIV is a block element whereas plain text is an inline
element.

Andy said:
fixed it (I think)

using the darwinian theory of natural selection, I tried making random
changes to the code to see if it would make any difference

turns out that using style.display="block" to make it visible (rather than
"inline" works OK).

Andy
 
A

Andy Fish

I have netscape 7.01 - nothing was coming out on the JS console

so maybe it was a bug and my fix was infact a workaround.

Lee said:
Andy Fish said:
here's a complete stand-alone example:
[...]
click on the left button to make the text disappear and the right button to
make it appear. on Netscape 7 it only works once then it stays visible all
the time. other browsers seem to work OK.

It works fine for me in Netscape 7.1.
What messages do you see in the JavaScript console?
 
K

Klaus Krtschil

Andy said:
fixed it (I think)

using the darwinian theory of natural selection, I tried making random
changes to the code to see if it would make any difference

turns out that using style.display="block" to make it visible (rather than
"inline" works OK).

Andy


here's a complete stand-alone example:

<HTML><head><script language="javascript">
function Button1_onclick()
{document.getElementById("foo").style.display="none";}
function Button2_onclick()
{document.getElementById("foo").style.display="inline";}
</script></head>
<BODY>
<p>this is always visible</p>
<div id="foo"><p>this is sometimes visible</p></div>
<P>
<INPUT id="Button1" type="button" value="Button" name="Button1"
onclick="return Button1_onclick()">
<INPUT id="Button2" type="button" value="Button" name="Button2"
onclick="return Button2_onclick()">
</P>
</BODY>
</HTML>

click on the left button to make the text disappear and the right button
to

make it appear. on Netscape 7 it only works once then it stays visible all
the time. other browsers seem to work OK.
Both variants (block/inline) work with Moz 1.4 (Linux)

Klaus
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top