Trigger a event when the user is on the page

Question

I have this code

$(document).ready(function(){
    var fade_in = function(){
        $(".quote").fadeIn();
    }
    setTimeout(fade_in, 2000);
    var fade_out = function() {
      $(".quote").fadeOut();
    }
    setTimeout(fade_out, 10000);
});

What it does is that the div "quote" slowly fades in, stays for a few seconds and then fades out. What I want is that all this happens when the user is on the page, if you're not in the page,the text fades in, fades out and you miss it. How can I do that?

Run the animation only [if the tab has focus](http://stackoverflow.com/questions/7389328/detect-if-browser-tab-has-focus). — Streetlamp, Nov 08 '15 at 18:00
Just use `window.onfocus()` for that: http://stackoverflow.com/questions/7389328/detect-if-browser-tab-has-focus — Terry, Nov 08 '15 at 18:01

score 2 · Accepted Answer · answered Nov 08 '15 at 18:09

There are two ways

First : (bit old)

$(document).ready(function() {
  window.onfocus = function() {
    var fade_in = function() {
      $(".quote").fadeIn();
    }
    setTimeout(fade_in, 2000);
    var fade_out = function() {
      $(".quote").fadeOut();
    }
    setTimeout(fade_out, 10000);
  };
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quote">quote</div>

Second :

function getHiddenProp() {
  var prefixes = ['webkit', 'moz', 'ms', 'o'];

  // if 'hidden' is natively supported just return it
  if ('hidden' in document) return 'hidden';

  // otherwise loop over all the known prefixes until we find one
  for (var i = 0; i < prefixes.length; i++) {
    if ((prefixes[i] + 'Hidden') in document)
      return prefixes[i] + 'Hidden';
  }

  // otherwise it's not supported
  return null;
}

function isHidden() {
  var prop = getHiddenProp();
  if (!prop) return false;

  return document[prop];
}

// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
  var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
  document.addEventListener(evtname, visChange);
}

function visChange() {
  var txtFld = document.getElementById('visChangeText');

  if (txtFld) {
    if (!isHidden()) {
      var fade_in = function() {
        $(".quote").fadeIn();
      }
      setTimeout(fade_in, 2000);
      var fade_out = function() {
        $(".quote").fadeOut();
      }
      setTimeout(fade_out, 10000);

    };
  }
}
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div class="quote">quote</div>

First one made it, but now everytime I focus the page, the text appears again. What can I do so the text fades in and out just once? — Jay, Nov 08 '15 at 19:10
use `window.onfocus = null` to unbind the event. you may use it in your `fade_out` function. — Kishore Sahasranaman, Nov 09 '15 at 08:55

Ananta Prasad · Answer 2 · 2015-11-08T18:02:11.367

0

This will execute when page div visible

$(document).ready(function(){
        $( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
    });

edited Nov 08 '15 at 18:02

answered Nov 08 '15 at 17:59

Ananta Prasad

3,655
3
23
35

2

He/she wants it to run if the user focusses the tab. – Streetlamp Nov 08 '15 at 18:00

Trigger a event when the user is on the page

2 Answers2