...

View Full Version : How to toggle two layers together?



kippie
08-18-2002, 11:24 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="javascript: layerLoop('layer'); layerLoop('layer4')">Make Layer 1 and layer 4 visible; but this does not work</a><br>
<a href="javascript:;" onClick="layerLoop('layer2'); layerLoop('layer3')">Make Layer 2 and layer 3 visible; but this does not work</a><br>
<a href="javascript: layerLoop('layer3')">Make Layer 3 visible; this works</a><br>
<a href="javascript: layerLoop('layer4')">Make Layer 4 visible; this works</a><br><br>
<a href="javascript: history.go(0)">Reset</a>


</body>

</html>

nolachrymose
08-18-2002, 01:10 PM
function toggleObjects() {
var args = arguments;
for(var i = 0; i < args.length; i++) {
if(args[i].style.display == "none") args[i].style.display = "block";
else args[i].style.display = "none";
}
}

This function allows you to toggle as many objects as you'd like.

Hope that helps!

Happy coding! :)

kippie
08-18-2002, 11:04 PM
Thanks, but I cannot get it working. Apparently I make a mistake somewhere but where?

I tries this code:
<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 toggleObjects() {
var args = arguments;
for(var i = 0; i < args.length; i++) {
if(args[i].style.display == "none") args[i].style.display = "block";
else args[i].style.display = "none";
}
}
</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:;" onClick="toggleObjects('layer');">Toggle Layer1</a>

</body>
</html>

Kippie



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum