javascript - How to make a title blink until it becomes active with jQuery? - Stack Overflow

admin管理员组

文章数量:1200397

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();

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();

• javascript
• jquery
• html
• notifications
• blink

Share Improve this question Follow edited Oct 1, 2011 at 0:55 Explosion Pills 192k5555 gold badges340340 silver badges416416 bronze badges asked Sep 30, 2011 at 23:40 Benjamin CrouzierBenjamin Crouzier 41.9k4848 gold badges177177 silver badges239239 bronze badges 1

• 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 Commented Sep 30, 2011 at 23:43

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 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);
});

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.

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

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)

本文标签： javascriptHow to make a title blink until it becomes active with jQueryStack Overflow