Hacer parpadear el título de página con jQuery - Más allá de lo que ves

sábado, 19 de octubre de 2013

Hacer parpadear el título de página con jQuery

En algunas ocasiones se producen eventos en nuestra aplicación web pero el usuario no está en ese momento visualizando la pestaña o ventana en la que se ejecuta nuestra aplicación. Para esto podemos llamar su atención de diferentes maneras una de ellas es haciendo que el título de la pestaña parpadee con un mensaje.

Con el siguiente ejemplo se consigue este efecto de forma sencilla. Probado en Chrome, Safari y Firefox.

Espero pueda ser útil.

<html>
<head>
 <title>My Application</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
 </script>
 <script type="text/javascript">
  (function () {
   var titleOriginal = document.title;   
   var intervalBlinkTitle = 0;

   // Inicia el parpadeo del título la página
   window.startFlashTitle = function (newTitle) {       
       if(intervalBlinkTitle == 0){
        document.title = 
         (document.title == titleOriginal) ? newTitle : titleOriginal;           

        intervalBlinkTitle = setInterval(function (){
         document.title = 
          (document.title == titleOriginal) ? newTitle : titleOriginal;           
        }, 1000);
    } 
   };

   // Para el parpadeo del título de la página   
   // Restablece el título
   window.stopFlashTitle = function () {       
       clearInterval(intervalBlinkTitle);
       intervalBlinkTitle = 0;
       document.title = titleOriginal;
   };
  }());
 </script>

</head>
<body>
 <button onclick="startFlashTitle('Hi, Joe !!!');">
  Start
 </button>
 <button onclick="stopFlashTitle();">
  Stop
 </button>
</body>
</html>

1 comentario: