Create Session Timeout Alert Popup Using jQuery Plugin – jTimeout

by Posted on

If you want to apply session timeout message alert just before 1 minute of expiring session and user have privilege to extend session or logout then jTimeout is awesome jQuery plugin to do these type of things in less effort. jTimeout is a small yet highly configurable session timeout and keep-alive control implemented in jQuery.
session-timeout-alert-popup
This cross-tab jQuery plugin keeps track of time and lets a user know before their session times out so they can extend it. Then tells them when it has expired so they can login again. The coolest part about jTimeout is that if a user loads 4 tabs with jTimeout on them, only 1 will control the countdown. If a tab is closed, another one will take over counting down. If another tab is opened, the timer will be reset (since the session timeout was reset). The only time the timer isn’t reset but could/should be, is when an AJAX call is made to a page that doesn’t include jTimeout.


Libraries

Include the following required libraries on page.

<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script> <!-- Include jQuery -->
<script src='jAlert.min.js'></script> 
<script src='jTimeout.min.js'></script> <!-- Include this Plugin -->

JS

By calling single line of function activate the session timeout alert popup box.

 $(function(){
    $.jTimeout(options);
  });




Here are the list of option you can pass above function to customize session timeout alert popup box.

$(function(){
   $.jTimeout({
		flashTitle: true, 
		flashTitleSpeed: 500, 
		flashingTitleText: '**WARNING**', 
		originalTitle: document.title, 
 
		timeoutAfter: 1440, //pass this from server side to be fully-dynamic. For PHP: ini_get('session.gc_maxlifetime'); - 1440 is generally the default timeout
		heartbeat: 1, 
 
		extendOnMouseMove: true, 
		mouseDebounce: 30, 
		onMouseMove: false, 
 
		extendUrl: '/dashboard', 
		logoutUrl: '/logout', 
		loginUrl: '/login', 
 
		secondsPrior: 60, 
		onPriorCallback: false, 
 
		onClickExtend: false, 
 
		onTimeout: false, 
		onSessionExtended: false 
	}
   );
   $.jTimeout().getExpiration(); 
   $.jTimeout().getSecondsTillExpiration(); 
});

Set the default session length in PHP (Recommend for php based script)

$.jTimeout({ 'timeoutAfter': <?php echo ini_get('session.gc_maxlifetime'); ?> });

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by HTMLGuyLLC. Visit their official github repository for more information and follow for future updates.


Published by admin