-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (107 loc) · 7.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JillElaine jquery-idleTimeout - Demo Page</title>
<link type="text/css" rel="stylesheet" href="http://jillelaine.github.io/main.css"/>
<link type="text/css" rel="stylesheet" href="http://jillelaine.github.io/jquery-ui-1.8.21.custom.css"/>
<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>
<script src="https://raw.githubusercontent.com/marcuswestin/store.js/master/store.min.js" type="text/javascript"></script>
<script src="https://raw.githubusercontent.com/JillElaine/jquery-idleTimeout/master/jquery-idleTimeout.js" type="text/javascript"></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
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>
</head>
<body>
<div>
<div class="main_banner">
<h1>JillElaine jquery-idleTimeout Demo Page</h1>
</div>
<div class="main_content">
<h2>Code Page - <a href="https://github.com/JillElaine/jquery-idleTimeout">https://github.com/JillElaine/jquery-idleTimeout</a></h2>
<p>To see functionality, do not press any keys, click your mouse or scroll your mousewheel for 30 seconds.</p>
<h3>Functions across multiple windows and tabs within the same domain</h3>
<p><a href="http://jillelaine.github.io" target="_blank">Try it! Click here to open another browser window/tab of this page.</a></p>
<ul>
<li>If a window or tab is logged out, all other windows and tabs will log out too.</li>
<li>If warning dialog appears on one window/tab, a warning dialog appears on all other 'same domain' windows/tabs too.</li>
<li>If 'Stay Logged In' button on warning dialog is clicked, warning dialogs on all 'same domain' windows/tabs will be dismissed too.</li>
<li>If 'Log Out Now' button on warning dialog is clicked, all 'same domain' windows/tabs will log out too.</li>
</ul>
<h3>Requirements</h3>
<ul>
<li>Marcus Westin's store.js version 1.3.4+ is required. <a href="https://github.com/marcuswestin/store.js" target="_blank">https://github.com/marcuswestin/store.js</a></li>
<li>JQuery version 1.7+ and JQuery UI are required. You can load Google's JQuery API. Put these statements in your page's 'head'</li>
<ul>
<li><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script></li>
<li><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script></li>
</ul>
</ul>
<h3>Functionality & Features</h3>
<ul>
<li>Works across multiple windows and tabs within the same domain <strong>thanks to Marcus Westin's store.js.</strong></li>
<ul>
<li>Uses localStorage, globalStorage and userData behavior to 'communicate' across multiple browser windows/tabs without cookies or flash!</li>
</ul>
<li>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.</li>
<ul>
<li>Activity events to detect are configurable: clicks, keypresses, scrolls, and/or mouse movements are options.</li>
<li><a href="http://www.quirksmode.org/dom/events/" target="_blank">http://www.quirksmode.org/dom/events/</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events" target="_blank">https://developer.mozilla.org/en-US/docs/Web/Reference/Events</a></li>
</ul>
<li><strong>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.</strong></li>
<li>Includes 'time remaining to logout' countdown timer on warning dialog</li>
<li>If neither button on the warning dialog box is clicked within the 'dialogDisplayLimit', all 'same domain' windows/tabs will redirect to the 'redirectUrl'.</li>
</ul>
<h3>Optional Functionality</h3>
<p>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: <strong>all required scripts</strong> must be available on the 'redirectUrl' page for this to work.</p>
<p><strong>Optional 'Manual Logout' Script</strong></p>
<p>
<script type="text/javascript">
<br /> $(document).ready(function(){
<br /> if (store.enabled) {
<br /> store.set('idleTimerLoggedOut', true);
<br /> } else {
<br /> alert('Dependent file missing. Please see: https://github.com/marcuswestin/store.js');
<br /> }
<br /> });
<br /></script>
</p>
<h3>The Demo Runtime Configuration</h3>
<ul>
<li>The idle time limit, 'idleTimeLimit', is set to 30 seconds (30000 milliseconds).</li>
<li>Activity events to detect, 'activityEvents', are set to 'click keypress scroll wheel mousewheel'.</li>
<li>The warning dialog display limit, 'dialogDisplayLimit', is set to 30 seconds.</li>
<li>The redirect page, 'redirectUrl', is set to https://github.com/JillElaine/jquery-idleTimeout.</li>
<li>Session keep alive pings have been disabled.</li>
</ul>
<h3>The Demo Runtime Configuration Script</h3>
<p>
<script type="text/javascript" charset="utf-8">
<br /> $(document).ready(function(){
<br /> $(document).idleTimeout({
<br /> idleTimeLimit: 30000, // 30 seconds
<br /> dialogDisplayLimit: 30000, // Time to display the warning dialog before redirect (and optional callback) in milliseconds. 30000 = 30 seconds, 180000 = 3 Minutes
<br /> redirectUrl: 'https://github.com/JillElaine/jquery-idleTimeout', // redirect to this url
<br /> activityEvents: 'click keypress scroll wheel mousewheel', // separate each event with a space
<br /> sessionKeepAliveTimer: false, // Set to false to disable pings.
<br /> });
<br /> });
<br /></script>
</p>
</div>
</div>
</body>
</html>