I'm looking for an event which will fire whenever the user switches away from the page to another tab, and another event which fires when the user switches back to the tab again.
window.onblur and window.onfocus don't seem to work correctly across all browsers
Is there a proxy I could look at in order to synthesize this event?
You can also try and use VisibilityAPI.
document.addEventListener("visibilitychange", function() {
if (document.hidden){
console.log("Browser tab is hidden")
} else {
console.log("Browser tab is visible")
}
});
See also here on Stackoverflow (possible duplicate)
You might try using a framework, such as MooTools or jQuery which provide cross-browser support. They should be able to detect with more reliability the blur and focus events for the browser window.
I personally have used jQuery with much success:
$(window).blur(function(e) {
// Do Blur Actions Here
});
$(window).focus(function(e) {
// Do Focus Actions Here
});
Related
Hello I have hear my script to play sound when Tab is not Active, how I can change this to play also when I'm on the Tab?
'document.addEventListener('chatLoaded', function(event) {
event.chat.audioControl.loadSoundFile('http://www.soundjay.com/misc/sounds/handbag-lock-4.mp3');
document.addEventListener('newMessage', function(event) {
var chat = event.chat;
if (!chat.isActiveTab()) {
event.chat.audioControl.play();
}
});
});'
Correct me if I'm wrong but If I got your question right and when you said "tab" you meant the browser tab, that seems pretty simple to me. All you have to do is remove the if statement, then it'll play the sound every time the event is triggered:
document.addEventListener('newMessage', function(event) {
event.chat.audioControl.play();
});
If with "tab" what you meant was an HTML element, you can use blur and focus events to keep track of focusing state. In this case there's also solutions to check about user visibility in the browser tab, which Shota Noniashvili answer is covering.
Use focus() and blur() function to detect if tab is active or not.
Or you can use page visibility API (https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)
Is there any onTab change event in javascript . Like whenwver the user is moved to new tab then an event is fired .
I have tried onfocus , onblur ,add listener but they are behaving differently in different browser.
So is there any event that can be created when the tab is changed in java script ?
I tried the following links
Event for when user switches browser tabs
Also tried the
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
but again the events are not proper
The focus/blur events should work,
but I suggest you listen on window and not document (if you did):
if (document.addEventListener) {
window.addEventListener('focus', onFocus, 1);
window.addEventListener('blur', onBlur, 1);
} else {
// For IEs older than IE10
document.attachEvent('onfocusin', onFocus);
document.attachEvent('onfocusout', onBlur);
}
If this really doesn't work, the Page Visibility API should be covered enough and work properly. If you want to support some older browsers or just want to make sure to cover all possible cases, I recommend you use visibly.js by Addy Osmani.
I am working on a simple chat script using Ajax and want to indicate when a user leaves the page. Have read several docs and found this works:
window.onbeforeunload = leaveChat;
function leaveChat(){
... my code
return 'Dont go...';
}
Unfortunately (and logically), if they cancel the exit, my code is still executed and they are flagged as leaving even though they are still on the page? It should only execute if the confirm leaving the page. Any suggestions?
I would use onunload, but it doesn't seem to work in any of my browsers (Chrome, IE).
First, you should add the event handler using:
window.addEventListener('beforeunload', function() {
// Confirmation code here
});
window.addEventListener('unload', function() {
// fire pixel tag to exit chat on server here
// UI interactions are not possible in this event
});
For further research:
unload event reference
beforeunload event reference
Window.onunload reference
I want my html5 canvas game to automatically pause when the user opens up another tab inside the browser. What is the name of the event that is fired when a user does this?
$(window).blur( function() {
});
or in js:
window.onblur = function() {
}
There is no "new tab opened" event. But pausing on the blur event will do what you want - whenever the window loses focus the game will pause. You can then resume game in the focus event.
As an alternative to the blur event suggested in another answer, you could use the new window.hidden property of HTML5.
Good places to read up on this are:
https://developer.mozilla.org/en-US/docs/DOM/Using_the_Page_Visibility_API
http://www.html5rocks.com/en/tutorials/pagevisibility/intro/
The biggest problem using this specification today is that you'll have to cater for vendor prefixes to handle it in all browsers. But if you ignore that it really comes down to:
if (!window.hidden) {
// do whatever you normally do to render a frame
}
There are corresponding visibilitychange events in case you'd prefer to keep the detection out of your game loop.
I use preventDefault() on touchstart on the document to prevent scrolling on a page. Unfortunately this prevents too much. The user can no longer give focus to an input (and open the soft keyboard). Using jQuery focus(), I can give the focus to the input on a touchstart. This opens the soft keyboard on iOS (most of the time), but never on Android.
Background:
I have a webpage that I want to make as much like a mobile app as possible. I'm only really concerned with Android and iOS, but any form factor. I start by making the content in the page exactly the same size as the screen size. This is nice until the user puts their finger on the page. I need to prevent user scrolling. The following code accomplishes this, but in slightly different ways on the two operating systems.
$(document).on('touchstart', function(e) {
e.preventDefault();
});
On iOS, this prevents the elastic scrolling: where a user can reveal a texture behind the webpage by attempting to scroll off the page. The feature is nice for a regular webpage, but in my case it detracts from the UX.
On Android, prevents the revelation of a handy hack that I use to hide the address bar. Android browsers start with the address bar visible, but as the user scrolls down the page, it disappears. To programmatically force the browser hide the address bar, simply add this line of code to your function called at load.
$('html, body').scrollTop(1);
This is a hacky (but also the only) way to tell the android browser that we have scrolled, and the address bar is no longer necessary.
Without the preventDefault on the document, the Android browser will allow scrolling and the address bar can be revealed.
So, both OS's have a good reason to have this preventDefault() called on every touchstart on the document, but it prevents too much. Tapping on an input field does nothing. Using a call to jQuery focus() can help, but only opens the soft keyboard on iOS, not Android.
$('input').on('touchstart', function() {
$(this).focus();
});
How can I prevent the page from scrolling, but use the browser native functionality for giving focus to input fields?
Note:
This code
$(document).on('touchstart', function(e) {
if (e.target.nodeName !== 'INPUT') {
e.preventDefault();
}
});
is flawed because the user can still scroll the page as long as the initial touch originates from within the input field.
I actually solved this problem on another project, forgot about it, and remembered it most of the way through typing this up.
They key is to just do it on touchmove.
$(document).on('touchmove', function(e) {
e.preventDefault();
});
However, preventDefault on touchstart does all kinds of nice things like preventing the image save menu on a gesture enabled slideshow. My projects also include this.
$(document).on('touchstart', function(e) {
if (e.target.nodeName !== 'INPUT') {
e.preventDefault();
}
});
If anyone has some suggestions on additional content or how to reformat this so that it can reach a greater audience that would be great. I haven't ever seen the content I have here all in one place, so I felt that it needed to be on SO.
Combine the two!
// prevent scrolling from outside of input field
$(document).on('touchstart', function(e) {
if (e.target.nodeName !== 'INPUT') {
e.preventDefault();
}
});
// prevent scrolling from within input field
$(document).on('touchmove', function(e) {
if (e.target.nodeName == 'INPUT') {
e.preventDefault();
}
});
This probably isn't perfect either, and I am especially worried that the first function will prevent following links, but I'll leave it to others to do extensive tests.
The simple answer to your question is don't use "preventDefault" instead use pointer-events css property to disable the scrolling on the element that scrolls.
CSS for your inputs:
input {
pointer-events: auto !important;
}
touchstart event listener:
document.body.addEventListener('touchstart', function(e) {
if (e.target.nodeName === 'INPUT') {
this.style.pointerEvents = 'none';
}
});
You will need to reset the pointer-events when you blur the input.
document.body.pointerEvents = 'auto';
+1 Good Question