JillElaine jquery-idleTimeout Demo Page

Code Page - https://github.com/JillElaine/jquery-idleTimeout

To see functionality, do not press any keys, click your mouse or scroll your mousewheel for 30 seconds.

Functions across multiple windows and tabs within the same domain

Try it! Click here to open another browser window/tab of this page.

• If a window or tab is logged out, all other windows and tabs will log out too.
• If warning dialog appears on one window/tab, a warning dialog appears on all other 'same domain' windows/tabs too.
• If 'Stay Logged In' button on warning dialog is clicked, warning dialogs on all 'same domain' windows/tabs will be dismissed too.
• If 'Log Out Now' button on warning dialog is clicked, all 'same domain' windows/tabs will log out too.

Requirements

• Marcus Westin's store.js version 1.3.4+ is required. https://github.com/marcuswestin/store.js
• JQuery version 1.7+ and JQuery UI are required. You can load Google's JQuery API. Put these statements in your page's 'head'
• <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
• <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>

Functionality & Features

• Works across multiple windows and tabs within the same domain thanks to Marcus Westin's store.js.
• Uses localStorage, globalStorage and userData behavior to 'communicate' across multiple browser windows/tabs without cookies or flash!
• If no activity events are detected on any 'same domain' windows/tabs within the 'idleTimeLimit', the warning dialog will appear will appear on all 'same domain' windows/tabs.
• Activity events to detect are configurable: clicks, keypresses, scrolls, and/or mouse movements are options.
• http://www.quirksmode.org/dom/events/
• https://developer.mozilla.org/en-US/docs/Web/Reference/Events
• The browser title changes on all 'same domain' windows/tabs when the warning dialog appears, and reverts back to the original title(s) if the warning dialog is dismissed.
• Includes 'time remaining to logout' countdown timer on warning dialog
• If neither button on the warning dialog box is clicked within the 'dialogDisplayLimit', all 'same domain' windows/tabs will redirect to the 'redirectUrl'.

Optional Functionality

If user manually logs out with a click of your site's 'Logout' button and not with use of the idleTimer function, you can force all 'same domain' windows/tabs to redirect to your 'redirectUrl' page by adding a small snippet of javascript to the user's 'redirectUrl' page. Note: all required scripts must be available on the 'redirectUrl' page for this to work.

Optional 'Manual Logout' Script

<script type="text/javascript">
  $(document).ready(function(){
    if (store.enabled) {
      store.set('idleTimerLoggedOut', true);
    } else {
      alert('Dependent file missing. Please see: https://github.com/marcuswestin/store.js');
    }
  });
</script>

The Demo Runtime Configuration

• The idle time limit, 'idleTimeLimit', is set to 30 seconds (30000 milliseconds).
• Activity events to detect, 'activityEvents', are set to 'click keypress scroll wheel mousewheel'.
• The warning dialog display limit, 'dialogDisplayLimit', is set to 30 seconds.
• The redirect page, 'redirectUrl', is set to https://github.com/JillElaine/jquery-idleTimeout.
• Session keep alive pings have been disabled.

The Demo Runtime Configuration Script

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $(document).idleTimeout({
      idleTimeLimit: 30000, // 30 seconds
      dialogDisplayLimit: 30000, // Time to display the warning dialog before redirect (and optional callback) in milliseconds. 30000 = 30 seconds, 180000 = 3 Minutes
      redirectUrl: 'https://github.com/JillElaine/jquery-idleTimeout', // redirect to this url
      activityEvents: 'click keypress scroll wheel mousewheel', // separate each event with a space
      sessionKeepAliveTimer: false, // Set to false to disable pings.
    });
  });
</script>