JSFiddle - React, Tailwind, and code Playground
HTML
<button class="on">Turn On</button>
<button class="off">Turn Off</button>
<a href="http://curtistimson.co.uk" target="_blank">CurtisTimson.co.uk</a>
CSS
a
{
position:absolute;
bottom:0;
right:0;
padding:8px;
}
JavaScript
var PageTitleNotification = {
Vars:{
OriginalTitle: document.title,
Interval: null
},
On: function(notification, intervalSpeed){
var _this = this;
_this.Vars.Interval = setInterval(function(){
document.title = (_this.Vars.OriginalTitle == document.title)
? notification
: _this.Vars.OriginalTitle;
}, (intervalSpeed) ? intervalSpeed : 1000);
},
Off: function(){
clearInterval(this.Vars.Interval);
document.title = this.Vars.OriginalTitle;
}
}
$(function(){
$(".on").click(function(){
alert('1');
PageTitleNotification.On("New Chat Message!");
});
$(".off").click(function(){
PageTitleNotification.Off();
});
});