Countdown time when tab is out of focus

Question

I'm trying to calculate time when user is out of current tab. if user is changes tab for more than 3 times, page should navigate to another page. OR if user changes tab for more than 10 seconds, page should navigate to another page. So far i got this only:

$(window).blur(function() {
   alert("You are navigating to other tabs or window. this is your first warning. Doing this again may cancel your current examination.");
});

i need something like this:

    if (user changes tab){
     //display warning
    }
    if(user changes tab for more than 3 times){
        //navigate to another page
    }
    if(user changes tab for more than 10 seconds){
        //navigate to another page
    }

can you post your tab html and how it get visible or selected? — Bhushan Kawadkar, Aug 28 '18 at 07:12
@BhushanKawadkar I did nothing in html, i just called the function i posted. it is jQuery pre-written function to detect if current tab is out of focus. — Weird Dude, Aug 28 '18 at 07:15
I think you need to save how many times your user changed the tab in the localStorage and use that in your conditions — Ionel Lupu, Aug 28 '18 at 07:15

score 0 · Answer 1 · answered Aug 28 '18 at 07:19

Answer originally came from: https://stackoverflow.com/a/1760268/680578

His code snippet can be found here: http://jsfiddle.net/meehanman/40edh944/

You are able to keep track of active/inactive tabs using jQuery's focus and blur. You should be able to use a global variable to keep track of the amount of times the user did not have their focus on your tab. Displaying your warning at the first time, and your second warning after 3 times.

Whether it has been 10 seconds can be done using a setInterval countdown for example. Which you can clear as soon as your user comes back to your tab.

var counter = 0;

$(window).focus(function() {
    //do something
});

$(window).blur(function() {
    //do something
});

Countdown time when tab is out of focus

1 Answers1