We Keep Coding

Change favicon, using Visibility API

I have seen some websites (discord. hotjar), using the Visibility API to show a bullet when the tab is inactive, and hide it when its active again,
How we can do that?

For this, you need to create two different favicons for each mode and toggle between them using the Visibility API. Something like this:
// Set the name of the hidden property and the change event for visibility
let hidden;
let visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
var link = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement('link');
link.rel = 'icon';
document.getElementsByTagName('head')[0].appendChild(link);
}
function handleVisibilityChange() {
if (document[hidden]) {
link.href = 'https://www.linkpicture.com/q/favicon2.ico';
} else {
link.href = 'https://www.linkpicture.com/q/favicon1_1.ico';
}
}
// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
// Handle page visibility change
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
Preview:

unity3d webgl mute the sound when tab or browser inactive

Does anyone know a proper way to mute the sound in the game when tab or browser is inactive?
I've tried to do this by this(by JS libraries) way
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);
function handleVisibilityChange() {
$("video").prop('muted', document[hidden]);
}
but its not work for me. Thank you.

Not sure but you probably could use OnApplicationFocus and OnApplicationPause on a controller component within Unity.
It could then enable and disable all sound by simply set AudioListener.pause or alternatively the AudioListener.volume accordingly
public class FocusSoundController : MonoBehaviour
{
void OnApplicationFocus(bool hasFocus)
{
Silence(!hasFocus);
}
void OnApplicationPause(bool isPaused)
{
Silence(isPaused);
}
private void Silence(bool silence)
{
AudioListener.pause = silence;
// Or / And
AudioListener.volume = silence ? 0 : 1;
}
}

While using OnApplicationFocus will work it will also mute things if they switch to another window but you can still see the browser which may not be what you want.
If you go to the bottom of the thread below you'll see a post by someone from Unity and they give an example that uses the visibility change similar to what's in the original post but also has the Unity C# side that you'll need to actually get it to work. I didn't like hard coding the object name so I passed its gameObject.name when it calls the register function. I'm not used to working with jslib plugins so initially, I didn't convert the pointer to a string in the jslib using Pointer_stringify(str). If you do this you'll also want to set it to a local var or when an event triggers your string pointer could be anything.
Pause and Tabbing Events

why onblur is not properly firing?

I am trying to detect that the window/tab is currently in focus or not.My code is working well to detect the focus lose when i am switching between tabs but it fails if the current window is covered by some application(music player or any other software).I know focus checking can be done in many ways but i am interested to have a solution based on my code.Can anybody tells me why the following code is not working as expected ?
$(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;
}
});

Read Using the Page Visibility API.
When compared with registering onblur/onfocus handlers on the window, a key difference is that a page does not become hidden when another window is made active and the browser window loses focus. A page only becomes hidden when the user switches to a different tab or minimizes the browser window.
Your code should work as you expect in browsers not supporting Visibility API only.

Detect when browser tab/window is active [duplicate]

This question already has answers here:
How to tell if browser/tab is active [duplicate]
(6 answers)
Closed 8 years ago.
Is It possible to detect when browser window Is active/inactive
I did try:
$(window).on('focus', function(){
console.log(1);
});
$(window).on('blur', function(){
console.log(2);
});
But it seems that it's working only when user will click the window.
but showing 2 when user will click eg. browser address bar.
What I want to achieve is to detect when current tab is active one.
How to improve this code?

Active means when the tab is visible. But if you want to tell if the user's mouse is directly on the page, you could use this:
<html onmouseenter="document.getElementById('h1').innerHTML = 'active'"onmouseleave="document.getElementById('h1').innerHTML = 'not active'">
<body style="width:100%;height:100px">
<h1 id="h1">not active</h1>
</body>
</html>
With the simple code above you can tell if the users mouse is on the page or not
EDIT: using the page visibility API:
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
}
else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
}
else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
}
else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
function handleVisibilityChange() {
if (document[hidden]) {
//Not visible, Do whatever
}
else {
//Visible
}
}
if (typeof document.addEventListener === "undefined" ||
typeof document[hidden] === "undefined") {
alert("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
}
else {
document.addEventListener(visibilityChange, handleVisibilityChange, false);

check if tab open as active

I need determine, if current page is active.
I know i can find if tab get/lost focus with this answer:
https://stackoverflow.com/a/1760268/449553
It is ok, if tab state change, BUT i need to get initial value.
There is a few ways to open page:
going by link in this active tab
open in new tab
open in new background tab
I understand, that page need some time to load. So I need to get this value after DOM loaded.
Is there any way to find this value?

Try pagevisibility:
var visibilityChange,hidden, state;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
document.addEventListener(visibilityChange, function() {
document.title = document[state];
}, false);
document.title = document[state];
if(document[state]==="hidden"){
//hidden
}else{
//show
}
See the compatibility