Offline.js Simulate UI

Offline Simulate UI is an Offline.js plug-in that allows you to test how your pages respond to different connectivity states without having to use brute-force methods to disable your actual connectivity.

Try It Out!

Click on the checkbox on the left-hand side of the window and see how the page responds.

Notice that this page uses the Offline.js Chrome theme which you can see at the top of the page.

Try with the Offline.js Chrome notification View on GitHub

Demo

Have an account? Sign In
Login
I forgot my password
You can only sign in when you have an active internet connection.

Notes

When you include offline-simulate-ui.min.js on your page the following configuration settings are applied:

Usage

Install with Bower (or download from GitHub)

Add the Script to Your Page

Note: Make sure you reference Offline.js before this script. If you install with Bower, it will pull in Offline.js as a dependency.

Respond to Offline.js Events

<script>
    $(function(){

        var 
            $online = $('.online'),
            $offline = $('.offline');

        Offline.on('confirmed-down', function () {
            $online.fadeOut(function () {
                $offline.fadeIn();
            });
        });

        Offline.on('confirmed-up', function () {
            $offline.fadeOut(function () {
                $online.fadeIn();
            });
        });

    });
</script>