...

View Full Version : How to let only one layer disappear?



kippie
03-17-2004, 04:12 PM
In the HTML below I want to make it so, that I can choose one layer to disappear. This I what I try to do in the last menuline: "Hide layer1". But instead of only one layer disappearing all layers disappear. Could someone help me to change the function somehow?

This is the HTML:
<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() {
var eles = document.getElementsByTagName("div");
for(i=0;i<eles.length;i++) {
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"><!--
#layer { position: absolute; top: 16px; left: 16px; width: 100px; height: 100px; visibility: visible }
#layer2 { position: absolute; top: 148px; left: 217px; width: 100px; height: 100px; visibility: hidden }
#layer3 { position: absolute; top: 155px; left: 16px; width: 100px; height: 100px; visibility: visible }
#layer4 { position: absolute; top: 10px; left: 249px; width: 100px; height: 100px; visibility: visible }-->
</style>
</head>

<body>
<div id="layer">
This is layer 1</div>
<div id="layer2">
This is layer 2</div>
<div id="layer3">
This is layer 3</div>
<div id="layer4">
This is layer 4</div>
<br><br><br><br><br><br><br><br><br><br>
<a href="javascript:;" onClick="hideLayers();showLayer('layer2');showLayer('layer3')">Make Layer 2 and layer 3 visible; </a><br>
<a href="javascript:;" onClick="showLayer('layer2');">Make Layer 2 visible; </a><br>
<a href="javascript:;" onClick="hideLayers('layer2');showLayer('layer4');showLayer('layer3')">Hide layer2 and show layer 3 and 4</a><br>
<a href="javascript:;" onClick="hideLayers();">Hide all layers</a><br>
<a href="javascript:;" onClick="hideLayers('layer1');">Hide layer1</a><br>

</body>
</html>

Roy Sinclair
03-17-2004, 04:53 PM
Your problem is those dead-end URLs you provided.

This [/b]href="java script:;" [/b] is not a valid URL. Replacing that with href="#" makes the links work.

kippie
03-17-2004, 05:02 PM
Hi Roy,

Thanks for your reaction, but I cannot get it working. I've replaced the code as you said but when clicking the last link ("Hide layer1") still all layers disappear. What's wrong?

Kippie

Roy Sinclair
03-17-2004, 06:17 PM
Your hideLayers function is set up to find all DIVs on the page and to hide ALL of them. It isn't using the parameter you're passing it to decide which layer to hide. You're expecting that function to perform in a way it wasn't written to perform.

kippie
03-17-2004, 06:51 PM
I see, OK I'll work on it. Thanks anyhow.

Kippie



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum