How to let certain layers disappear and others not?

kippie

08-09-2004, 11:42 AM

In the HTM below there is a function to show and hide layers. With the command "hideLayers();" all layers are hidden. I wonder if it is possible to change the function so that with "hideLayers();" one type of layers (dependent on the name) answer to this function and disappear (layer1 and layer2), while the others don't and stay (otherlayer).

This is the HTML with the function:
<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>Welcome to Adobe GoLive 4</title>

<script language="javascript">
function hideLayers(sel) {
var eles = document.getElementsByTagName("div");
var all = (sel) ? 0 : 1;
if(all){
for(i=0;i<eles.length;i++) {
document.getElementById(eles[i].id).style.visibility="hidden";
}
}
else{
for(i=0;i<eles.length;i++) {
if(eles[i].id==sel) document.getElementById(eles[i].id).style.visibility="hidden";
}
}
}

function showLayer(sel) {
var eles = document.getElementsByTagName("div");
for(i=0;i<eles.length;i++) {
if (eles[i].id==sel) {
document.getElementById(sel).style.visibility="visible";
}

}
}
</script>

<style type="text/css">
</style>
</head>

<body>
<div id="layer1">
This is layer 1</div>
<div id="layer2">
This is layer 2</div>

<div id="otherlayer">
This is OtherLayer</div>
<br><br><br><br><br>

<a href="#" onClick="hideLayers();">Hide all layers</a><br>
<a href="#" onClick="hideLayers('layer1');">Hide layer1</a><br>
<a href="#" onClick="hideLayers('layer2');">Hide layer2</a><br>
<a href="#" onClick="showLayer('layer2');">Show layer2</a><br>
</body>
</html>

Mr J

08-09-2004, 03:15 PM

kippie

08-09-2004, 03:44 PM

Hi Mr.J,

I think I was not clear in my explanation. I changed my question a bot and hope it is more clear now. The point is that I'm making a website with a lot of div's which come up and go (these have to disappear on one command). But there are also some div's which have to be steady present and should never disappear. So I'm looking for a way to classify the div's into 2 groups so that on one command all div's of the first group disappear but all div's of the second remain as they are. Could anyone help?

Mr J

08-09-2004, 05:34 PM

Ok, then we try again

Any layer that is going to be included in the Hide All, Show All functions are to be included in the mydiv array.

This script gives the ability to hide/show all the stated layers and show/hide individual layers

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>Welcome to Adobe GoLive 4</title>

<script language="javascript">

</script>

<style type="text/css">

</style>
</head>

<body>
<div id="layer1">This is layer 1</div>
<div id="layer2">This is layer 2</div>

<div id="otherlayer">
This is OtherLayer</div>
<br><br><br><br><br>

<a href="#" onClick="HideAllLayers();">Hide All Layers</a>
<a href="#" onClick="ShowAllLayers();">Show All Layers</a>
<P><a href="#" onClick="HideLayer('layer1');">Hide Layer 1</a>
<a href="#" onClick="ShowLayer('layer1');">Show Layer 1</a>
<P><a href="#" onClick="HideLayer('layer2');">Hide Layer 2</a>
<a href="#" onClick="ShowLayer('layer2');">Show Layer 2</a>
</body>
</html>

JPM

08-09-2004, 05:38 PM

<!--
function hideLayers(id) {
if(id.indexOf('hide') {
document.getElementById(id).style.visibility="hidden";
}
}

......
.......
.....

<div id="hide1"></div>
<div id="hide2"></div>

<div id="blah"></div><div id="blah2"></div>

JPM

08-09-2004, 05:39 PM

Looks like we posted at the same time J...

Mr J

08-09-2004, 05:41 PM

You have a good idea there though JPM :D

Sometime later .......

Just a thought,

If you didn't want the layer to be made hidden/visible then you would not use the function on that layer?

And a bit later .....

Unless you were having other statements in the script that would affect the layer ......hmmm

kippie

08-09-2004, 09:33 PM

Thanks Mr. J! This helps a lot!!
And ......
I learned something new