PDA

Click to See Complete Forum and Search --> : Layer and popup help

michaelri
05-18-2003, 09:45 PM
Issue:

Can anyone please show me how to show a hidden layer based on a (javascript)count-down clock?

For example, the javascript count-down clock executes when the browser is opened. After it reaches 0 second, then will show the hidden layer in center of the screen.

Thanks,

Michael
michaelri
05-19-2003, 09:00 AM
Dave, here's the script. I need to show the hidden layer when count to 0. Prefer to show it in the center of the screen.
------------------------------------------

<HTML>
<HEAD>
<TITLE>Countdown and Show Layer</TITLE>
</HEAD>
<Script Language="JavaScript">
<!-- Hiding

function display(){
rtime=etime-ctime;
if (rtime>60)
m=parseInt(rtime/60);
else{
m=0;
}
s=parseInt(rtime-m*60);
if(s<10)
s="0"+s
window.status="Time Remaining : "+m+":"+s
window.setTimeout("checktime()",1000)
}

function settimes(){
//alert("You will be logout in 5 minutes!")
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
etime=hours*3600+mins*60+secs;
etime+=5; //set to 5 seconds
checktime();
}

function checktime(){
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
ctime=hours*3600+mins*60+secs
if(ctime>=etime){
expired();
}
else
display();
}

function expired(){
alert("You have been logged out");
location.href="http://www.yahoo.com";
}

// Done hiding -->
</Script>
<BODY onLoad="settimes()" bgcolor="#FFFFFF">
Welcome Michael!
</BODY> </HTML>

---------------------------------------------------
khalidali63
05-19-2003, 09:07 AM
It seems like one of the options you have is to use setTimeout() function

You will have one function that will display the layer e.g
var timer;
function show(){
document.getElmenetById("SG_1").style.visibility="visible"
}

now you can call this method with some delay from the body onload event.

<body onload="timer=setTimeout('show()',5000);">

the above will show a layer after 5 seconds once the page is loaded.
pyro
05-19-2003, 09:07 AM
Try this out:

<HTML>
<HEAD>
<TITLE>Countdown and Show Layer</TITLE>
</HEAD>

<style type="text/css">
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:200px;
height:100px;
margin-left: -100px; /*set to a negative number 1/2 of your width*/
margin-top: -50px; /*set to a negative number 1/2 of your height*/
border: 1px solid;
background-color: #eeeeee;
overflow: auto;
}
</style>

<Script Language="JavaScript">
<!-- Hiding

function display(){
rtime=etime-ctime;
if (rtime>60)
m=parseInt(rtime/60);
else{
m=0;
}
s=parseInt(rtime-m*60);
if(s<10)
s="0"+s
window.status="Time Remaining : "+m+":"+s
window.setTimeout("checktime()",1000)
}

function settimes(){
//alert("You will be logout in 5 minutes!")
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
etime=hours*3600+mins*60+secs;
etime+=5; //set to 5 seconds
checktime();
}

function checktime(){
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
ctime=hours*3600+mins*60+secs
if(ctime>=etime){
expired();
}
else
display();
}

function expired(){
document.getElementById("mydiv").style.display = "block";
}

// Done hiding -->
</Script>
<BODY onLoad="settimes()" bgcolor="#FFFFFF">
Welcome Michael!
<div id="mydiv" style="display:none;">
This is your centered &lt;div&gt;.
</div>
</BODY>
</HTML>
pyro
05-19-2003, 09:08 AM
Actually, yes, as Khalid said, if you are only trying to show the layer after 5 seconds, you would be better of using a setTimeout().
michaelri
05-19-2003, 10:02 AM
This works beautifully. Many thanks.