• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2979
  • Last Modified:

Automatically respond to javascript confirmation after x seconds

Hello,

I have a simple javascript inactivity script that automatically forwards a user to a login page after a certain period of inactivity.  It works well, all except for one issue.  The script warns the user first after a shorter period that thier session is about to expire using a javascript confirmation box.  If they click OK, both timers get reset.  If they click cancel, they are logged out.  The problem is that this confirmation box would not be responded to at all if the user is really idle.  In this case, I would like the confirmation box to show up for x number of seconds before automatically responding "CANCEL" to itself thus logging the user off.  Below is the javascript used for the timers, and the body tag which calls them.  Please help if you can!

<script language="JavaScript">
//Inactivity functions below are used to automatically redirect the page to the logoff script when the user's session is up.

function set_interval() {
  //the interval 'timer' is set as soon as the page loads  
  var timeoutMins = 1000 * 1 * 15; // 15 seconds
  var timeout1Mins = 1000 * 1 * 13; // 13 seconds
  itimer=setInterval("auto_logout()",timeoutMins);
  atimer=setInterval("alert_idle()",timeout1Mins);
  
}
 
function reset_interval() {
  var timeoutMins = 1000 * 1 * 15; // 15 seconds 
  var timeout1Mins = 1000 * 1 * 13; // 13 seconds
  //resets the timer. The timer is reset on each of the below events:
  // 1. mousemove   2. mouseclick   3. key press 4. scrolling
  //first step: clear the existing timer
  clearInterval(itimer);
  clearInterval(atimer);
  //second step: implement the timer again
  itimer=setInterval("auto_logout()",timeoutMins);
  atimer=setInterval("alert_idle()",timeout1Mins);
}
 
function alert_idle() {
	var answer = confirm("You have been idle for 13 minutes.  Click OK to stay logged in.")
	if (answer){

		reset_interval();
	}
	else{
		auto_logout();
	}
}
 
function auto_logout() {
  //this function will redirect the user to the logout script
  window.top.location="logoff.asp";
}
</script>

<body onLoad="set_interval(); document.form1.exp_dat.focus();" onKeyPress="reset_interval();" onmousemove="reset_interval();" onclick="reset_interval();" onscroll="reset_interval();">

Open in new window

0
electricd7
Asked:
electricd7
2 Solutions
 
pdoelleCommented:
Have you considered popping up another window instead of using confirm()? The pop-up could emulate the functionality of the confirm() prompt; information can be passed back to the calling page using window.opener to get a handle to it. This would allow you to put a timeout on the pop-up after which is can close itself. The timer on the calling page would contiinue without interruption.

The downside of this approach is that the dialog is not modal, and there is a risk of the pop-up getting hidden behind other windows.

Another idea is to display a normally-hidden <div> that contains the logoff warning. You might have to tweak it to keep it visible in IE if the page is long, since some versions of IE have problems with fixed divs.

This page has a good example of this in action: http://www.pascarello.com/AjaxSessionTimer.aspx
0
 
HainKurtSr. System AnalystCommented:
you cannot control alert/confirm message... either use a div element on page, or use custom plugins to mimic alert & confirm (like yahoo mail)

have a look at this code:

<script>
function showMsg(){
  document.getElementById("divMsg").style.display="none";
}
function hideMsg(){
  document.getElementById("divMsg").style.display="";
}
setInterval("showMsg()",10000);
setInterval("hideMsg()",15000);

</script>

<div id=divMsg style="position:absolute;left:200;top:200;display:none; border:1px solid silver;margin:10px">
will expire, press the button in 5 sec. <button onClick=''>Continue</button>
</div>

Open in new window

0
 
leakim971PluritechnicianCommented:
0
 
electricd7Author Commented:
OK, I scrapped the confirm box and went to a <div> tag as suggested by pdoelle.  Below I will copy the contents of my code, my css page, and my html page for future reference.  This code make the page wait 13 minutes before showing a dialog box, then if no input is given within an additional 2 minutes the page is refreshed back to the login page.  I have used the  parent.document.getElementById("Main_App").scrollWidth and Height as opposed to window.screen.width and height because this app is run within a top and bottom frame.
//JAVASCRIPT PORTION
//Inactivity functions below are used to automatically redirect the page to the logoff script when the user's session is up.

//Global variables
var timeoutMins = 1000 * 60 * 15; // 15 minutes 
var timeout1Mins = 1000 * 60 * 13; // 13 minutes
var isMozilla;
var objDiv = null;
var originalDivHTML = "";
var DivID = "";
var over = false;
var frame = parent.document.getElementById("Main_App");
var frameWidth = (frame.scrollWidth - 20)
var frameHeight = (frame.scrollHeight - 20)

function set_interval() {
  //the interval 'timer' is set as soon as the page loads  
  itimer=setInterval("auto_logout()",timeoutMins);
  atimer=setInterval("displayWindow()",timeout1Mins);
  
}
 
function reset_interval() {
  //resets the timer. The timer is reset on each of the below events:
  // 1. mousemove   2. mouseclick   3. key press 4. scrolling
  //first step: clear the existing timer
  clearInterval(itimer);
  clearInterval(atimer);
  //second step: implement the timer again
  itimer=setInterval("auto_logout()",timeoutMins);
  atimer=setInterval("displayWindow()",timeout1Mins);
}

function auto_logout() {
  //this function will redirect the user to the logout script
  window.top.location="logoff.asp";
}


function displayWindow()
//This function actually calls the floating DIV window
{
	var w, h, l, t;
	w = 400;
	h = 200;
	l = frameWidth/3;
	t = frameHeight/3;
	
	// no title		        
	// displayFloatingDiv('windowcontent', '', w, h, l, t);

	// with title		        
	displayFloatingDiv('windowcontent', 'Inactivity Warning', w, h, l, t);
}

function buildDimmerDiv()
{
    document.write('<div id="dimmer" class="dimmer" style="width:'+ frameWidth + 'px; height:' + frameHeight +'px"></div>');
}

function displayFloatingDiv(divId, title, width, height, left, top) 
{
	DivID = divId;

	document.getElementById('dimmer').style.visibility = "visible";

    document.getElementById(divId).style.width = width + 'px';
    document.getElementById(divId).style.height = height + 'px';
    document.getElementById(divId).style.left = left + 'px';
    document.getElementById(divId).style.top = top + 'px';
	
	var addHeader;
	
	if (originalDivHTML == "")
	    originalDivHTML = document.getElementById(divId).innerHTML;
	
	addHeader = '<table style="width:' + width + 'px" class="floatingHeader">' +
	            '<tr><td ondblclick="void(0);" onmouseover="over=true;" onmouseout="over=false;" style="cursor:move;height:18px">' + title + '</td>' + 
	            '<td style="width:18px" align="right"><a href="javascript:hiddenFloatingDiv(\'' + divId + '\');void(0);">' + 
	            '<img alt="Close..." title="Close..." src="close.jpg" border="0"></a></td></tr></table>';
	

    // add to your div an header	
	document.getElementById(divId).innerHTML = addHeader + originalDivHTML;
	
	
	document.getElementById(divId).className = 'dimming';
	document.getElementById(divId).style.visibility = "visible";


}


function hiddenFloatingDiv(divId) 
{
	document.getElementById(divId).innerHTML = originalDivHTML;
	document.getElementById(divId).style.visibility='hidden';
	document.getElementById('dimmer').style.visibility = 'hidden';
	
	DivID = "";
}

function MouseDown(e) 
{
    if (over)
    {
        if (isMozilla) {
            objDiv = document.getElementById(DivID);
            X = e.layerX;
            Y = e.layerY;
            return false;
        }
        else {
            objDiv = document.getElementById(DivID);
            objDiv = objDiv.style;
            X = event.offsetX;
            Y = event.offsetY;
        }
    }
}


function MouseMove(e) 
{
    if (objDiv) {
        if (isMozilla) {
            objDiv.style.top = (e.pageY-Y) + 'px';
            objDiv.style.left = (e.pageX-X) + 'px';
            return false;
        }
        else 
        {
            objDiv.pixelLeft = event.clientX-X + document.body.scrollLeft;
            objDiv.pixelTop = event.clientY-Y + document.body.scrollTop;
            return false;
        }
    }
}

function MouseUp() 
{
    objDiv = null;
}


function init()
{
    // check browser
    isMozilla = (document.all) ? 0 : 1;


    if (isMozilla) 
    {
        document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
    }

    document.onmousedown = MouseDown;
    document.onmousemove = MouseMove;
    document.onmouseup = MouseUp;

    // add the div
    // used to dim the page
	buildDimmerDiv();

}

// call init
init();


//CSS PORTION
div.dimmer 
{
	visibility: hidden;
	position:absolute;
	left:0px;
	top:0px;
	font-family:verdana;
	font-weight:bold;
	padding:40px;

	background-image:url(gray.png);
	/* ieWin only stuff */
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='gray.png');
}


div.dimming {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	background-color: #ffffff;
	position:absolute;
	/* set z-index higher than possible */
	z-index:10000;
	visibility: hidden;
	
	border-style: solid;
	border-color: #999999;
	border-width: 1px;

}

table.floatingHeader
{
	background-color: #990033;
	color:#ffffff;
}

//HTML PORTION
<body onLoad="set_interval();" onKeyPress="reset_interval();" onmousemove="reset_interval();" onclick="reset_interval();" onscroll="reset_interval();">

stuff stuff stuff

<!--  the following hidden div will be used by the dimming confirmation script -->
<div style="width: 518px; height: 287px;visibility:hidden" id="windowcontent">
            <table >
            <tr><td colspan="2"></td></tr>
            <tr>
            <td colspan="2"><br>You session has been idle for awhile.  If you do not respond to this prompt you will be automatically logged out shortly.  Would you like to remain logged into the system?</td>
            </tr>
            <tr>
            <td colspan="2" align="center">
              <input type="button" value="Yes" onclick="reset_interval();hiddenFloatingDiv('windowcontent');void(0);" style="width: 119px"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="No" onclick="auto_logout();" style="width: 119px"/>
            </td>
            </tr>
            </table>
</div>

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now