forked from thorst/jquery-idletimer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
103 lines (70 loc) · 3.13 KB
/
demo.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
<html>
<head>
<title>Idle Timer Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="jquery.idle-timer.js"></script>
</head>
<body>
<h1>Idle Timer Example</h1>
<h3><a href="http://paulirish.com/2009/jquery-idletimer-plugin">View full post about the jQuery IdleTimer here</a></h3>
<p>The idle timer is built on <a href="http://jquery.com/">jQuery</a> and provides two events: <code>idle</code> and <code>active</code>, which fire when the user's idle state has changed.</p>
<p>This example has an idle timeout of <span id="timeout">10</span> seconds. When you move your mouse over the page or start typing, you're considered "active". The status at the top of the screen changes to indicate your current state.</p>
<p>Now, as of version 0.9, <b>the textarea has its own idletimer instance</b> set to <span id="stimeout">10</span> seconds.</p>
<div id="status" style="padding: 5px;"> </div>
<form>
<label for="comment">Textarea:</label><br />
<textarea rows="10" cols="30" id="comment" name="comment"></textarea><br />
<input type="submit" value="Button" />
</form>
<script type="text/javascript">
(function($){
var timeout = 5000;
$(document).bind("idle.idleTimer", function(){
$("#status").html("User is idle :(").css("backgroundColor", "silver");
});
$(document).bind("active.idleTimer", function(){
$("#status").html("User is active :D").css("backgroundColor", "yellow");
});
$.idleTimer(timeout);
// correct the page
$('#timeout').text(timeout/1000);
})(jQuery);
</script>
<script type="text/javascript">
(function($){
var stimeout = 3000;
$('textarea').bind("idle.idleTimer", function(){
$('textarea').val(function(i,v){
return v + "textarea has been idle for "+ stimeout/1000 + ' seconds\n';
}).css("backgroundColor", "silver");
});
$('textarea').bind("active.idleTimer", function(){
$('textarea').val(function(i,v){
return v + "User is active, again! :D\n";
}).css("backgroundColor", "yellow");
});
$('textarea').idleTimer(stimeout);
// correct the page
$('#stimeout').text(stimeout/1000);
})(jQuery);
</script>
<a href="#">launch dialog</a>
<div id="dia"><h4>I'm the dialog</h4></div>
<script>
function launch(){
$('#dia').dialog({
bgiframe: true,
height: 140,
modal: true
});
return false;
}
$(function(){
$('#dia').prev().click(launch);
})
</script>
test
</body>
</html>