Link to home
Start Free TrialLog in
Avatar of electricd7
electricd7

asked on

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

SOLUTION
Avatar of pdoelle
pdoelle
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of electricd7
electricd7

ASKER

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