connection_status.js

(function () {
    var displayOnlineStatus = document.getElementById("online-status"),
        isOnline = function () {
            displayOnlineStatus.innerHTML = "Online";
            displayOnlineStatus.className = "online";
        },
        isOffline = function () {
            displayOnlineStatus.innerHTML = "Offline";
            displayOnlineStatus.className = "offline";
        };
        
    if (window.addEventListener) {
        window.addEventListener("online", isOnline, false);
        window.addEventListener("offline", isOffline, false);
    } else {
        document.body.ononline = isOnline;
        document.body.onoffline = isOffline;
    }
})();

status.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Online/Offlline events</title>
</head>

<body>
    <div>        
        <div role="main">
            <section id="main-content">
                
                <h3>
                    You are 
                    <strong id="online-status" class="online">Online</strong>
                </h3>
            </section>
        </div>
    </div>
</body>
</html>