0

I have simple question about start animation of page when tab or page is active. I mean when user open the page but start browering another website until our website loads. then he click over our website tab and then animation loads. I've seen this on many websites but never know what's the trick to do this.

for the demo go to: http://swiftideas.net/ open website and go to another page, when website fully loaded, click on swiftideas website. You will see that a fade effect saying "HELLO. WE ARE SWIFT IDEAS" and Menu Also!

But it starts when you come over the page. pretty intelligent! Any clue how to achrive this?

I hope you people also like this!

user3178681
  • 63
  • 1
  • 10
  • This question has already been answered here : http://stackoverflow.com/questions/2720658/how-to-detect-when-a-tab-is-focused-or-not-in-chrome-with-javascript – Akaryatrh Jan 15 '14 at 23:12

1 Answers1

1

From: How to tell if browser/tab is active

You would use the focus and blur events of the window:

var interval_id;
$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(hard_work, 1000);
});

$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

To Answer the Commented Issue of "Double Fire" and stay within jQuery ease of use:

$(window).on("blur focus", function(e) {
    var prevType = $(this).data("prevType");

    if (prevType != e.type) {   //  reduce double fire issues
        switch (e.type) {
            case "blur":
                // do work
                break;
            case "focus":
                // do work
                break;
        }
    }

    $(this).data("prevType", e.type);
})
Community
  • 1
  • 1
Datamosh
  • 126
  • 1
  • 7