ifvisible
Version:
Crossbrowser & lightweight way to check if user is looking at the page or interacting with it. (wrapper around HTML5 visibility api)
94 lines (87 loc) • 4.34 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="HandheldFriendly" content="true" />
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-responsive.min.css" rel="stylesheet">
<title>ifvisible.js test page</title>
<script src="../src/ifvisible.js"></script>
<script type="text/javascript">
function d(el){
return document.getElementById(el);
}
ifvisible.setIdleDuration(5);
ifvisible.on('statusChanged', function(e){
d("result").innerHTML += (e.status+"<br>");
});
ifvisible.idle(function(){
d("result2").innerHTML = "(-_-) Good bye. ZzzZZzz...";
document.body.style.opacity = 0.5;
});
ifvisible.wakeup(function(){
d("result2").innerHTML = "(O_o) Hey!, you woke me up.";
document.body.style.opacity = 1;
});
ifvisible.onEvery(0.5, function(){
// Clock, as simple as it gets
var h = (new Date()).getHours();
var m = (new Date()).getMinutes();
var s = (new Date()).getSeconds();
h = h < 10? "0"+h : h;
m = m < 10? "0"+m : m;
s = s < 10? "0"+s : s;
// Update clock
d("result3").innerHTML = (h+':'+m+':'+s);
});
setInterval(function(){
var info = ifvisible.getIdleInfo();
// Give 3% margin to stabilaze user output
if(info.timeLeftPer < 3){
info.timeLeftPer = 0;
info.timeLeft = ifvisible.getIdleDuration();
}
d("seconds").innerHTML = parseInt(info.timeLeft / 1000), 10;
d("idlebar").style.width = info.timeLeftPer+'%';
}, 100);
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<h1>ifvisible.js test page</h1>
</div>
<div class="row-fluid">
<div class="span6">
<p class="lead">Idle duration is set to <span id="idleTime" class="label label-warning">00 seconds</span>, so that you can see the effect easily.
<ul>
<li>Try switching between tabs or minimizing the window. and look for the event log</li>
<li>Do nothing and wait for idle time to fill. Counter should stop.</li>
<li>While Idle, try moving the mouse or pressing any key. Page should wake up</li>
</ul>
<div class="well">
If you wait <span class="label label-warning" id="seconds">00</span> seconds I'll sleep.
<div class="progress">
<div class="bar" id="idlebar" style="width: 0%;"></div>
</div>
<div id="result2">(^_^) Hey, there.</div>
</div>
<div class="well">
This simple clock <span id="result3" class="badge badge-info">0</span> is updated via <code>onEvery</code> method. It should stop when page is not active (idle,hidden) and should continue with current time when page is active.
</div>
</div>
<div class="span6">
<div id="result">
<p>Event log.</p>
</div>
</div>
</div>
<script type="text/javascript">
var dur = (ifvisible.getIdleDuration() / 1000);
d('seconds').innerHTML = dur;
d('idleTime').innerHTML = dur + " seconds";
</script>
</div>
</body>
</html>