Show/Hide layer in Netscape/IE problem

[Mark]

Hi - I have a function which shows/hides a <div> on my page - this
appears to oinly work in IE, but I also need it to work in Netscape 7.1.

My function is in my head:

function openIt(faq) {
showIt = document.all(faq);
if (showIt.style.display == "none") {
showIt.style.display = ""
} else {
showIt.style.display = "none"
}
}

...and the onclick code is:

<a href="#" onclick="JavascriptpenIt('22list'); return false;">click
here to toggle</a>

<div id="22list" style="display:none">
This will show/hide when you click the above link
</div>


Could anyone help amend the function to run in both IE and Netscape?

Thanks for any help,

 

[David Dorward]

Hi - I have a function which shows/hides a <div> on my page - this
appears to oinly work in IE, but I also need it to work in Netscape 7.1.

I didn't even need to look at the rest of the code to see what was wrong.
I'm sure a search in google groups would have found the answer, it seems to
come up several times a week around here.

<a href="#" onclick="JavascriptpenIt('22list'); return false;">click
here to toggle</a>

(1) The "Javascript:" in the onclickj event is redundent.
(2) href='#' is nasty. If you can't put a useful URL in there, don't use a
link

<div id="22list" style="display:none">

OK, I was wrong. I didn't guess what was wrong. Not everything at least. You
have two problems. The solution to the first is above, the other is that
ids may NOT begin with a number.

<http://validator.w3.org/>

 

[Fabian]

Mark hu kiteb:

Hi - I have a function which shows/hides a <div> on my page - this
appears to oinly work in IE, but I also need it to work in Netscape
7.1.

My function is in my head:

function openIt(faq) {
showIt = document.all(faq);
if (showIt.style.display == "none") {
showIt.style.display = ""

Change the above line to one of:

showIt.style.display = "inline";
showIt.style.display = "block";

And then be aware of the difference between them, and use them
appropriately.

 

[Richard Cornford]

function openIt(faq) {
showIt = document.all(faq);

Netscape/Mozilla/Gecko browsers do not have a document.all collection so
the above line will produce errors and the rest of the function will not
be executed.

If the parameter - faq - contains a string that represents the unique ID
of an HTML element (as appears to be the case, with the caveat that
"22list" is not a valid ID attribute string according to the HTML 4
specification) then the W3C DOM standard document.getElementById method
could be used, possibly with a fall back to document.all to accommodate
IE 4.

Incidentally, document.all is an object so its named properties should
be accessed using square brackets instead of parenthesise. IE does its
error correcting/tolerance thing with code like this but other browsers
that do implement a document.all collection (there are quite a number
these days) may not be so tolerant.

if (showIt.style.display == "none") {
showIt.style.display = ""
} else {
showIt.style.display = "none"
}
}

..and the onclick code is:

<a href="#" onclick="JavascriptpenIt('22list');
return false;">click here to toggle</a>

<div id="22list" style="display:none">

<snip>

Initially setting the display property to none means that any visitors
to the page who have JavaScript disabled/unavailable will be presented
with a non-functional/useful link and never be able to view the content
of the DIV (unless they view the page source). Generally, if content is
to be hidden and revealed with scripts it would be better to have it
initially visible and hide it in the onload event so that the content
will be available to the users without JavaScript. Additionally, the
link is meaningless without scripting so it should probably be included
in the document using a script, so that without client-side scripting
the user doesn't ever get the impression that there was any dynamic
mechanism on the page, and certainly not the impression that it is
broken.

Richard.

 

[Lasse Reichstein Nielsen]

Mark hu kiteb:

Change the above line to one of:

showIt.style.display = "inline";
showIt.style.display = "block";

That's not necessary. Setting the properties of the element's style
object corresponds to writing in the tag's style attribute. Setting
a style object property to the empty string is consistently (across
current browsers) equivalent to removing the property from the
attribute value. It will then take its default value (or whatever
value is given by global CSS rules).

/L

 

[Mark]

Hi - thank you for the replies - I'm not good with JavaScript though -
all I've been able to manage (after quite some time) is the code I've
shown - this was all through trial and error. Does anyone have a proper
routine which will both check for IE and Netscape, and toggle the
visibility/hidden/block (not sure which now!) between being shown and
not being shown - and not to leave a big gap if it is not shown?

Thanks again,