HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>visibility panel</title>
  <style>
    #badge {
      display: inline-block; padding: 8px 14px;
      border: 2px solid #333; font-weight: bold; letter-spacing: 0.04em;
    }
    #badge[data-state="visible"] { background: #e8f5e9; }
    #badge[data-state="hidden"] { background: #eeeeee; }
    #detail { margin-top: 10px; }
  </style>
</head>
<body>
  <p>Switch tabs to flip the badge.</p>
  <div id="badge">…</div>
  <pre id="detail"></pre>
  <script>
    var badge = document.getElementById("badge");
    var detail = document.getElementById("detail");
    function render() {
      var state = document.visibilityState;
      badge.textContent = state.toUpperCase();
      badge.dataset.state = state;
      detail.textContent =
        "document.hidden = " + document.hidden +
        " · updated " + new Date().toLocaleTimeString();
    }
    document.addEventListener("visibilitychange", render);
    render();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Document visibilitychange — status panel (Try It)