Skip to main content

Alert user before session expires, option to renew session


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> jQueryUI dialog session timeout countdown DEMO </TITLE>

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8rc1.custom.min.js"></script>

<!-- include smoothness jQueryUI theme -->

<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8rc1.custom.css">

<!-- jQuery idletimer plugin http://paulirish.com/2009/jquery-idletimer-plugin/ -->

<script type="text/javascript" src="js/jquery.idletimer.js"></script>

<style type="text/css">

 body {

 font-family:Arial,Geneva,Verdana,sans-serif;

 font-size: 0.8em;

 }

</style>

<script type="text/javascript">

 var idleTime = 2000; // number of miliseconds until the user is considered idle

 var initialSessionTimeoutMessage = 'Your session will expire in <span id="sessionTimeoutCountdown"></span>&nbsp;seconds.<br/><br />Click on <b>OK</b> to continue your session.';

 var sessionTimeoutCountdownId = 'sessionTimeoutCountdown';

 var redirectAfter = 10; // number of seconds to wait before redirecting the user

 var redirectTo = 'http://pure-essence.net/2010/02/14/jquery-session-timeout-countdown/'; // URL to relocate the user to once they have timed out

 var keepAliveURL = 'keepAlive.php'; // URL to call to keep the session alive

 var expiredMessage = 'Your session has expired. You are being logged out for security reasons.'; // message to show user when the countdown reaches 0

 var running = false; // var to check if the countdown is running

 var timer; // reference to the setInterval timer so it can be stopped

 $(document).ready(function() {

 // create the warning window and set autoOpen to false

 var sessionTimeoutWarningDialog = $("#sessionTimeoutWarning");

 $(sessionTimeoutWarningDialog).html(initialSessionTimeoutMessage);

 $(sessionTimeoutWarningDialog).dialog({

 title: 'Session Expiration Warning',

 autoOpen: false, // set this to false so we can manually open it

 closeOnEscape: false,

 draggable: false,

 width: 460,

 minHeight: 50,

modal: true,

 beforeclose: function() { // bind to beforeclose so if the user clicks on the "X" or escape to close the dialog, it will work too

 // stop the timer

 clearInterval(timer);



 // stop countdown

 running = false;



 // ajax call to keep the server-side session alive

 $.ajax({

 url: keepAliveURL,

 async: false

 });

 },

 buttons: {

 OK: function() {

 // close dialog

 $(this).dialog('close');

 }

 },

 resizable: false,

 open: function() {

 // scrollbar fix for IE

 $('body').css('overflow','hidden');

 },

 close: function() {

 // reset overflow

 $('body').css('overflow','auto');

 }

 }); // end of dialog





 // start the idle timer

 $.idleTimer(idleTime);



 // bind to idleTimer's idle.idleTimer event

 $(document).bind("idle.idleTimer", function(){

 // if the user is idle and a countdown isn't already running

 if($.data(document,'idleTimer') === 'idle' && !running){

 var counter = redirectAfter;

 running = true;



 // intialisze timer

 $('#'+sessionTimeoutCountdownId).html(redirectAfter);

 // open dialog

 $(sessionTimeoutWarningDialog).dialog('open');



 // create a timer that runs every second

 timer = setInterval(function(){

 counter -= 1;



 // if the counter is 0, redirect the user

 if(counter === 0) {

 $(sessionTimeoutWarningDialog).html(expiredMessage);

 $(sessionTimeoutWarningDialog).dialog('disable');

 window.location = redirectTo;

 } else {

 $('#'+sessionTimeoutCountdownId).html(counter);

 };

 }, 1000);

 };

 });



 });

</script>

</HEAD>



<BODY>

<h1>jQuery session timeout countdown with warning dialog</h1>

<p>

 This idle timeout countdown is triggered after 2 seconds. Keep your mouse and keyboard still!

<br /><br />

<a href="http://pure-essence.net/2010/02/14/jquery-session-timeout-countdown/">Return to Blog Post</a>

</p>

<div id="sessionTimeoutWarning" style="display: none"></div>

</BODY>

</HTML>


*******************************************************************************************
 Here’s my example with the jQueryUI dialog as the warning.
*******************************************************************************************

Comments

Post a Comment

Popular posts from this blog

10 jQuery Custom Scrollbar Plugins

10 jQuery Custom Scrollbar Plugins If you ever wanted to add some custom scrollbars to your website, to scroll the contents and the default browser scrollbars just doesn’t match up with your design, than make sure you check this list of 10 jQuery custom scrollbar plugins. Hope you find the following information helpful. 1. jScrollPane – custom cross-browser scrollbars Kelvin Luck’s jScrollPane was originally developed in December 2006. It is a jQuery plugin which provides you with custom scrollbars which work consistently across all modern browsers. You can style the scrollbars using simple CSS and they degrade gracefully where JavaScript is disabled. 2. Plugin JQuery : Scrollbar This page is written in french so use Google’s translate service to translate this page to your preferred language. Download is available for the plugin.  The purpose of this plugin is to add a scrollbar to the item of your choice, to view any content which is larger than the size – vizibl...
1 comment
Read more

List of Best and Worst practices for SEO

Keywords 1 Keywords in <title> tag This is one of the most important places to have a keyword because what is written inside the <title> tag shows in search results as your page title. The title tag must be short (6 or 7 words at most) and the the keyword must be near the beginning. +3 2 Keywords in URL Keywords in URLs help a lot - e.g. -  http://domainname.com/seo-services.html , where “SEO services” is the keyword phrase you attempt to rank well for. But if you don't have the keywords in other parts of the document, don't rely on having them in the URL. +3 3 Keyword density in document text Another very important factor you need to  check . 3-7 % for major keywords is best, 1-2 for minor. Keyword density of over 10% is suspicious and looks more like keyword stuffing, than a naturally written text. +3 4 Keywords in anchor text Also very important, especially for  the anchor text of inbound links , because if you have the...
Post a Comment
Read more

(Solved) Failure sending mail in Godaddy Server

(Solved) Failure sending mail in Godaddy Server I know that this is an old thread.  At the same time, I worked on this problem for two weeks.  I wish that I had the final answer a couple of weeks ago! If you have shared hosting at GoDaddy.com, you need to use these credentials WHILE your are developing your application: In the namespaces you have to add using System.Net.Mail; or if you are not using any .cs file the you can insert namespace as <% @ Import Namespace ="System.Net.Mail" %> //for mail(from,to,subject,message) MailMessage msg = new MailMessage("frommailid@yourdomain.com", " tomailid@yourdomain.com ", "hello" , "your message"); SmtpClient smtp = new SmtpClient (); smtp . Host = "smtpout.secureserver.net" ; // Only works locally (development time) smtp . EnableSsl = false ; smtp . UseDefaultCredentials = false ; smtp . Credentials = new System . Net . NetworkCredential ( "...
3 comments
Read more