"Reachable Online/Offline"
Bootstrap 3.3.0 Snippet by TechSoul

1
2
3
4
5
6
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="reach_notify"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
/* Snippet from TechSoul.in */
/*Reach Notify*/
#reach_notify { position: fixed; bottom:5px; right:5px; background:#FFF; color:#333; display: block; padding:7px; font-weight: bold; border-radius:10px; }
#reach_notify.on { position: fixed; bottom:5px; right:5px; background:#074001; color:#fff; display: block; padding:7px 10px; font-weight: bold; border-radius:10px; }
#reach_notify.off { position: fixed; bottom:5px; right:5px; background:#EF2626; color:#fff; display: block; padding:7px 10px; font-weight: bold; border-radius:10px; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
/* Snippet from TechSoul.in */
function reach_notify()
{
var randn = Math.floor((Math.random() * 100) + 1);
$.ajax({
url: "http://www.google.com?t="+randn,
context: document.body,
error: function(jqXHR, exception) {
//alert('offline')
var d = document.getElementById("reach_notify");
d.className = "off",
d.innerHTML = "Offline"
},
success: function() {
// alert('Online')
var d = document.getElementById("reach_notify");
d.className = "on",
d.innerHTML = "Online"
}
});
}
setInterval(function(){
reach_notify()}, 5000);
document.getElementById("reach_notify").addEventListener("click", reach_notify());
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: