CODEWITHSUNDEEP
javascriptjqueryhtml
alexx0186
alexx0186

Reputation: 1557

Why is $(document).blur() and $(document).focus() not working with Safari or Chrome?

I am making a counter which counts down when document is on focus. It stops counting down when it's on blur.

It is working in FF, but with Safari and Chrome, the counter doesn't work at all.

Is there a compatibility problem with Safari/Chrome?

All I'm using is $(document).blur() and $(document).focus(), and there are both within a $(document).ready() block. 

var tm;
$(document).ready(function(){   

        var seconds = 50;
        $('#timer').html(seconds);
        countdown();

    $(window).focus(function(){
         function countdown(){ 
         if (seconds > 0) {
            seconds--; 
            $('#timer').text(seconds);
            tm = setTimeout(countdown,1000);
            }
        if (seconds<=0){ 
            $('#timer').text('Go');
            }   
        }); 



    $(window).blur(function(){
        clearTimeout(tm);
        seconds++;
        $('#timer').text(seconds);

    });
});

Upvotes: 4

Views: 15025

Answers (1)

Dmytro Shevchenko
Dmytro Shevchenko

Reputation: 34591

I've always used $(window).focus() and $(window).blur(). Try these instead.

Also, note that in FF and IE the "focus" event fires on ~document load, while in Chrome and Safari it only fires if the window had lost focus before and now it has regained it.

UPD: Now as you pasted your code, I reworked it to (hopefully) fit your purpose:

var tm;
var seconds = 50;
var inFocus = true;

function countdown() {
    if (seconds > 0) {
        seconds--;
    }

    if (seconds <= 0) {
        $('#timer').text('Go');
    }
    else {
        $('#timer').text(seconds);
        tm = setTimeout(countdown, 1000);
    }
}

$(function() {
    $('#timer').html(seconds);
    countdown();

    $(window).focus(function() {
         if(!inFocus) {
             countdown();
         }
    });

    $(window).blur(function() {
        inFocus = false;
        clearTimeout(tm);
        seconds++;
        $('#timer').text(seconds);
    });
});

Upvotes: 13

Related Questions