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.

I don't think a webpage can interact with a browser's GUI in this way, but I'm interested to see whether I'm wrong about that. — Daniel Wright, Dec 06 '10 at 21:19
I've seen sites do something that causes (in IE) the tab to change color. I'm just not sure how they achieve it, and all examples are escaping me right now. — Josh, Dec 06 '10 at 21:20
Just because it's possible in IE doesn't mean that it *should* be allowed. A blinking message, if the person is at the computer, should be sufficient to attract attention (it certainly works for Facebook chat alerts). — David Thomas, Dec 06 '10 at 21:24
I think I see where the colors are coming from in IE. Open in new tab causes the "parent" and "child" to have the same background color to group them. — Josh, Dec 06 '10 at 21:26
@Josh i am working on same functionality.. can you share where you have implemented... or can you share jquery method or guide me how to do this ? — CodeMonkey, Jul 03 '12 at 21:00

score 32 · Accepted Answer · answered Dec 06 '10 at 21:20

32

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.

answered Dec 06 '10 at 21:20

Josiah Ruddell

29,697
8
65
67

3

I went with http://heyman.info/2010/sep/30/jquery-title-alert/ to do exactly as you said – Josh Dec 06 '10 at 21:44

score 27 · Answer 2 · answered Jun 03 '14 at 22:13

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/

I really like this code. I combined it with some extra code to make it more animated. — Dexter, Oct 22 '14 at 19:31
@Dexter Care to share? :) https://github.com/CurtTimson/Flashing-Page-Title-Notification — Curtis, Nov 25 '16 at 13:28

score 3 · Answer 3 · answered Jun 17 '16 at 09:43

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.

score 2 · Answer 4 · answered Dec 06 '10 at 21:19

2

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

answered Dec 06 '10 at 21:19

hunter

62,308
19
113
113

3

Well, you **can** make it blink if you alternate the `title` between the message-string and a blank-string...but, yeah; changing the colour and making that blink are a no-no. – David Thomas Dec 06 '10 at 21:28

Make browser tab flash a notification

4 Answers4

Linked