Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Offline detection test</title>
  <style>
    * { font-family: sans-serif; }
    span {
      color: #fff;
      padding: 3px;      
    }
    .online {
      background: #0c0;
    }
    .offline {
      background: #c00; 
    }
    button {
      font-size: 14px;
    } 
  </style>
</head>
<body>
  <p>We're currently <span id="state" class="online">online</span></p>
  <p id="debug"></p>
  <button id="test">Test manually</button>
</body>
</html>
 
​
 
var state = document.getElementById('state');
​
function online() {
  state.innerHTML = state.className = 'online';  
}
​
function offline() {
  state.innerHTML = state.className = 'offline';
}
​
function test() {
  document.getElementById('debug').innerHTML = 'Testing @ ' + new Date();
  if (navigator.onLine) {
    online();
  } else {
    offline();
  }
}
​
window.addEventListener('online', online, false);
window.addEventListener('offline', offline, false);
​
document.getElementById('test').addEventListener('click', test, false);
​
test();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers