Entry
What's a basic way to make my layers automatically hide after about six seconds?
Nov 23rd, 2000 13:10
Juergen Thelen, Ric Paton,
I presume you wish this for a tooltip like effect, ie. with a small
layer hiding several seconds after it had been shown. The easiest way
to achieve this is to use the 'setTimeout' command when you set the
layers to be visible. Say, for example, you had a function that showed
the layer called 'showLayer ()'..
function showLayer() {
document.layers[<layername>].visbility = "show";
setTimeout( "hideLayer()", 6000);
}
...this function shows the layer then sets a timout value of 6000 (6
seconds / 1 second = 1000) after which it will then call the 'hideLayer
()' function. That function could look something like...
function hideLayer() {
document.layers[<layername>].visibility = "hide";
}
It should be noted that this is coded for NN (<layer>) as you mentioned
layers. If you wish to use it for IE (<div>), use the
'document.all.item(<divname>).style.visibility ='
command instead with the values being 'visible' or 'hidden'. Hope this
helps.
Ric.
-----
Just in case you need an example, I hacked a quickie for you on the fly:
<html>
<head>
<title>FAQTS - Juergen Thelen - Hide layers after x seconds</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
var timerID;
function ShowLayer(id)
{
if (document.layers)
{
document.layers[id].visibility = "show";
}
else if (document.all)
{
document.all[id].style.visibility = "visible";
}
else if (document.getElementById)
{
document.getElementById(id).style.visibility = "visible";
}
}
function HideLayer(id)
{
if (document.layers)
{
document.layers[id].visibility = "hide";
}
else if (document.all)
{
document.all[id].style.visibility = "hidden";
}
else if (document.getElementById)
{
document.getElementById(id).style.visibility = "hidden";
}
}
function ShowThemAgain()
{
for (var i=1; i < 3; i++)
{
ShowLayer(("Layer" + i));
}
}
function HideThemNow()
{
clearTimeout(timerID);
for (var i=1; i < 3; i++)
{
HideLayer(("Layer" + i));
}
}
function HideThemIn6()
{
setTimeout("HideThemNow()", 6000);
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" onResize="if(window.netscape) {history.go(0)};">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-
index:1; background-color: #3333FF; layer-background-color: #3333FF;
border: 1px none #000000; left: 348px; top: 20px; clip: rect(0px 200px
115px 0px)"><font color="#FFFFFF">Layer
1</font></div>
<div id="Layer2" style="position:absolute; width:200px; height:115px; z-
index:2; left: 233px; top: 94px; background-color: #FF0033; layer-
background-color: #FF0033; border: 1px none #000000; clip: rect(0px
200px 115px 0px)">Layer
2</div>
<form>
<p>
<input type="button" name="Button" value="Hide layers 6 seconds
after clicking" onClick="HideThemIn6()">
</p>
<p>
<input type="button" name="Button2" value="Show layers again"
onClick="ShowThemAgain()">
</p>
</form>
</body>
</html>
Hth, Juergen.
