Resume option when window is out of focus

Question

I am running a timer based on window focus. If the window is in focus then the timer will move ahead if not then a message will be shown. I am showing a focus out message in focusmsg div and hiding this div when the window is in focus. As a result the focus out message is not visible.

Now instead of showing a simple focus out message I want to show a resume button so that the user needs to click the resume button to ensure that the window is in focus after coming back to the window that was out of focus.

Remember the resume button should not disappear until the user makes sure the window is focused by clicking the resume button.

It would be great for me if you could provide a jsfiddle with your answer!

    if(w_focus) {
        $("#focusmsg").hide();

        var timer = 0;
        var full = 10;
        timer++;

        if(timer == full) {
            var show = "Full";
            $("#timmsg").html(show);
        }


        else {
            setTimeout(adTimer, 1000);
            $("#between").hide();
        }
    } else {
        setTimeout(adTimer, 2000);

        var msg = "Focus lost! Resume now";
        $("#focusmsg").html(msg);
    }


$(document).ready(function() {

        var hidden, change, vis = {
            hidden: "visibilitychange",
            mozHidden: "mozvisibilitychange",
            webkitHidden: "webkitvisibilitychange",
            msHidden: "msvisibilitychange",
            oHidden: "ovisibilitychange" /* not currently supported */
        };             
    for (hidden in vis) {
        if (vis.hasOwnProperty(hidden) && hidden in document) {
            change = vis[hidden];
            break;
        }
    }
    if (change)
        document.addEventListener(change, onchange);
    else if (/*@cc_on!@*/false) // IE 9 and lower
        document.onfocusin = document.onfocusout = onchange
    else
        window.onfocus = window.onblur = onchange;

    function onchange (evt) {
        evt = evt || window.event;
        if (evt.type == "focus" || evt.type == "focusin")
           window_focus = true;
        else if (evt.type == "blur" || evt.type == "focusout")
           window_focus = false;
        else        
           window_focus = this[hidden] ? false : true;
    }

});

Igor Antun · Accepted Answer · 2015-04-18T21:19:06.843

1

You could use the following to set the w_focus variable to true when the resume button is clicked. Notice you would have to remove the window.onfocus function and just use this instead, so it would only set the w_focus variable to true when the user actually clicks the resume button.

Live Example:

var w_focus = true;

window.onblur = function() {
  w_focus = false;
  $('#resume-button').show();
}

$('#resume-button').on('click', function() {
  w_focus = true;
  $('#resume-button').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="resume-button" style="display:none">Resume</button>

(try running this code snippet and then going to another the tab or opening another application, and then coming back. you should see the resume button, which will just disappear and set the w_focus variable to true once you click it)

Link to the working JSFiddle example: http://jsfiddle.net/3tzmeta4/

edited Apr 18 '15 at 21:19

answered Apr 18 '15 at 21:13

Igor Antun

116
1
2
14

Don't know why but the resume button(onclick function) is not working with my code.I have updated my post providing more info for your convenience .It would be better if you provide JSFiddle example based on my code! – query Apr 21 '15 at 21:05
There is a JSFiddle example in the bottom of my answer: http://jsfiddle.net/3tzmeta4/ – Igor Antun Apr 21 '15 at 22:55
@query that should work: https://jsfiddle.net/nvobhaor/1/ - You were mixing up codes. – Igor Antun Apr 23 '15 at 00:32
i am not seeing any resume button on focus out! – query Apr 23 '15 at 21:44
that's because you need to focus in first (click the result area), and you won't see the resume button if you focus out after the 'Full' message is shown. that was how your code was like, and it's working just fine now ;) – Igor Antun Apr 23 '15 at 23:19
I need a little bit modification!The problem is when i click the result page only then it detects the focus out if i don't click the result page it always assume that the window is in focus though i am switching between tabs opening new applications.So it would be better if it could detect focus out without clicking the result page! – query Apr 27 '15 at 23:02
It's working properly, the problem is with JSFiddle, which requires you to first focus the result page. If you run that code in an independent window, it will work as you want :) – Igor Antun Apr 28 '15 at 00:04
problem is i am showing the timer inside a frame so i need to click the frame portion first,otherwise it is not working! – query Apr 28 '15 at 00:19
Fixed as in http://stackoverflow.com/questions/29720294/active-window-detection/29721373?noredirect=1#comment47939126_29721373 - Updated JSFiddle: https://jsfiddle.net/nvobhaor/3/ – Igor Antun Apr 28 '15 at 00:44

Resume option when window is out of focus

1 Answers1