Sometimes you may want to take more control over your user Browser when he/she opens your website in a Browser Window.
For example – you want to know when the user closes the Browser Tab and execute your code.
If you want to know how much time the user active on your website, in this case, you can use JavaScript. Using that you only enabled the timer when the user is an active tab on your website.
Or you want to run the Animation only when the user is active otherwise stop it.
This kind of functionality you have seen on websites or PTC sites that provide ads viewing to the users. They only count the ads view when the user is active on their website until a given time otherwise they cancel the view after the specific time.
In this tutorial, I show how you can use JavaScript to detect whether Browser Tab Window is active or not.
Contents
1. Example
For finding the Browser Tab is currently active or not I defined two events on window –
- focus – for detecting active state, when this event trigger I start the timer
- blur – for detecting inactive, state. From where I stop the timer by clearing the Interval.
On focus event, define the code that you want to execute when it is active and within blur event define which you want to do when it is inactive.
Completed Code
<div class='container'>
Seconds : <div id='seconds'></div>
</div>
<!-- Script -->
<script type='text/javascript'>
var count = 0;
var myInterval;
// Active
window.addEventListener('focus', startTimer);
// Inactive
window.addEventListener('blur', stopTimer);
function timerHandler() {
count++;
document.getElementById("seconds").innerHTML = count;
}
// Start timer
function startTimer() {
console.log('focus');
myInterval = window.setInterval(timerHandler, 1000);
}
// Stop timer
function stopTimer() {
window.clearInterval(myInterval);
}
</script>
2. Conclusion
Within the example, I use it to count the number of seconds the user active on the website. You can also pause the playing video or stop some of the scripts when it is not using the website.
If you found this tutorial helpful then don't forget to share.
When the pages have iframes this doesn’t workout.
I mean when the focus is moved onto the iframe’s content, the window blur event will be called and then the timer would be stopped.
To check whether your site (on tab) is active or not, you could use like:
setInterval(function () {
console.log(document.hasFocus());
}, 1000);
thak you
What do you think of Page Visibility API. This seems like a built in solution rather than keeping track with focus and blur events.
I came across your post about page animations, but I’m still unsure how to do it. I don’t code by hand, but have been developing sites for a while, I just never got the hang of JS or JQuery, my patience level wasn’t quite there.
My question is: I’m using Webflow for a site. I have a page animation, with multiple interactions. After publish, the animation is fine if a stay on that tab. If I click another tab or window, it’s weird. The first part stops/pauses, but the other interactions keep going. Upon returning, it’s a jumbled mess. I’ve tested a few seconds, 10, 20, it’s all the same.
I really wish I knew Javascript indepth. I was hoping you could help me get a simple script or snippet to insert for this page.
I have completely finished the page, so it’s best I stop to figure this out. If you need the site page let me know. If it’s simple I’d appreciate your help, however if it’s too involved I don’t mind paying or contributing for the assistance. I’m sure this issue will come up again as I finish the portfolio.
If you have time, I can jump on a screencast… or just talk via email. I sure hope you can help because I’ve sort of committed to this animation layout.
Would this above code work for me?
Instead of using setTimeout or set Interval for your animations, you should checkout requestAnimationFrame (rAF). It will stop animating when you move to another tab and restart appropriately – the added benefit is your animations become smoother too.
Using the web native rAF directly might be daunting, but luckily there is this tiny library that you can use like you would use setTimeout and setInterval, but it handles using rAF for you — https://github.com/d3/d3-timer.
It’s not my library, but I’ve used it in the past with great success and it has great code examples.
Good luck!
hi sir i want to ask something i want to put a function on a specific time when timer reaches on specific time it stops and do that function kindly help me on this
This is what I wanted! thanks)
You’re welcome.
After few hours wasted on google, finally something works 😀
Thanks
You’re welcome.