115829 - Hiding elements with JavaScript doesn't work

Status: RESOLVED WORKSFORME

(Core :: DOM: HTML Parser, defect)

Description

[tapio.markula]

Mozilla 0.9 

I had an error in 
http://www.nic.fi/~tapio1/Tests/LinkingModel4.html (scripts created nested comments)

I took of all nested comments and I put
<script language="JavaScript" type="text/javascript">
<!--
if(navigator.appName.indexOf("Netscape")!=-1 &&
navigator.appVersion.indexOf("5.")==0) {document.write('\<!--')}
//-->
</script>
...
<script language="JavaScript" type="text/javascript">
<!--
if(navigator.appName.indexOf("Netscape")!=-1 &&
navigator.appVersion.indexOf("5.")==0) {document.write('\<!--')}
//-->
</script>

I tested with Opera 5.12 identify as Mozilla 5.0 - Opera put the code inside comments, when it was defined to behave as new Netscape/Mozilla (I took off
'a[class="subMenu"] {display:none !important}').
No error messages!
I teste also ("5.")<=0 - worked fine with Opera.
("5.")<=0 and ("5.")==0 caused unterminated comments => messy result.

When I chande 'identify as MS IE 5.0' Opera showed link images - it didn't create comments! Comparative tests with Opera 5.12 shows, that Mozilla 0.9 buggy.

It seems just to be impossible to hide from new Netscape/Mozilla something, which don't work in it. Neither display:none nor JavaScript doesn't work.
I just failed to create dynamic sub-menus only by using CSS2.
Mozilla 0.9 could take off the code 

All my trials just failed:

http://www.nic.fi/~tapio1/Tests/Alivalikko.html
http://www.nic.fi/~tapio1/Tests/Alivalikko2.html
http://www.nic.fi/~tapio1/Tests/LinkingModel.html
http://www.nic.fi/~tapio1/Tests/LinkingModel2.html
http://www.nic.fi/~tapio1/Tests/LinkingModel3.html
http://www.nic.fi/~tapio1/Tests/LinkingModel4.html

NOTE. ALL necessary CSS is embedded to the documents.

I tested with Netscape 4.04. Of cource the presentation is bad, BUT
All, what I wanted was inside comments.

NOTE 2. The examples handle also CSS2 problems!

Comment 1

[tapio.markula]

Mozilla 0.9 

I had an error in 
http://www.nic.fi/~tapio1/Tests/LinkingModel4.html (scripts created nested comments)

I took off all nested comments and I put

<script language="JavaScript" type="text/javascript">
<!--
if(navigator.appName.indexOf("Netscape")!=-1 &&
navigator.appVersion.indexOf("5.")==0) {document.write('\<!--')}
//-->
</script>
...
<script language="JavaScript" type="text/javascript">
<!--
if(navigator.appName.indexOf("Netscape")!=-1 &&
navigator.appVersion.indexOf("5.")==0) {document.write('\<!--')}
//-->
</script>

I tested with Opera 5.12 identify as Mozilla 5.0 - Opera didn't show the code, which was between scripts, when it was defined to behave as new Netscape/Mozilla (I took off 'a[class="subMenu"] {display:none !important}' to see, that really JavaScript caused the desired effect).

No error messages!

I teste also with ("5.")<=0 - worked fine with Opera, but bad in Mozilla
("5.")<=0 and ("5.")==0  - worked fine with Opera. 
BOTH  caused unterminated comments => messy result.

When I chande 'identify as MS IE 5.0' in Opera, Opera showed link arrows - it didn't create comments! Comparative tests with Opera 5.12 shows, that Mozilla 0.9 is buggy.

It seems just to be impossible to hide from new Netscape/Mozilla something, which don't work in it. Neither display:none nor JavaScript doesn't work.
I just failed to create dynamic sub-menus only by using CSS2.

All my trials to create dynamic sub-menus failed:

http://www.nic.fi/~tapio1/Tests/Alivalikko.html
http://www.nic.fi/~tapio1/Tests/Alivalikko2.html
http://www.nic.fi/~tapio1/Tests/LinkingModel.html
http://www.nic.fi/~tapio1/Tests/LinkingModel2.html
http://www.nic.fi/~tapio1/Tests/LinkingModel3.html
http://www.nic.fi/~tapio1/Tests/LinkingModel4.html

NOTE. ALL necessary CSS is embedded to the documents.

I tested with Netscape 4.04. Of cource the presentation is bad, BUT
All, what I wanted Netscape 4.04 didn't render!

NOTE 2. The examples handle also CSS2 problems! Both CSS and JavaScript systems failed.

I just wanted to create EXTREMELY simple system to create dynamic sub-menus - but all work ONLY in MS IE for Windows!

Comment 2

[[not reading bugmail]]

did it ever occur to you that your version # cannot be '5.'  try taking out the
period.

Comment 3

[Phil Schwartau]

Using Mozilla trunk binary 20011213xx on WinNT
I'm not seeing the problem on this reduced testcase:

<body><form>

<script>
<!--
if (navigator.appName.indexOf("Netscape")!=-1 && 
navigator.appVersion.indexOf("5.")==0){document.write('\<!--'); }
//-->
</script>

<input type ="button" value="You shouldn't be able to see this button">

<script>
<!-- 
if (navigator.appName.indexOf("Netscape")!=-1 && 
navigator.appVersion.indexOf("5.")==0) {document.write('--\>'); }
//-->
</script>

</form></body>



As expected, we don't see the button in Mozilla, but we do see it
in NN4.x and IE. I will attach this reduced testcase below - 

Comment 4

[Phil Schwartau]

Attachment: Reduced testcase

Comment 5

[Phil Schwartau]

Trying the reduced testcase in various browsers, I don't see the button 
in Mozilla, but I do see it in NN4.7 and IE6. Using Mozilla trunk binaries
20011213xx on WinNT, Linux, and Mac9.1.

This shows that the basic idea of [e-mail] is correct:
Hiding elements with JavaScript CAN work. Tempted to mark WORKSFORME.
At any rate, this is not a JavaScript Engine bug; reassigning to
Parser component until we can get further information.

[e-mail]: does the reduced testcase work for you?
Is there any difference in the way I have written the reduced testcase
from what you have written? You have filed this bug under OS = "other".
What OS are you using? What build date of Mozilla are you using?

Comment 6

[tapio.markula]

[e-mail]:

>Could you test with a recent version and not the ancient 0.9?

I have not updated. BUT according to one of your answers, 
the :focus CSS-problem still exists. 

>Are the links _always_ showing? Or are they hidden at first, then show when 
they are supposed to, then never hide again?

The initial purpose was to show links for Mozilla in the state :focus (and as a test purpose also with
other dynamic pseudo-classes), BUT because it didn't work I tried to hide all sub-menus from Netscape/Mozilla.
The origininal idea can be show in 
http://www.nic.fi/~tapio1/Tests/Alivalikko2.html (IFRAME + CSS2 dynamic pseudo-classes
created dynamic sub-menus)

I tried to ge :focus to work also in http://www.nic.fi/~tapio1/Tests/LinkingModel2.html

a.subMenu span {display:none}
...
a.subMenu:focus span {display:block; background-color:transparent; width:114px; height:150; padding:0; position:absolute; top:15px; left:2px; z-index:7; border: 1px solid black} 
#PresentationsSite a.subMenu:focus span {height:18px} 
#PresentationsSite a.subMenu:focus iframe {width:485px; height:18px} 
...

Linking models 3-4 use just link set inside SPAN elements (maybe MORE
against conventional usage of HTML-elements)..

http://www.nic.fi/~tapio1/Tests/LinkingModel4.html was the FINAL trial
to try to hide sub-menus from Netscape.
						        
>I should note that <a> is an inline element, and making a child of it a 
block-level element leads to a bogus box model in HTML.

I don't care it at all, if it just work! CSS allows to change the default behavior (if elements are according to DTD correct, they are easy to check even if elements itself are used as if other elements). Dynamic changes by using dynamic pseudo-classes needs changing the default HTML-behavior. Dynamic
pseudo-class can - at least in theory - to do them same as some JavaScript/ECMAScript.
My system can in principle replace DHTML-scripts. It is EXTRELY SIMPLE to write!
MINIMUM CSS could be for example following:

a.subMenu span {display:none}
a.subMenu:active span, a.subMenu:focus span {display:block; width:114px; height:150; position:absolute; top:15px; left:2px; z-index:7}  /* by using position:absolute can avoid reflow of the document - secure for the stablility of the browser; ':active' is for MS IE - ':focus' should work with Netscape/Mozilla */
...
<a href="#" class="subMenu"><img ...  class="subMenuArrow"/><span>...</span></a>
OR corresponding for A + IFRAME.
a.subMenu iframe.subMenuIframe {display:none}
/*may be needed : a.subMenu {display:block}*/
a.subMenu:active iframe.subMenuIframe, a.subMenu:focus iframe.subMenuIframe {display:block; width:114px; height:150; position:absolute; top:15px; left:2px; z-index:7} /* class names are as informative as possible */

<a href="#" class="subMenu"><img ... class="subMenuArrow"/><iframe class="subMenuIframe"...>...</iframe></a>

HOW much DHTML you would nee to replace this simple CSS + HTML element system?  CSS is simple - the system is quite easy even for low skill authors. DOM-based DHTML is complex and needs terrible much skills.
WHY should authors use complex DHTML? At least Netscape/Mozilla force to use it (my system doesn't work neither in Opera) - designers of MS IE for Windows NOT!


[e-mail]:

>did it ever occur to you that your version # cannot be '5.'  try taking out the
period.
												   
This is NOT the problem. I got following comment from:

[e-mail]

Using Mozilla trunk binary 20011213xx on WinNT
I'm not seeing the problem on this reduced testcase:

<body><form>
<script>
<!--
if (navigator.appName.indexOf("Netscape")!=-1 && 
navigator.appVersion.indexOf("5.")==0){document.write('\<!--'); }
//-->
</script>
<input type ="button" value="You shouldn't be able to see this button">
<script>
<!-- 
if (navigator.appName.indexOf("Netscape")!=-1 && 
navigator.appVersion.indexOf("5.")==0) {document.write('--\>'); }
//-->
</script>
</form></body>
>As expected, we don't see the button in Mozilla, but we do see it
in NN4.x and IE.

>At any rate, this is not a JavaScript Engine bug; reassigning to
>Parser component until we can get further information.
>[e-mail]: does the reduced testcase work for you?

It WORKED as you expected! I tested also with '("6.")<=0' - worked.

from what you have written? You have filed this bug under OS = "other".
>What OS are you using?
Windows 95  - I forget to tell it.

 >What build date of Mozilla are you using?
some from 5/2001.
									        
THAT just didn't work in the page http://www.nic.fi/~tapio1/Tests/LinkingModel4.html

I could use the system 
http://www.nic.fi/~tapio1/Tests/LinkingModel2.html

I try in this case pass MS IE 5.0 for MAC with JavaScript (passing with CSS didn't work according to an e-mail, which I got). Mozilla can in this case hide elements with display:none. 
I just don't know just now, if hiding element with JavaScript works with MS IE 5.0 for Mac 
Following code is intended for MS IE for Mac:
if (navigator.appName.indexOf("Mac")!=-1 &&
navigator.appName.indexOf("IE")!=-1 &&
navigator.appVersion.indexOf("5.")<=0)
{document.write('\<!--'); }.

The strange matter is, that in LinkingModel4.html neither display:none (
a[class="subMenu"] {display:none !important} /*this should hide the sub-menus*/) nor 
Javascript ({document.write('\<!--')} and the pair of it) don't work

Comment 7

[Phil Schwartau]

>> [e-mail]: does the reduced testcase work for you?

>  It WORKED as you expected! I tested also with '("6.")<=0' - worked.

The bug you have reported is "Hiding elements with JavaScript doesn't work".
So if the reduced testcase works for you, we should mark this bug as
WORKSFORME, right? If you agree, please mark this as WORKSFORME (see above).

If you disagree, please attach a reduced testcase to this bug via the
"Create a New Attachment" link above. It should be much smaller than the
links you are providing: just the minimum amount to show the bug !!!

Also, please test with a current build - yours is too old to consider now.
Thanks - 

Comment 8

[Boris Zbarsky [:bzbarsky]]

> I don't care it at all, if it just work!

Ah.  The point is it need not work and expecting the browser to make it work is 
unreasonable.  Any container containing a block-level element should itself be 
block-level in HTML.

Comment 9

[tapio.markula]

I found something, what goes wrong.

I made two additional tests:
http://www.nic.fi/~tapio1/Tests/LinkingModel2c.html

I hade FOUR times skipping. Skipping works TWICE, but Mozilla can't create the termination in THIRD and FOURT JavaScript skippings!!!

http://www.nic.fi/~tapio1/Tests/LinkingModel2d.html

I put ONE skipping for Netscape (anf four for MS IE 5.0 for Mac). Works better, but weird. Mozilla doesn't skipt the WHOLE block, but just sub-menus! Almost desired result, BUT with EXTREMELY WEIRD WAY!!!

Indeed Mozilla renders ONE unterminated comment tags even if the script was for MS IE for MAC! Weird again.

RESULT: Mozilla can't handle many scripts in the same page! 2-3 is ok, but it can't hande more!

I don't understand at all the weird behavior of Netscape/Mozilla, but IF the I can skip IE browsers
I can get my sub-menus to work!

The only possibility is to create 	TWO versions of sub-menus. One for buggy MS IE 5.0 for Mac & all versions of Netspace.

http://www.nic.fi/~tapio1/Tests/LinkingModel2e.html

<script language="JavaScript" type="text/javascript">
<!--
if ((navigator.appName.indexOf("Mac")!=-1 &&
navigator.appName.indexOf("IE")!=-1 &&
navigator.appVersion.indexOf("5.")<=0)|
(navigator.appName.indexOf("Netscape")!=-1 &&
navigator.appVersion.indexOf("6.")<=0))
{document.write('\<!--'); }
//-->
</script>

AND one for MS IE for Windows:

<script language="JavaScript" type="text/javascript">
<!--
if (navigator.appName.indexOf("Windows")!=-1 &&
navigator.appName.indexOf("IE")!=-1 &&
navigator.appVersion.indexOf("6.")<=0)
{document.write('\<!--'); }
//-->
</script>

Then all browsers should render nice, BUT the sub-menus work only in MS IE for Windows browsers.
This failed too.
The JavaScript for MS IE for Windows doesn't work. MS IE for Windows renders TWO site menus!

I tested it also with Opera 5.12 'identify as MS IE 5.0' and it worked! 'identify as Mozilla 5.0' created also just one menu.

UGH!

Comment 10

[tapio.markula]

>Additional Comments From [e-mail]

>Ah.  The point is it need not work and expecting the browser to make it work is 
unreasonable.  Any container containing a block-level element should itself be 
block-level in HTML.

In order to make dynamic changes, which don't cause reflow (= need to render the page another time(s)), there only TWO alternative
a) change the display-type + position:absolute/fixed
b) change dimensions  + position:absolute/fixed

BOTH needs block OR at least inline-block display-type (dimensions can be set only
for block or semi-block (display-type 'inline-block' elements). CSS2 doesn't have
the display-type 'inline-block' to handle proper semi-block elements like IMG, OBJECT and IFRAME.

NOTE, that IMG, OBJECT and IFRAME DON'T have the display type
'inline' but instead 'inline-block'. <a...><img> is combination of real
inline level + semi-block level element. Using real block level elements
inside A doesn't essential differ using semi-blocks inside the element 'A'.
IF the browser can handle semi-blocks inside the element 'A', it can handle
also full blocks! IF you set float:left to elements, which have display-types 
'block' and 'inline-block', the behave EQUAL. The display-type 'inline-block' is CLOSER
'block' than 'inline'!

I'm aware, that in theory the proper definition should be:

a.subMenu:focus span {display:inline-block;...} 

CSS2 has some serious holes (missing of important features), which I handle
in http://www.nic.fi/~tapio1/Teaching/Specification.php3

Indeed Mozilla implements with :hover dynamic menus, but they are just not acessible.

[e-mail]  2001-12-18 14:12 ----

>The bug you have reported is "Hiding elements with JavaScript doesn't work".
So if the reduced testcase works for you, we should mark this bug as
WORKSFORME, right? If you agree, please mark this as WORKSFORME (see above).

>If you disagree, please attach a reduced testcase to this bug via the
"Create a New Attachment" link above. It should be much smaller than the
links you are providing: just the minimum amount to show the bug !!!

I made and I have informed about them: 
http://www.nic.fi/~tapio1/Tests/LinkingModel2c.html

I hade FOUR times skipping. Skipping works TWICE, but Mozilla can't create the termination in THIRD and FOURT JavaScript skippings!!!

http://www.nic.fi/~tapio1/Tests/LinkingModel2d.html

I put ONE skipping for Netscape (anf four for MS IE 5.0 for Mac). Works better, but weird. Mozilla doesn't skipt the WHOLE block, but just sub-menus!
Indeed Mozilla renders ONE unterminated comment tags even if the script was for MS IE for MAC!

RESULT: Mozilla can't handle many scripts in the same page! 2-3 is ok, but it can't hande more!


>Also, please test with a current build - yours is too old to consider now.

IF the bug is also in NEWEST, it is not too old!

Comment 11

[tapio.markula]

Somone was right - Mozilla doesn't tolerate an element, which has defined as a block 
inside inline element. I changed this:

a.subMenu:focus {display:block}
a.subMenu:focus span {display:block; background-color:transparent; width:485px; padding:0; position:fixed; top:68px; left:1px; z-index:15; border-width:0}
a.subMenu:focus iframe {display:block; border: 1px solid black; width:485px}

NOW the parent of the IFRAME is also a block. :focus works, BUT Mozilla chashed immediately,
when I tried to scroll the document!

The smaller bug was the fact, that the link images (<a href="#" class="subMenu"><img src="../Light_Table/grayab.gif"...), which open sub-menus don't work normally!
I must put MARGIN to those images. Clicking the LEFT MARGIN i got the effect, but clicking the
image itself didn't work!

See http://www.nic.fi/~tapio1/Tests/LinkingModel2h.html

In PRINCIPLE it is possible to create IFRAME + the dynamic pseudo class :focus dynamic sub-menus (:hover works too, but it useless - and it is impossible to test :active because it can't in practise work because it is just the cliking time)
However IN PRACTISE they can't be used, because there is much Mozilla browsers, which could crash giving
them dynamic menus created by dynamic pseudo-classes.

even if my build is old (5/2001) I'm afraid that Netscape 6.1 could crash using my menus.
IF Netscape/Mozilla would not crash I could have use it in my CSS-site. THEN Mozilla could get
the highest estimation concerning rendering of my CSS-site.

Comment 12

[[not reading bugmail]]

I thought that for sure should fix the reporters problem.  I've not tryed this
code my self to see if it worked.