PDA

View Full Version : How to make this swap function automatically?

kippie
02-18-2003, 11:09 AM
In the HTML below I have is a function to swap between 2 layers. I'm looking for a way to make this swap automatically with variable time-intervals, which I can set. So you can choose for 1 second between each swap, or 2 seconds etc. Can anyone help?

This is the HTML so far:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<script language="JAVASCRIPT"><!--
function swapLayers()
{
if(document.getElementById("layer1").style.visibility == "hidden")
{
document.getElementById("layer1").style.visibility = "visible";
document.getElementById("layer2").style.visibility = "hidden";
}
else
{
document.getElementById("layer1").style.visibility = "hidden";
document.getElementById("layer2").style.visibility = "visible";
}
}
// -->
</script>
<style type="text/css"><!--
#layer1 { position: absolute; top: 52px; left: 191px; width: 100px; height: 100px; visibility: visible }
#layer2 { position: absolute; top: 50px; left: 100px; width: 100px; height: 100px; visibility: hidden }-->
</style>
</head>
<body>
<a href="javascript://" onclick="swapLayers();">Swap Layers</a>
<div id="layer1">
This is layer 1</div>
<div id="layer2">
This is layer 2</div>
</body>
</html>



Kippie
arnyinc
02-18-2003, 01:28 PM
I'm not sure what the order of execution in javascript is. This would seem to cause a 2 second delay, but it doesn't.


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<script language="JAVASCRIPT"><!--
function swapTimer(){
setTimeout("swapLayers()", 1000);
setTimeout("swapTimer()", 1000);
}
function swapLayers()
{
if(document.getElementById("layer1").style.visibility == "hidden")
{
document.getElementById("layer1").style.visibility = "visible";
document.getElementById("layer2").style.visibility = "hidden";
}
else
{
document.getElementById("layer1").style.visibility = "hidden";
document.getElementById("layer2").style.visibility = "visible";
}
}
// -->
</script>
<style type="text/css"><!--
#layer1 { position: absolute; top: 52px; left: 191px; width: 100px; height: 100px; visibility: visible }
#layer2 { position: absolute; top: 50px; left: 100px; width: 100px; height: 100px; visibility: hidden }-->
</style>
</head>
<body onLoad="swapTimer()">
<a href="javascript://" onclick="swapLayers();">Swap Layers</a>
<div id="layer1">
This is layer 1</div>
<div id="layer2">
This is layer 2</div>
</body>
</html>