How to make browser window blink

Sometimes it’s useful to draw immediate attention of your website users. There are many ways to do that in Javascript. These include sound notifications, native JS alerts (very annoying method) or HTML pop-ups. But there is another way get your visitor focused and that is to make your browser window blink.

In this short note I will describe how to achieve that simple effect using plain JS.

var originalTitle;

var blinkTitle;

var blinkLogicState = false;

function StartBlinking(title)
{
	originalTitle = document.title;
	
	blinkTitle = title;
	
	BlinkIteration();
}

function BlinkIteration()
{
	if(blinkLogicState == false)
	{
		document.title = blinkTitle;
	}
	else
	{
		document.title = originalTitle;
	}
	
	blinkLogicState = !blinkLogicState;
	
	blinkHandler = setTimeout(BlinkIteration, 1000);
}
	
function StopBlinking()
{
	if(blinkHandler)
	{
		clearTimeout(blinkHandler);
	}
	
	document.title = originalTitle;
}

Above we have a set of three simple functions. First of them “StartBlinking” should be called when it is appriopriate time to start our window blinking. It may be caused by incoming message (like in chat apps) or any other instant notifications. At the beginning it saves original window title to global variable, then it sets new title which will appear alternately with the first one. After that “BlinkIteration” function is called. It changes tab title depending on blinkLogicState boolean value which is negates at every function call.

After all we want title to be changed after some short time interval, so we use setTimeout to call next blink iteration after one second. Next time blinkLogicState would store true so second title will be set. In fact – that’s all. Title continues to shift every one second making blinking effect. When it’s necessary and when we are ensured that user received our notification we can stop blinking by calling “StopBlinking” function. It simply just closes our little reccurency and restores original title on the window bar.

Hope it works for you, but remember – go easy with that kind of stuff. Altering window titles may be at some point considered (like JS alert as well) as crossing of good old browser sandbox limits. Not every users may feel good with that.