Layer Hiding and Showing
CROSS-BROWSER w/ FULL 4.X, 5.X, and 6.x SUPPORT!!
This is a more complex method of working with multiple layers. Attention will need to made to the layer naming convention, hide sequences, and Javascript Function design (what is the specific Function doing?).
This method of hiding and showing layers is designed to be used with layers that require related layers to interact with each other. For demonstration purposes, each layer here has been offset 10 pixels to the left from the previous layer and the layer z-index is increased.
Show All
Show Layer 1, Hide 2, 3, and 4
Show Layer 2, Hide 1, 3, and 4
Show Layer 3, Hide 1, 2 and 4
Show Layer 4, Hide 1, 2 and 3
There are several parts to making this work:
- DIV/SPAN defined style
This is defined within the embedded style portion at the top of the page. Each layer MUST have the same prefix (in this case: "sec") followed by a sequential number.
<![CDATA[
<style>
#sec1 {
position: absolute;
top: 300px;
left:225px;
visibility:hidden;
z-index: 100;
background-color:Khaki;
}
#sec2 {
position: absolute;
top: 300px;
left:235px;
visibility:hidden;
z-index: 200;
background-color:Gainsboro;
}
#sec3 {
position: absolute;
top: 300px;
left:245px;
visibility:hidden;
z-index: 300;
background-color:PaleTurquoise;
}
#sec4 {
position: absolute;
top: 300px;
left:255px;
visibility:hidden;
z-index: 400;
background-color:Bisque;
}
#sec5 {
position: absolute;
top: 1900px;
left:375px;
visibility:hidden;
z-index: 500;
background-color:#FFFFCC;
height: 37px;
}
</style>
]]>
- Javascript - Part 1
ALL JavaScript MUST be placed in the section of the page.
This is the browser detection routine that sets-up the DOM.
<![CDATA[
<script>
ns4 = (document.layers) ? true:false
ie4 = (document.all) ? true:false
ng5 = (document.getElementById) ? true:false
</script>
]]>
- Javascript - Part 2
The code to HIDE a set of layers. You will need to repeat each IF/ELSE for each layer, incrementing the number as you proceed.
<![CDATA[
function hideSec() {
if (ng5) document.getElementById('sec1').style.visibility = "hidden"
else if (ns4) document.sec1.visibility = "hide"
else if (ie4) sec1.style.visibility ="hidden"
if (ng5) document.getElementById('sec2').style.visibility = "hidden"
else if (ns4) document.sec2.visibility = "hide"
else if (ie4) sec2.style.visibility ="hidden"
}
]]>
- Javascript - Part 3
The code to DISPLAY a single layer and HIDE all other layers. Note the "HIDE" function is called first, and it also does NOT have a number assigned to it. This "hides" all layers globally (of the particular suffix set).
<![CDATA[
function showSec(n) {
hideSec();
if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibility = "visible";
}
]]>
- An Event
One of various events, onClick, OnMouseover, OnMouseOut etc, to call the pert function.
Please note that the text (layer name) after the function name must be within parenthesis.
Example: mouseover to display the 5th layer
<![CDATA[
<a href="#" onMouseOver="showSec(5);" onMouseout="hideSec(5);">
mouseover to display the 5th layer</a>
]]>
This is layer ID sec1
This is the lowest layer in the z-index order.
This is layer ID sec2
This is the 2nd lowest layer in the z-index order.
This is layer ID sec3
This is the 2nd highest layer in the z-index order.
This is layer ID sec4
This is the 3rd highest layer in the z-index order.
This is layer ID sec5
This is the highest layer in the z-index order.