Help Required for using timer control created in javascript

Question

learnerasp 0 Newbie Poster

15 Years Ago

Hi There,

I have created a javascript count down timer to be used in asp.net.
Thanks to the author of the article for making my life half simple.

Basically, I create a countdown time for user to register (20 mins). If the countdown is around 5 min (that means the user is inactive for 15 min) then generate confirm box asking whether the session has to be active.

If the user clicks ok, then we reset the time. If cancel is clicked, we proceed with the timer countdown till it reaches zero and logged out. IF he doesnot do any action, the countdown timer will proceed and logged out

I hv created the scenario for the above except that I have the below problem
The problem is
Whenever the confirm box is popped up, the timer counter stops the counting.
and If user does not click on either button and remain inactive for more than 5 min (by 5 min, the user should be logged out) there is nothing done that means, the counter stops countdown and the user is not logged out.

Is there anywhere to determine in javascript whether a confirm box is popped up?

Hope i am clear.
Can somebody help me out..
I got stuck with this for the past few days and I am also a novice in javascript.

Thanks a lot in advance
Regards

javascript

2 Contributors
4 Replies
216 Views
16 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by essential

essential 84 Posting Shark

15 Years Ago

You will need to provide a counter which will trigger different events depending on the value.
And here's a simple demo to get you started:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="en">
<HEAD>
<META http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>Clear Interval DEMO</TITLE>
<SCRIPT type="text/javascript">
<!--
var time, timer, counter, activate, div;
counter = 20;
logOut = function() {
// Your logout funtion 
   alert( "More things to do, and you have " + counter + " seconds before timeout!");
};

Function.prototype.count = function( DELAY ) {
   return setInterval( this, DELAY );
}
activate = function() {
   div = ( document.getElementById ) ? document.getElementById("output") : document.all.output; 
   div.innerHTML = counter;
return time = timer.count( 1000 );
}
timer = function() {
   if ( counter === 17 ) { 
   (( confirm("This will reset the current timer!? Press \"OK\" to continue.")) ? counter = 21 : logOut() );
}
   else if ( counter === 0 ) {
   clearInterval( time );
   return alert( "Time's Up!" );
   } return div.innerHTML = ( counter -= 1);
}
window.onload = activate;
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="output"></DIV>
</BODY>
</HTML>

the timer is currently set to 1sec delay. You can simply adjust it to ( 60000 ) get 1min interval.
Hope it get's what you need...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

learnerasp 0 Newbie Poster · Answer 1 · 2009-05-05T14:48:49+00:00

Hi essential,
Thanks for the reply.
I will try to check and see if it works.

Meanwhile, here is the code I am using

<input type="text" readonly="readonly"  id="counter" style="text-align:center; font-size:x-large; font-weight:bold; color:Red;" />
 <input type="text" readonly="readonly"  id="counter1" style="text-align:center; font-size:x-large; font-weight:bold; color:Red;" />

<input type="hidden" id="hh" />
 <input type="hidden" id="HidHours" value="<%=HidH.Value%>"/>

<input type="hidden"  id="HidMinutes" value="<%=HidM.Value%>"/>

<input type="hidden"  id="HidSeconds" value="<%=HidS.Value%>"/>

<asp:HiddenField ID="HidH" runat="server" Value="0" />

<asp:HiddenField ID="HidM" runat="server" Value="0" /> 

<asp:HiddenField ID="HidS" runat="server" Value="0" />

<script language="javascript" type="text/javascript">

var hours=document.getElementById('HidHours').value; 
var minutes=document.getElementById('HidMinutes').value;
var seconds=document.getElementById('HidSeconds').value;
var hoursFirst=document.getElementById('HidHours').value; 
var minutesFirst=document.getElementById('HidMinutes').value;
var secondsFirst=document.getElementById('HidSeconds').value;
var booleanVal=true;
function display()
{ 
        if (seconds<=0)
        {
            if ((hours==0)&&(minutes==0)) 
                seconds=0;
            else
            {
                seconds=60;
                minutes-=1; 
            }
        } 
        if (minutes<=0)
        { 
            if ((hours<0)&&(minutes<0)) 
            {
                hours = minutes = seconds = 0;
            }
            else 
            {
                if ((hours==0)&&(minutes==0)) 
                    hours=minutes=0;
                if ((hours>0)&&(minutes<0)) 
                {
                    minutes=59;
                    hours-=1; 
                }
            }
        } 
        if ((minutes<=-1)||(hours<=-1))
        { 
            if (hours<=-1) 
            {
                minutes=0;
                hours+=1;
            }
            else
            {
                minutes-=1;
                seconds=0; 
                minutes+=1; 
            }
        } 
        else 
            if (seconds>0) 
               seconds-=1;
            if (seconds <= 9 && seconds.toString().length < 2)
                   seconds = "0"+seconds;
            if (minutes <= 9 && minutes.toString().length < 2)
                    minutes = "0"+minutes;
            if (hours <= 9  && hours.toString().length < 2)
                    hours = "0"+hours;

//            document.getElementById('counter').value=hours+":"+minutes+":"+seconds; 
            window.status = "Your session will expire in " + minutes+":"+seconds + " if you are inactive."

            if ((minutes == 1) && (seconds == 0)) //&& (days == 0))
            {
//               document.getElementById('hh').value = minutes;

//               RunForMinutesBeforeConfirm();
                // setTimeout("display1(hours,minutes,seconds)",1000);
                var x = 2;
//                KeepRunningTimer(x);
                x=confirm("Do you want to extend");
                 //if (confirm("Do you want to extend")==1)
                 if (x==1)
                 {

                      hours = document.getElementById('HidHours').value;
                      minutes =document.getElementById('HidMinutes').value;
                      seconds = document.getElementById('HidSeconds').value;
//                      booleanVal= false;
                      setTimeout("display()",1000);
                      // KeepRunningTimer(x); 
                 }
                 else if (x==0)//(confirm("Do you want to extend")==0)
                 {
                    setTimeout("display()",1000);
                    // KeepRunningTimer(x);
                 }
                 else
                 {
                    alert("Your session has been terminated since you did not extend the time.");
                    location.reload("login.aspx");
                 }
            } 
            else
            {
                if ((minutes == 0) && (hours == 0) && (seconds == 0)) //&& (days == 0))
                {
                    alert("Your session has been terminated since you did not extend the time.");
                    location.reload("login.aspx");
                }
                else
                {
                    setTimeout("display()",1000); 
                }    
            }          
} 

 display(); 
</script>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</form>

For the hidden fields, I pass the data on the page load.
Can help me if I can use the same as u hv said
Thanks so much in advance
Regards

learnerasp 0 Newbie Poster · Answer 2 · 2009-05-05T14:55:31+00:00

Hi Essential,
I hv tried and worked the code,
I checked that when confirm box is generated, the timer stops.
That means if you dont click ok or cancel buttons for more than 5 min, the counter still stays at 17 seconds.
Actually, I need that even if confirm box is generated and there is no actiion, the timer should countdown and once its zero, then redirect to login page.
any solution?
Regards

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-05-05T19:52:03+00:00

You can fake it with a custom dialog box.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="en">
<HEAD>
<META http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>Clear Interval DEMO</TITLE>
<STYLE type="text/css">
<!--
html, body {
  font : normal normal normal 80%/1.6 Verdana, Arial, Sans-Serif;
  min-width : 800px;
  text-align : center
  width : auto;
}
div {
  border : none;
  margin : 0;
  padding : 0;
}

div#main {
  margin : 0 auto;
  width : 98%;
  position : relative;
}

div#modal {
  background-color : #eee;
  width : 35%;
  position : absolute;
  top : 5em;
  left : 35% }

table, th, td { border : none; }
table {
  border-collapse : collapse;
  margin : 0;
  padding : 0;
  text-align : center;
  width : 100%;
}

td { width : 50%; }
div.tube {
   border : 2px solid #aaa;
   padding : 1em;
   text-align : left; }
div.hide { display : none; }
div.show { display : block; }  
// -->
</STYLE>
<SCRIPT type="text/javascript">
<!--
var time, timer, counter, activate, div, customWin;
counter = 20;


logOut = function() { 
   alert( "More things to do, and you have " + counter + " seconds before timeout!");
};

Function.prototype.count = function( DELAY ) {
   return setInterval( this, DELAY );
}

activate = function() {
   div = ( document.getElementById ) ? document.getElementById("output") : document.all.output; 
   div.innerHTML = counter;
return time = timer.count( 1000 );
}

timer = function() {

   if ( counter === 17 ) { 
   customWin = (( document.getElementById ) ? document.getElementById("modal") : document.all.modal );
customWin.className = "show";
}
   else if ( counter === 0 ) {
   clearInterval( time );
   return alert( "Time's Up!" ); 
   } div.innerHTML = counter -= 1;
}
window.onload = activate;
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="main">
<DIV ID="modal" class="hide">
<DIV class="tube">
<TABLE summary="JavaScript DEMO">
<TR><TH colspan="2">This will reset the current timer!? Press "OK" to continue</TH>
</TR>
<TR><TD><INPUT type="button" id="ok" name="ok" value=" OK " onclick="counter = 21; customWin.className = 'hide';"></TD><TD><INPUT type="button" id="cnl" name="cnl" value=" CANCEL " onclick="customWin.className = 'hide'; logOut();"></TD>
</TR>
</TABLE>
</DIV>
</DIV>
<DIV ID="output"></DIV>
</DIV>
</BODY>
</HTML>