ifvisible.js JavaScript Library Demos

Download Back To CSSScript.Com

Add idle and visibility detection to your web app with ifvisible.js. Listen for blur, focus, idle, wakeup, and page lifecycle events with a single import.

Version 3.x

Supported checking

Now true

Idle limit 30s

Switch tabs, minimize the browser, scroll, type, or leave the page untouched to see each demo update.

Live status monitor

now(), status, statusChanged

active

Active

The page is visible and recent input was detected.

ifvisible.now() true

ifvisible.now("hidden") false

ifvisible.now("idle") false

Idle detector

getIdleInfo()

30.0s

Time left before idle

The meter resets on mouse, keyboard, touch, scroll, or focus activity.

Manual controls

setIdleDuration(), idle(), blur(), focus()

Idle duration 30s

Smart interval

onEvery(1, callback)

The counter ticks once per second while the page is active. It pauses when the page is idle or hidden.

Lifecycle events

freeze, resume, destroy()

The page listens for Page Lifecycle events and reports them in the event stream. The cleanup demo creates a temporary instance, attaches a listener, then destroys it.

Temporary instance not created

Lifecycle support listening

Event stream

focus, blur, idle, wakeup, statusChanged

Code used by the demos

Browser global or ES module

<!-- CDN browser global -->
<script src="https://unpkg.com/ifvisible.js"></script>
<script>
  ifvisible.on("blur", pauseVideo);
  ifvisible.on("focus", resumeVideo);
  ifvisible.on("idle", pauseUpdates);
  ifvisible.on("wakeup", resumeUpdates);
</script>

// Smart interval and cleanup
import ifvisible, { IfVisible } from "ifvisible.js";

const timer = ifvisible.onEvery(1, poll);

timer.pause();
timer.resume();
timer.stop();

const instance = new IfVisible();
instance.destroy();