Hello and welcome to DeveloperFusion.
You need to abstract away the hiding and showing of layers in your code so its easier to manage as there are multiple ways of hiding/showing layers across browsers and depending on which browser the client is using you need to adapt to it.
Here's a rough breakdown of the usage:
- document.getElementById - DOM v3 (so Netscape 6, IE5+, Opera, Firefox etc)
- document.layers - Netscape 4
- document.all - IE4 (use as last resort)
Thats just to return the DIV layer you want to hide/show. Then you can choose either to set the visibility property or the display property once you have the layer.
You can do:
- [layer].style.display = "none" | "inline" | "block"
- [layer].style.visibility = "visible" | "hidden"
So whats the difference?
The visibility property will make the element hidden but it will still be apart of the document (there will be an empty space there), where as the display property removes that element completely from the document as if it was never there to begin with to render.
Now that I've gone through the background, some code. Firstly in your onclick we should use call a function to handle all the hiding and showing of layers instead of putting code in there (its cleaner, and easier to manage). So you can call it say, 'showLayer' or something, and move that function into a seperate javascript file (scripts.js?) so you can easily reuse it and modify it later.
<script type="text/javascript" language="javascript" src="./script.js"></script>
On a side note, to detect the type of browser:
var isIE = (document.all && window.external && window.ActiveXObject) ? true:false;
var isInternetExplorer = (document.all && window.external && window.ActiveXObject) ? true:false;
var isMozilla = true&&window.GeckoActiveXObject;
var isOpera = true&&window.opera;
var isNetscape4 = (document.layers) ? true:false
var isNetscapeGecko5 = (document.getElementById) ? true:false
var isOther = (!isIE&&!isMozilla&&!isOpera&&!isNetscape4&&!isNetscapeGecko5);
Now to get the layer out:
function getLayer(objLayer)
{
if (document.getElementById)
return document.getElementById(objLayer);
else if (document.all)
return document.all[objLayer];
else if (document.layers)
return document.layers[objLayer];
}
Once we have the layer you can use either visibility or display as mentioned above. To make your life easier, heres a full example:
function showLayer(objLayer)
{
var layer = getLayer(objLayer)
var username = getLayer('username');
if(layer == null) return;
layer.style.visibility = 'visible';
if(username !=null) username.focus();
}
<span id="openLogin"
onclick="BLOCKED SCRIPTshowLayer('loginPanel1');"
style="color:blue;cursor:hand">
Researchers can login here.
</span>
I hope that helps you understand the logic, however the code is untested, so if it doesn't render what you want I will fix it :-) I'm on vacation now in Japan but its raining so I figured I'd check the forums :-)
Enter your message below
Sign in or Join us (it's free).