showhide ie5+ns4x =>works , ns6 dont !!

liunx · Jan 9, 2008

I try a lot of show-hide metods, but what work good 
in Ie5 and Ns4.7 ...dont work in Ns6... 
 
What is the corect sintax to make this function 
to work under these three navigators ?. 
 
This question is avaible too for slide options...Hi Sorin, welcome to htmlforums. 
Um, by looking at your spelling, I'd be more concerned that you have made a simple coding error.

. Actually, NS6 probably doesn't support it..haha. I'm sure kd in the client side scripting forum knows your answer though, he is right up on NS6 and is a wizard. Please post your current script that you have in there and what you would like it to do and I'm sure you'll get your answer.Here is a list of User Agents (browsers) that my technique supports (and should work on both PCs and Macs): 
IE4 
IE5 
IE5.5 
NS4.5, 4.6, 4.7, 4.76 
NS6.0 
 
Just copy the code below and save as a HTML page on your computer and view via your UA. It is a full walk-thru for hiding showing layers in the above UAs. Hope this helps 
 
 
 
 
======begin source - ================ 
<!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>ULTRAPRISE.COM</title> 
<LINK href=http://www.htmlforums.com/archive/index.php/"../somestyle.css" rel="stylesheet" type="text/css"> 
<title>MyServer.COM</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

aleTurquoise;} 
#sec4 {position: absolute; top: 175px; left:255px; visibility:hidden; z-index: 400; background-color:Bisque;} 
xmp {color:blue; background-color

owderBlue;} 
</style> 
<script> 
//the next 2 lines are browser detection for 4.x 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> 
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. 
 
 
 
 
<a href=http://www.htmlforums.com/archive/index.php/"#" onClick="showAllSec(1),showAllSec(2),showAllSec(3),showAllSec(4)">Show All</a> 
<a href=http://www.htmlforums.com/archive/index.php/"#" onClick="showSec(1)">Show Layer 1</a>, Hide 2, 3, and 4 
<a href=http://www.htmlforums.com/archive/index.php/"#" onClick="showSec(3)">Show Layer 3</a>, Hide 1, 2 and 4 
<a href=http://www.htmlforums.com/archive/index.php/"#" onClick="showSec(4)">Show Layer 4</a>, Hide 1, 2 and 3 
 
There are several parts to making this work: 
<ol> 
<li>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. 
<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

aleTurquoise;} 
#sec4 {position: absolute; top: 175px; left:255px; visibility:hidden; z-index: 400; background-color:Bisque;} 
</style> 
</xmp> 
 
<li>Javascript - Part 1 
ALL JavaScript MUST be placed in the <HEAD> section of the page. 
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>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. 
<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>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). 
<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>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. 
<xmp> 
<a href=http://www.htmlforums.com/archive/index.php/"#" onMouseOver="showSec(2)">mouseover to display the 2nd layer</a> 
</xmp> 
</ol> 
 
 
 
 
 
 
 
<div id="sec1"> 
This is layer ID sec1 
This is the lowest layer in the z-index order. 
</div> 
 
<div id="sec2"> 
This is layer ID sec2 
This is the 2nd lowest layer in the z-index order. 
</div> 
 
<div id="sec3"> 
This is layer ID sec3 
This is the 2nd highest layer in the z-index order. 
</div> 
 
<div id="sec4"> 
This is layer ID sec4 
This is the highest layer in the z-index order. 
</div> 
 
 
 
 
</body> 
</html> 
 
 
[Edited by Marlboro on 02-19-2001 at 03:12 PM]

showhide ie5+ns4x =>works , ns6 dont !!

liunx

Guest