'How to use the visibilitychange event to display messages when tab is hidden?
When an customer opens a new tab or goes away from the current sites tab, I'm trying to insert an promo message in the tab of a browser that flashes back and forth from original title and an promo title. Once they click back into the sites tab that message stops and the original title is displayed. My attempt at this has been a bit buggy. The click back doesn't seem to always clear the interval and revert back to the original title. I'd really appreciate any gudiance to get this working.
document.addEventListener("visibilitychange", ()=>{
e = {
currentTitle: document.title,
interval: null,
message: "July 4th Sale!"
};
document.hidden ? (e.currentTitle = document.title, e.interval = window.setInterval(
function(){
document.title = e.currentTitle === document.title ? e.message : e.currentTitle
}
, 1000)) : (window.clearInterval(e.interval),
e.interval = null,
document.title = e.currentTitle)
})
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|