PDA

View Full Version : How to toggle these 2 layers together?

kippie
08-18-2002, 06:43 AM
In the HTML below I want two layers together to appear. But it does not work. I'v tried it on two ways (see links below). Can anyone help?

<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 layerLoop(sel) {
var eles = document.getElementsByTagName("div");
for(i=0;i<eles.length;i++) {
if (eles[i].id==sel) {
document.getElementById(sel).style.visibility="visible";
}
else {
document.getElementById(eles[i].id).style.visibility="hidden";
}
}
}
</script>
<style type="text/css"><!--
#layer { position: absolute; top: 16px; left: 16px; width: 100px; height: 100px; visibility: hidden }
#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: hidden }
#layer4 { position: absolute; top: 10px; left: 249px; width: 100px; height: 100px; visibility: hidden }-->
</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="java script: layerLoop('layer'); layerLoop('layer4')">Make Layer 1 and layer 4 visible; but this does not work</a><br>
<a href="java script:;" onClick="layerLoop('layer2'); layerLoop('layer3')">Make Layer 2 and layer 3 visible; but this does not work</a><br>
<a href="java script: layerLoop('layer3')">Make Layer 3 visible; this works</a><br>
<a href="java script: layerLoop('layer4')">Make Layer 4 visible; this works</a><br><br>
<a href="java script: history.go(0)">Reset</a>


</body>

</html>

Kippie
Jon Hanlon
08-18-2002, 06:46 PM
Well DUH Kippie, what did you expect?
Read the code:

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

The code says "Make the <div> knows as 'sel' visible, and hide the rest". So when you say onClick="layerLoop('layer2');layerLoop('layer3')" it makes layer2 visible and hides the others, then it makes layer3 visible and hides the others. You need to split the function into parts:


<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>



Then do:
onClick="hideLayers();showLayer('layer2');showLayer('layer3')"
kippie
08-19-2002, 03:01 AM
Thanks Jon and thanks for your explanation
Kippie