Skip to content

Instantly share code, notes, and snippets.

@mhulse

mhulse/not-online.js

Last active August 29, 2015 14:19
Show Gist options
  • Save mhulse/ce208d2c64f1ce160a6a to your computer and use it in GitHub Desktop.
Save mhulse/ce208d2c64f1ce160a6a to your computer and use it in GitHub Desktop.
Download ZIP
[not-online] Simplistic JavaScript code to detect if network is online/offline; "online" is assumed to be the default mode.
Raw
not-online.js
/*! not-online | https://gist.github.com/mhulse/ce208d2c64f1ce160a6a */
;(function(document, navigator) {
!navigator.onLine && (document.documentElement.className = document.documentElement.className.replace(/\bonline\b/, 'not-online'));
}(document, navigator));
/*! not-online uglified | https://gist.github.com/mhulse/ce208d2c64f1ce160a6a */!function(document,navigator){!navigator.onLine&&(document.documentElement.className=document.documentElement.className.replace(/\bonline\b/,"not-online"))}(document,navigator);
Raw
zzz.html
<!doctype html>
<html class=online lang=en>
<head>
<meta charset=utf-8>
<script>/*! not-online uglified | https://gist.github.com/mhulse/ce208d2c64f1ce160a6a */!function(document,navigator){!navigator.onLine&&(document.documentElement.className=document.documentElement.className.replace(/\bonline\b/,"not-online"))}(document,navigator);</script>
<title>blah</title>
<style>
.not-online .msg { text-indent: -9999em; line-height: 0; display: inline-block; }
.not-online .msg::after { content: "offline"; text-indent: 0; line-height: initial; display: block; }
</style>
</head>
<body>
<p>We’re <span class=msg>online</span>!</p>
</body>
</html>
@mhulse
Copy link
Author

mhulse commented Apr 13, 2015

See also: no-x.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment