Hiding and Showing Layers - the Visibility Property

show the purple layer - hide the purple layer


To change a layer's visibility attribute to "hidden" or "visible", the property name in all browsers that support DHTML is visibility. So using our browser sniffing source file to find the path to a CSS element, a function for showing a layer is very simple:

**NOTE: this script requires the browser sniffing script from the previous section in order to function properly.

function showLayer(id) {
layer = browser(id)
   if(nn4){
   layer.visibility = "visible"
   }
   else{
   layer.style.visibility = "visible"
   }
}

Remember - the argument, "id" represents the literal html name value assigned to the div tag.
<div id="blockDiv"></div>

As with all arguments, it is defined from where the function is called:
<a href="javascript:showLayer('blockDiv')">show the purple layer</a>

The variable, "layer" is assigned the returned value of the variable "path" that was used in the browser sniffing function to represent the path to the element, depending on which browser is looking at your page.

If it is a Netscape 4.x browser, layer's value is:
document.layers["blockDiv"]

If it is Internet Explorer browser, layer's value is:
document.all["blockDiv"]

If it is Netscape 6 or other standards compliant browser, layer's value is:
document.getElementById("blockDiv")

Now we have the path stored in that variable, and can attach properties to it and manipulate those properties. In this case, the property we want to manipulate is visibility. If the browser is NN4, the visibility property is attached to layer like this:
layer.visibility = "visible"


Otherwise, "style.visibility" is attached to layer:
layer.style.visibility = "visible"


The hide function is almost identical to the show function:

function hideLayer(id) {
layer = browser(id)
   if(nn4){
   layer.visibility = "hidden"
   }
   else{
   layer.style.visibility = "hidden"
   }
}

Home | Contact