<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>

/* 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; }

/* 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());