Solved

Automatically respond to javascript confirmation after x seconds

Posted on 2011-02-11
4
2,420 Views
Last Modified: 2012-05-11
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
Comment
Question by:electricd7
4 Comments
 
LVL 6

Assisted Solution

by:pdoelle
pdoelle earned 250 total points
ID: 34871864
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
 
LVL 51

Accepted Solution

by:
HainKurt earned 250 total points
ID: 34872049
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
 
LVL 82

Expert Comment

by:leakim971
ID: 34873370
0
 

Author Comment

by:electricd7
ID: 34873938
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now