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.
Comments
Post a Comment