Marlboro
01-23-2001, 03:44 PM
Just because I'm a nice guy and this is a pretty decent forum of smart people......copy the code below, save as a HTML file of your choice and view. Fully explained with source code samples!
=====begin file source code now ========
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title>Mark's daMan</title>
<style>
#sec1 {position: absolute; top: 175px; left:225px; visibility:hidden; z-index: 100; background-color:Khaki;}
#sec2 {position: absolute; top: 175px; left:235px; visibility:hidden; z-index: 200; background-color:Gainsboro;}
#sec3 {position: absolute; top: 175px; left:245px; visibility:hidden; z-index: 300; background-color:PaleTurquoise;}
#sec4 {position: absolute; top: 175px; left:255px; visibility:hidden; z-index: 400; background-color:Bisque;}
xmp {color:blue; background-color:PowderBlue;}
</style>
<script>
//the next 3 lines are browser detection for user-agent DOMS
ns4 = (document.layers) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getElementById) ? true:false //required for Functions to work
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"
if (ng5) document.getElementById('sec3').style.visibility = "hidden"
else if (ns4) document.sec3.visibility = "hide"
else if (ie4) sec3.style.visibility ="hidden"
if (ng5) document.getElementById('sec4').style.visibility = "hidden"
else if (ns4) document.sec4.visibility = "hide"
else if (ie4) sec4.style.visibility ="hidden"
}
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";
}
function showAllSec(n) {
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";
}
</script>
</head>
<body bgcolor="#ffffff">
<h1 class="grouphead">*Layer Hiding and Showing</h1>
<b>CROSS-BROWSER w/ FULL 4.X, 5.X, and 6.x SUPPORT!!</b><BR>
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?).
<br>
<br>
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.
<br>
<br>
<a href="#" onClick="showAllSec(1),showAllSec(2),showAllSec(3),showAllSec(4)">Show All</a><br>
<a href="#" onClick="showSec(1)">Show Layer 1</a>, Hide 2, 3, and 4 <br>
<a href="#" onClick="showSec(3)">Show Layer 3</a>, Hide 1, 2 and 4<br>
<a href="#" onClick="showSec(4)">Show Layer 4</a>, Hide 1, 2 and 3<br>
<br><br>
There are several parts to making this work:
<ol>
<li><b>DIV/SPAN defined style</b><br>
This is defined within the embedded style portion at the top of the page. Each layer <b>MUST</b> have the same prefix (in this case: "<b>sec</b>") followed by a sequential number.
<xmp>
<style>
#sec1 {position: absolute; top: 175px; left:225px; visibility:hidden; z-index: 100; background-color:Khaki;}
#sec2 {position: absolute; top: 175px; left:235px; visibility:hidden; z-index: 200; background-color:Gainsboro;}
#sec3 {position: absolute; top: 175px; left:245px; visibility:hidden; z-index: 300; background-color:PaleTurquoise;}
#sec4 {position: absolute; top: 175px; left:255px; visibility:hidden; z-index: 400; background-color:Bisque;}
</style>
</xmp>
<li><b>Javascript - Part 1</b><br>
ALL JavaScript <b>MUST</b> be placed in the <HEAD> section of the page. <br>
This is the browser detection routine that sets-up the DOM.
<xmp>
<script>
ns4 = (document.layers) ? true:false
ie4 = (document.all) ? true:false
ng5 = (document.getElementById) ? true:false
</script>
</xmp>
<li><b>Javascript - Part 2</b><br>
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.
<xmp>
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"
}
</xmp>
<li><b>Javascript - Part 3</b><br>
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).
<xmp>
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";
}
</xmp>
<li><b>An Event</b><br>
One of various events, onClick, OnMouseover, OnMouseOut etc, to call the pert function. <br>
Please note that the text (layer name) after the function name must be within parenthesis.
<xmp>
<a href="#" onMouseOver="showSec(2)">mouseover to display the 2nd layer</a>
</xmp>
</ol>
<br>
<br>
<div id="sec1">
This is layer ID <b>sec1</b><br>
This is the lowest layer in the z-index order.
</div>
<div id="sec2">
This is layer ID <b>sec2</b><br>
This is the 2nd lowest layer in the z-index order.
</div>
<div id="sec3">
This is layer ID <b>sec3</b><br>
This is the 2nd highest layer in the z-index order.
</div>
<div id="sec4">
This is layer ID <b>sec4</b><br>
This is the highest layer in the z-index order.
</div>
</body>
</html>
=====begin file source code now ========
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title>Mark's daMan</title>
<style>
#sec1 {position: absolute; top: 175px; left:225px; visibility:hidden; z-index: 100; background-color:Khaki;}
#sec2 {position: absolute; top: 175px; left:235px; visibility:hidden; z-index: 200; background-color:Gainsboro;}
#sec3 {position: absolute; top: 175px; left:245px; visibility:hidden; z-index: 300; background-color:PaleTurquoise;}
#sec4 {position: absolute; top: 175px; left:255px; visibility:hidden; z-index: 400; background-color:Bisque;}
xmp {color:blue; background-color:PowderBlue;}
</style>
<script>
//the next 3 lines are browser detection for user-agent DOMS
ns4 = (document.layers) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getElementById) ? true:false //required for Functions to work
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"
if (ng5) document.getElementById('sec3').style.visibility = "hidden"
else if (ns4) document.sec3.visibility = "hide"
else if (ie4) sec3.style.visibility ="hidden"
if (ng5) document.getElementById('sec4').style.visibility = "hidden"
else if (ns4) document.sec4.visibility = "hide"
else if (ie4) sec4.style.visibility ="hidden"
}
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";
}
function showAllSec(n) {
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";
}
</script>
</head>
<body bgcolor="#ffffff">
<h1 class="grouphead">*Layer Hiding and Showing</h1>
<b>CROSS-BROWSER w/ FULL 4.X, 5.X, and 6.x SUPPORT!!</b><BR>
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?).
<br>
<br>
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.
<br>
<br>
<a href="#" onClick="showAllSec(1),showAllSec(2),showAllSec(3),showAllSec(4)">Show All</a><br>
<a href="#" onClick="showSec(1)">Show Layer 1</a>, Hide 2, 3, and 4 <br>
<a href="#" onClick="showSec(3)">Show Layer 3</a>, Hide 1, 2 and 4<br>
<a href="#" onClick="showSec(4)">Show Layer 4</a>, Hide 1, 2 and 3<br>
<br><br>
There are several parts to making this work:
<ol>
<li><b>DIV/SPAN defined style</b><br>
This is defined within the embedded style portion at the top of the page. Each layer <b>MUST</b> have the same prefix (in this case: "<b>sec</b>") followed by a sequential number.
<xmp>
<style>
#sec1 {position: absolute; top: 175px; left:225px; visibility:hidden; z-index: 100; background-color:Khaki;}
#sec2 {position: absolute; top: 175px; left:235px; visibility:hidden; z-index: 200; background-color:Gainsboro;}
#sec3 {position: absolute; top: 175px; left:245px; visibility:hidden; z-index: 300; background-color:PaleTurquoise;}
#sec4 {position: absolute; top: 175px; left:255px; visibility:hidden; z-index: 400; background-color:Bisque;}
</style>
</xmp>
<li><b>Javascript - Part 1</b><br>
ALL JavaScript <b>MUST</b> be placed in the <HEAD> section of the page. <br>
This is the browser detection routine that sets-up the DOM.
<xmp>
<script>
ns4 = (document.layers) ? true:false
ie4 = (document.all) ? true:false
ng5 = (document.getElementById) ? true:false
</script>
</xmp>
<li><b>Javascript - Part 2</b><br>
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.
<xmp>
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"
}
</xmp>
<li><b>Javascript - Part 3</b><br>
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).
<xmp>
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";
}
</xmp>
<li><b>An Event</b><br>
One of various events, onClick, OnMouseover, OnMouseOut etc, to call the pert function. <br>
Please note that the text (layer name) after the function name must be within parenthesis.
<xmp>
<a href="#" onMouseOver="showSec(2)">mouseover to display the 2nd layer</a>
</xmp>
</ol>
<br>
<br>
<div id="sec1">
This is layer ID <b>sec1</b><br>
This is the lowest layer in the z-index order.
</div>
<div id="sec2">
This is layer ID <b>sec2</b><br>
This is the 2nd lowest layer in the z-index order.
</div>
<div id="sec3">
This is layer ID <b>sec3</b><br>
This is the 2nd highest layer in the z-index order.
</div>
<div id="sec4">
This is layer ID <b>sec4</b><br>
This is the highest layer in the z-index order.
</div>
</body>
</html>