Skip to main content

Changing chrome title tab when users leave

The other day I was on https://fabriceleven.com/ reading one of their blogs and when I tabbed away I saw the title change and I thought it was cool as I had not seen anyone else use it before even though its pretty simple.

So I went about doing it myself. I've done it in pure JS as a lot of the examples are jQuery and for simple things like this you don't need a library.

 You can see this working on this page just click on another tab then come back.

Below is the code I used to achieve this. Simply put I get the html title tag. Add an event for when the user is away or using the page with blur and focus on the window. Then I pick a random string to display when they are away.



<!DOCTYPE html> 
<html> <head> 
<title>Hi this is the original title</title> 
</head> 
<body> 
<p> lorem ipsm </p> 
</body> 
<script type="text/javascript"> 
 var title = document.querySelector("title"); 
window.addEventListener("blur", function(event) { 
userAway(); 
}); 

window.addEventListener("focus", function(){ 
userHere(); 
}); 

function userAway() { 
let phrases = [ 
"I miss you", 
"come back soon", 
"Don't forget to read this", 
"You gotta see this" 
]; 

let number = randNumber(); 
number = Math.round(number); 
let currentPhrase = phrases[number]; 
title.innerHTML = currentPhrase; } 
function userHere() { 
title.innerHTML = "Hi this is the original title"; 
} 

function randNumber() { 
return Math.random() * (3-0) + 0; 
} 
</script> 
</html>
A cool thing you could do with this is replace it with the last paragraph title they were reading, a bit like a book mark for a particularly long page. Or a nice message if they keep coming back but this is just a thought and a quick 5 min Sunday funday project.

Thanks for reading.
Labels:

Comments

Post a Comment

Popular posts from this blog

Ionic RSS feed using Feednami

Tutorial of how to make a RSS feed using Feednami which is an alternative to google api which no longer works. This is a basic example and can be improved. First go ahead and make a new ionic project $ npm install -g cordova ionic $ ionic start exampleProject blank Now find index.html and insert... <script src="https://storage.googleapis.com/feednami-static /js/feednami-client-v1.0.1.js"></script> Into the header, then in <ion-content> below Ionic Blank Starter insert a new div <div id ="feed" ng-controller="feedCtrl"> </div> Open app.js, now we are going to make the controller from Feednami that will get our rss feed. .controller('feedCntl', function(){ var url = 'http://daringfireball.net/feeds/articles' feednami.load(url,function(result){ if(result.error){ console.log(result.error) } else{ var entries = result.feed.entries for(var i = 0; i < entri...
Post a Comment
Read more

Sunday funday project - LightReact

Sunday fun day project - LightReact Update every week So I'm in my third year (finally!) and decided to do more things this year (2017)  1. To increase my skills and 2. To have fun! This year we are having our end of year show at The University of Winchester and I wanted to make a VR game for Google cardboard. The winner at the end of the day would get a £10 steam gift voucher. Below is my WIP for this mini project. Week 1 - inspiration and 3d modelling  I wanted to make a very simple game for VR, no not a horror game. LightReact is based on a game you would typically play at an arcade where you have a bunch of lights and you have to switch them off as fast as possible. However, instead of switching them off with your hands you use your eyes. The example in the video below. So you get the point you look at them they switch off. The person to do it in quickest time wins.  The wonderful world of blender  I am primarily a dev...
Post a Comment
Read more

Poker chip CSS only checkbox

For this Sunday Funday project, I decided to make a poker chip checkbox out of pure CSS. DEMO The idea is that it will flip on its right edge like when people flip chips between their fingers. This can be improved by using images to get a correct dashed edge or make it more lifelike but this is CSS only. Tutorial 1. The markup We need a container to set the background and the size and width, we need the label to be clickable anywhere, input for the checkbox, top and bottom of the chip. <div class="container"> <label for="chip-checkbox"></label> <input type="checkbox" name="chip" value="1" id="chip-checkbox"> <div class="bottom-side"></div> <div class="top-side"></div> </div> 2. Hide the input input { visibility: hidden; } 3. Set the width and height of the background/container .container { width: 80px; height: 40px; bord...
Post a Comment
Read more