Please Don’t Go is a JavaScript plugin used for changing the title and the favicon of the website when a visitor navigates to another tab in the window.
JavaScript has this little thing called visibilityState. It returns a couple of different values for the visibility of the document (visible, hidden, prerender, unloaded). So basically Please Don’t Go is a function that checks if the document is hidden or not. If the document is hidden, then a new title and favicon are switched out. And when it’s visible the original title and favicon are there. Super simple, but you can add something fun and different to your website that isn’t seen very often. Hit the demo page at the bottom to see the plugin in action.
You can read more about visibilityState on the Mozilla Developer Network.
Download
Please Don’t Go is available on Bower and GitHub.
Bower
bower install pleaseDontGo
<script type="text/javascript" src="path/to/bower_components/pleaseDontGo/dist/pleaseDontGo.min.js"></script>
GitHub
Download the script or the minified version in the dist folder.
How to Use
The plugin will look for the first HTML element with rel="icon", so make sure that’s your favicon.
<link rel="icon" type="image/x-icon" href="path/to/favicon.ico">
<script type="text/javascript">
pleaseDontGo.init({
newTitle: 'Please Don\'t Go',
newFavicon: '/assets/images/favicon-dontgo.ico',
timeout: 2000
});
</script>
How to Use
The plugin will look for the first HTML element with rel="icon", so make sure that’s your favicon.
<link rel="icon" type="image/x-icon" href="path/to/favicon.ico">
<script type="text/javascript">
pleaseDontGo.init({
newTitle: 'Please Don\'t Go',
newFavicon: '/assets/images/favicon-dontgo.ico',
timeout: 2000
});
</script>
Please Don't Go has defaults for or allows you to set the new title, the path for the new favicon, and the timeout for when it switches over when a user clicks a new tab.