playing with online/offline events

by Ronny

HTML

<div class="load indicator">Load</div>
<div class="connection indicator">Connection</div>

CSS

body {font-family: sans-serif; margin: 10px;}

.indicator {margin: 1em 0; position: relative;}
.indicator:before {width: 10px; height: 10px; border-radius: 5px; margin: 1em; background: grey; content: " "; display: inline-block; position: absolute; left: -30px; top: -11px;}

.enabled:before {background: green;}
.disabled:before {background: red;}

JavaScript

var connectionIndicator = $('.connection.indicator');

$(window).bind('load', function(){
    $('.load.indicator').addClass('enabled');
    window.navigator.onLine ? updateOnline() : updateOffline();
});

function updateOnline(){
    connectionIndicator.removeClass('disabled').addClass('enabled');
}

function updateOffline(){
    connectionIndicator.removeClass('enabled').addClass('disabled');
}

$(window).bind('online', updateOnline);
$(window).bind('offline', updateOffline);