Flash/blink tab effect in Javascript

Question

I'm creating a simple chat in Javascript/PHP. I would like to flash/blink tab when new message is coming like on Facebook for example. How can I do that?

The browser tab? Try something like this: http://stackoverflow.com/a/24025860/2278598 — Andrew Brooke, Dec 14 '15 at 18:45
Maybe you're right but I didn't have any ideas to do that. Now, I do. — Stock Overflow, Dec 14 '15 at 19:04

score 8 · Accepted Answer · answered Dec 14 '15 at 18:54

Here is example code:

(function () {

var original = document.title;
var timeout;

window.coders = function (newMsg, howManyTimes) {
    function step() {
        document.title = (document.title == original) ? newMsg : original;

        if (--howManyTimes > 0) {
            timeout = setTimeout(step, 1000);
        };
    };

    howManyTimes = parseInt(howManyTimes);

    if (isNaN(howManyTimes)) {
        howManyTimes = 5;
    };

    cancelcoders(timeout);
    step();
};

window.cancelcoders = function () {
    clearTimeout(timeout);
    document.title = original;
};

}());

You can use this code something like :

coders("New Message from Bhavin Solanki");

... or...

coders("New Message from Bhavin Solanki", 20); // toggles it 20 times.

score 0 · Answer 2 · answered Dec 14 '15 at 19:29

You're better off doing the animation in css, and just using javascript to start and stop the animation. You got downvoted because you did not show your attempt at a solution.

(function(){
  var message = document.querySelector('.message'),
      button = document.querySelector('#button');

  button.addEventListener('click', blink, false);

  // this is where you toggle the class
  function blink(e){
    message.classList.toggle('blink');
  }
})();

@keyframes blink {
    from {
      background-color: red;
      color: white;
    }
    to {
      background-color: white;
      color: red;
    }
}

.message {
  text-align: center;
}

/* run the animation on .message when it also has the class .blink */
.message.blink {
  animation: blink 1s linear infinite alternate;
}

<div class="message">You've got a message</div>
<button id="button">blink</button>

Flash/blink tab effect in Javascript

2 Answers2