Offline.js - checking while online?

Here is my code below.

Simply, I don't know how to make it that if the connection transitions from ONLINE to OFFLINE, that the event which updates the css ( will be triggered.

If it goes from OFFLINE to ONLINE, then it updates within 10 seconds. But I'm not sure how to have it work in the other direction?

It seems if I call Offline.check(); manually it will update, but ideally I'd like it to do this automatically. Any ideas welcome.

Offline.options = {
    checkOnLoad: true,
    checks: {
        image: {
            url: ''
        active: 'image'
    reconnect: {
        initialDelay: 10, // only check every 10 seconds
        delay: 10



You can use Offline.on(event, handler, context) to know when connection goes online/offline.

Like if connection goes offline

Offline.on('up', function gotOnline(){
  console.log("I am online");

Offline.on('down', function gotOffline(){
  console.log("I am offline");

If you read the documentation here, You can see that offline has certain properties such as Offline.check(), Offline.state.

You can use either of these to display the CSS you need.

For example:

    /*assuming that you have that div in your css set to hidden or something else*/
    $("#offlineDiv").show('100'); //Just an imaginary div

Then when connection goes offline.. Use

offline.on(down, handler)..

Now this handler makes use of that above piece of CSS switch to activate that div.


Here is my code using ternary operator

connectionStatus = navigator.onLine ? 'online' : 'offline';
<script src=""></script>


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.