Wondering what’s next for npm?Check out our public roadmap! »

    ifvisible
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/ifvisible package

    1.1.0 • Public • Published

    ifvisible.js

    Crossbrowser & lightweight way to check if user is looking at the page or interacting with it.

    Check out the Demo or read below for code example or Check Annotated Source

    Installation

    From npm

    npm install ifvisible.js --save
    

    From Bower

    bower install ifvisible.js
    

    For Meteor

    mrt add ifvisible
    

    meteor package is provided by @frozeman via Atmosphere

    Examples

     
    // If page is visible right now
    if( ifvisible.now() ){
        // Display pop-up
        openPopUp();
    }
     
    // You can also check the page status
    // using `now` method
    if( !ifvisible.now('hidden') ){
      // Display pop-up if page is not hidden
      openPopUp();
    }
     
    // Possible statuses are:
    // idle: when user has no interaction
    // hidden: page is not visible
    // active: page is visible and user is active
     

    Handle tab switch or browser minimize states

     
    ifvisible.on("blur", function(){
        // example code here..
        animations.pause();
    });
     
    ifvisible.on("focus", function(){
        // resume all animations
        animations.resume();
    });
     

    ifvisible.js can handle activity states too, such as being IDLE or ACTIVE on the page

     
    ifvisible.on("idle", function(){
        // Stop auto updating the live data
        stream.pause();
    });
     
    ifvisible.on("wakeup", function(){
        // go back updating data
        stream.resume();
    });
     

    Default idle duration is 60 seconds but you can change it with setIdleDuration method

     
    ifvisible.setIdleDuration(120); // Page will become idle after 120 seconds
     

    You can manually trigger status events by calling them directly or you can set events with their names by giving first argument as a callback

     
    ifvisible.idle(); // will put page in a idle status
     
    ifvisible.idle(function(){
        // This code will work when page goes into idle status
    });
     
    // other methods are
    ifvisible.blur(); // will trigger idle event as well
    ifvisible.idle();
     
    ifvisible.focus(); // Will trigger wakeup event as well
    ifvisible.wakeup();

    You can set your smart intervals with ifvisible.js, if user is IDLE or not seeing the page the interval will automatically stop itself

     
    // If page is visible run this function on every half seconds
    ifvisible.onEvery(0.5, function(){
        // Do an animation on the logo only when page is visible
        animateLogo();
     
    });
     

    License

    It's MIT, Go crazy.

    Install

    npm i ifvisible

    DownloadsWeekly Downloads

    2,641

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • avatar