Make browser tab flash a notification

Question

For security reasons, my website automatically signs users out after 5 minutes of inactivity. I achieve this through jquery timeouts which are reset any time the user does what I consider an "activity". To ensure security, the timeout of the cookie is also set to 5 minutes, and my jquery performs a heartbeat back to the server to ensure the cookie doesn't expire.

Currently, at about 4 minutes of inactivity, a jquery ui dialog pops up, warning the user of their impending timeout. The user can choose to stay signed in, sign out now, or do nothing and they are forced to sign out at the end of the 5 minutes.

My problem is that I want to make the tab flash/blink with a different background color to warn the user that something is going on while they weren't paying attention. I'm just not sure how to go about doing this.

Answer 1

You can change the title of the page (this should also change the text in the tab).

document.title = 'New title';

Additionally you could do this in a setInterval back and forth between the page title, and the information you are attempting to show the user. I have seen this behavior on gmail with incoming chat communication.

Answer 2

It's not possible to change the background of a browser tab, at least not consistently across all.

As Josiah has mentioned, setInterval can be used to create a flashing page title.

This javascript makes use of it:

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;   
    }
}

This can be used like:

PageTitleNotification.On("User logged out!");

See my following blog post for more info:

http://curtistimson.co.uk/js/create-a-flashing-tab-notification-page-title/

Answer 3

You can also add an alert window. When user is in another tab, browser has an inbuilt feature of flashing the tabs (having alert). So, changing document title along with an alert will serve your purpose. Note : before showing alert , you need to first check if tab is active.

Answer 4

you can change the page title and that will show in the browser tab, but you can't change the background color or make it blink