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 notification which is found at the bottom left of the page.

Try with the Offline.js base Chrome theme 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>