Jquery-idleTimeout - Demo Page - by JillElaine

GitHub Project Page - https://github.com/JillElaine/jquery-idleTimeout

To see the 'idle timeout' functionality, do not press any keys, click your mouse or scroll your mousewheel for 15 seconds.

GitHub Wiki Page - https://github.com/JillElaine/jquery-idleTimeout/wiki

Read the Wiki for more information!

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/tab is logged out, all other windows & tabs will log out too.
• If warning dialog appears on one window or tab, 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 or newer is required. https://github.com/marcuswestin/store.js
• JQuery version 1.7 or newer and JQuery UI 1.9 or newer are required. You can load Google's hosted JQuery API. Put these statements in your page's 'head' section.
• <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
• <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/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 the warning dialog is enabled:
• If no activity events are detected on any 'same domain' windows & tabs within the 'idleTimeLimit', warning dialog will appear will appear on all 'same domain' windows/tabs.
• If the warning dialog is not disabled, 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.
• Warning dialog box includes 'Time Remaining' countdown timer
• If neither button on the warning dialog box is clicked within the 'dialogDisplayLimit', all 'same domain' windows & tabs will logout.
• If the warning dialog is disabled:
• If no activity events are detected on any 'same domain' windows & tabs within the 'idleTimeLimit', all 'same domain' windows & tabs will logout.
• User will receive no warning before logout

• Activity events to detect are configurable: clicks, keypresses, scrolls, mouse movements and more are options.
• http://www.quirksmode.org/dom/events/
• https://developer.mozilla.org/en-US/docs/Web/Reference/Events

Try it! Click here to open another browser window/tab of this page and then try the two 'Logout' buttons below.

Your Site's Logout Button - Configuration

If user voluntarily logs out of your site with your site's 'Logout' button (instead of timing out), you can force all 'same domain' windows & tabs to also log out too! Use this small snippet of code, $.fn.idleTimeout().logout();, on the 'onclick' function of your 'Logout' button.

Example Logout Button

	<input type="button" value="Logout All Windows/Tabs" onclick="$.fn.idleTimeout().logout();" title="This button will logout ALL open 'same domain' Windows and Tabs" class="button logoutall float_left" />
	

The Demo Runtime Configuration

• The idle time limit, 'idleTimeLimit', is set to 15 seconds.
• 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({
      redirectUrl: 'https://github.com/JillElaine/jquery-idleTimeout', // redirect to this url
      idleTimeLimit: 15, // 15 seconds
      activityEvents: 'click keypress scroll wheel mousewheel', // separate each event with a space
      dialogDisplayLimit: 30, // Time to display the warning dialog before logout (and optional callback) in seconds
      sessionKeepAliveTimer: false // Set to false to disable pings.
    });
  });
</script>