How to make a title blink until it becomes active with jQuery?

Question

I have a javascript chat. When a user receives a message, I want the title to blink until it becomes active. (like Gmail Talk)

For example:

You are in an other tab. Title is My website
Someone talks to you. Title blinks betwen My website and User says: bla bla
So you click the tab, and now the title is My website

How can I achieve that using jQuery ?

What i tried so far: (blinking never stop playing)

var isOldTitle = true;
var oldTitle = "oldTitle";
var newTitle = "newTitle";
function changeTitle() {
     document.title = isOldTitle ? oldTitle : newTitle;
     isOldTitle = !isOldTitle;
     setTimeout(changeTitle, 700);
}
changeTitle();

Your acceptance rating is pretty low. You should consider going back through your old questions and mark those answers that fixed your problem. Some people here are more motivated by points than by goodwill. It will end up being a win-win for you and the person who rightly deserves the points for the question **:)** — Freesnöw, Sep 30 '11 at 23:43

score 22 · Accepted Answer · answered Oct 01 '11 at 00:25

22

Full solution:

var isOldTitle = true;
var oldTitle = "oldTitle";
var newTitle = "newTitle";
var interval = null;
function changeTitle() {
    document.title = isOldTitle ? oldTitle : newTitle;
    isOldTitle = !isOldTitle;
}
interval = setInterval(changeTitle, 700);

$(window).focus(function () {
    clearInterval(interval);
    $("title").text(oldTitle);
});

answered Oct 01 '11 at 00:25

Benjamin Crouzier

40,265
44
171
236

1

[here](http://stackoverflow.com/questions/37122/make-browser-window-blink-in-task-bar) is a famous post, and [here](http://stackoverflow.com/a/3886467/2218697) a **plugin to make title blink**, may help someone. – Shaiju T Jul 24 '16 at 12:54

score 1 · Answer 2 · answered Nov 06 '12 at 16:36

Pinouchon's answer works but if I had to add an interval check so it didn't speed up the title changing when one person messaged multiple times in a row. So I had

if(timeoutId)
 {
     clearInterval(interval);
 }

 interval = setInterval(changeTitle, 700);

Basically if the interval had already been set, clear it and then reset it.

score 0 · Answer 3 · answered Feb 16 '18 at 15:50

You can try this one. You can call the blink function to start switching between two titles and call stop, when you dont want this anymore.

var title = document.title;
var interval = 0;

function blink(title1, title2, timeout){
    title2 = title2 || title;
    timeout = timeout || 1000;

    document.title = title1;
    interval = setInterval(function(){
        if(document.title == title1){
            document.title = title2;
        }else{
            document.title = title1;
        }
    }, timeout);
}

function stop(){
    clearInterval(interval);
    document.title = title;
}



blink('My blinking title!');
setTimeout(function(){
    stop();
}, 5000)

jdeseno · Answer 4 · 2011-10-01T00:24:31.187

0

Just remember to call clearInterval on focus:

(function() {
  var timer,
      title = $('title'),
      title_text = title.text();
  $(window).blur(function() {
    timer = setInterval(function() {
      title.text(title.text().length == 0 ? title_text : '');
    }, 2000)
  }).focus(function() {
    clearInterval(timer);
    title.text(title_text);
  });
})();

edited Oct 01 '11 at 00:24

answered Oct 01 '11 at 00:06

jdeseno

7,753
1
36
34

Err. You're using `setTimeout`, so use `clearTimeout`. `setInterval` is going to be more consistent than `setTimeout` in this case but, use whichever works for you. – jdeseno Oct 01 '11 at 00:09
The `.focus(function()` event seem to be called repeatedly while tab is active. Besides that, there is a syntax error (at least in chrome). I replaced `function()` with `$(function()` and suppressed the last `()` – Benjamin Crouzier Oct 01 '11 at 00:16
I fixed the missing `(` but, focus shouldn't be getting called multiple times. Your code may be triggering a focus? Try binding to `document`.`focus` instead? – jdeseno Oct 01 '11 at 00:27

How to make a title blink until it becomes active with jQuery?

4 Answers4