Showing a hidden layer using <a href> in NETSCAPE?

[M. Johansson]

This is my coding for the link:

<a href="" onclick="loginbox.style.visibility='visible'; return false;"><img src="/images/menu/account.png" border="0" alt="Account"></a>

Why, oh, why doesn't this work? Netscape simply seems to ignore the javascript ("return false;" should stop it from following the link, but nooooo...)

It works fine in IE, and the HTML is fine - I validated it. I cannot show you the code, since it is on my local server, which is on a dial-up.

Pretty please - help?

[duckie]

Tried <a href="Javascript:loginbox.style.visibility='visible'; return false;"> yet? I don't know if this will help, but this is how I would call Javascript from anchor tags.

[M. Johansson]

Yes - I tried that, whereupon IE started to do exactly what probably seemed reasonable to microsoft when they programmed IE:

Redirecting to a blank page with the word "visible" on top.

If I remove the ' around "visible", it simply produces an error. I have also tried 4 million other ways to quote it, which all produces errors. I cannot try anything in Netscape now, because I unistalled NS6 in fury, and is now downloading Mozilla.

[duckie]

Ok, I forgot about the "special" DOM used in Netscape 4.

Here's what you should do.

function show(object) {
    if (document.layers && document.layers[object])
        document.layers[object].visibility = 'visible';
    else if (document.all) {
        document.all[object].style.visibility = 'visible';
    }
}

Call it by <a href="javascript:window.show('loginbox')">

Something like that. I have not tested this script.

[M. Johansson]

I'm gonna try it right now - thank you! If this works, I owe you 14 hours of my life or something.

By the way - "special" DOM? Shouldn't netscape be standards compliant?

[M. Johansson]

Your script works fine! In IE. Not in netscape - netscape does nothing when the link is clicked.

[duckie]

That's odd, because I just tested the code and it worked fine. What version of Netscape are you using by the way.

[M. Johansson]

Mozilla - latest build. Damn it - could that be whats wrong? <grabs the NS6 cd>

[M. Johansson]

No - I just installed NS6 and tested it - not really working. No error - just nothing. Really strange. I'm probably doing it wrong - I'll just tinker with it some more.

[duckie]

Oh what I posted won't work with Netscape 6/Mozilla. Sorry I assumed you were thinking of Netscape 4. Let me work something out.

[M. Johansson]

NS4 style sheet support is absolutely horrible - and I love style sheets. I really cant stand it. (NS4, that is) I will make a "vanilla" version of my site later, that will support even lynx.

[duckie]

Ok I got it.

This is the function:

function show(object) {
	if(document.getElementById && document.getElementById(object)) {
		document.getElementById(object).style.visibility = 'visible';
	}
	else if (document.all && document.all(object)) {
		document.all(object).style.visibility = 'visible';
	}
	else if (document.layers && document.layers[object]) {
		return document.layers[object].visibility = 'visible';
	}
}

And to call it:

<a href="javascript:;" onClick="window.show('loginbox');">

Remember to remove the space from between Javascript.

Edit:

Oh yeah, this will work even in Netscape 4

[M. Johansson]

YES!!! IT WORKS!

Care to explain to me (or point me to a site where it explains) what the heck I just did, so that I might learn something?

[duckie]

Its all very simple really.

For example, "document.getElementById" is a W3C DOM2 method. This is supported by Mozilla and IE5 and above. In Mozilla and IE5, "document.getElementById" will return "True", in the 4.0 browsers, it will return "False".

Similarly, "document.all" is a proprietary IE method and "document.layer" is only supported by Netscape 4.x.

document.getElementById(object), document.all(object) and document.layers[object] checks to see if the element you defined (in this case 'loginbox') exists.

So basically the code checks to see which method is supported (checks if method returns "True") and if the element exists, and then executes the appropriate code.

You can also combine these. For example, you want something to run in Mozilla, but not IE5. Try this condition:

if (document.getElementById && !document.all)

How does this work? It checks if the getElementById method is true. Assuming it is, then it could either be Mozilla or IE5, because both supports this method. Now if the browser does not support document.all (indicated by the !, which means "not") then it should be Mozilla, but if it does support document.all, then it is IE5. Get it? I'm not too good at teaching, but I'll attempt to clarify if you need me to.

[M. Johansson]

You're not so bad at teaching - I think I've got it.

The first part of the code checks if the browser is the W3C compliant IE5+ or Mozilla, which supports getelementbyid

the second part checks if its using document.all, which is an IE only method,

and the third part checks for document.layers, which is NS4 only.

Sleek, I've learned my first cross-browser javascripting today!

[duckie]

Great, because what I wrote seems a little confusing to me.