Alertas al estilo twitter.

Pues ayer me aventé un mensaje en twitter preguntando sobre que les gustaría que hablara en mi Blog relacionado con Javascript. El único que respondió fue el usuario Calizman y me sugería que explicara como hacer el alerta que usa twitter cuando actualizas los “settings” en tu cuenta. El efecto cociste en un mensaje que sale de la parte superior de la ventana del navegador, se despliega por unos segundos y luego se vuelve a ocultar. Hoy me puse a desarrollar el efectillo y aquí está el resultado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>mensaje estilo twitter</title>
 <script type="text/javascript">
 var mensaje = {
 init: function(mensaje){
 var elem = document.createElement('h1');
 elem.appendChild(document.createTextNode(mensaje));
 document.getElementsByTagName('body')[0].appendChild(elem);
 elem.setAttribute('style', 'position: absolute; margin: 0; background-color: #99F; width: 100%;top: -40px; text-align: center;');
 elem.setAttribute('id', 'msj');
 },
 activar: function(){
 intervalo = setInterval(function(){
 m = document.getElementById('msj');
 viejoTop = parseInt(m.style.top);
 if(viejoTop <= 0){
 nuevoTop = viejoTop+2;
 m.style.top = nuevoTop + 'px';
 }else{
 m.style.top = '0px';
 clearInterval(intervalo);
 setTimeout(function(){
 intervalo = setInterval(function(){
 m = document.getElementById('msj');
 viejoTop = parseInt(m.style.top);
 if(viejoTop >= -50){
 nuevoTop = viejoTop-2;
 m.style.top = nuevoTop + 'px';
 }else{
 m.style.top = '-50px';
 clearInterval(intervalo);
 }
 },10);
 }, 3000);
 }
 }, 10);
 },
 cambiarMensaje: function(mensaje){
 document.getElementById('msj').innerHTML = mensaje;
 }
 }

 window.onload = function(){
 mensaje.init('HolaMundo');
 }
 </script>
</head>
<body style="margin: 0;">
 <a href="#no" onclick="mensaje.activar();">Hola Mundo</a>
 <a href="#no" onclick="mensaje.cambiarMensaje('Mundo Hola'); mensaje.activar();">Mundo Hola</a>
</body>
</html>

Como pueden ver, he creado un miniobjeto que es el que hace todo el chistesito. Este miniobjeto cuenta con tres funciones:

init() que crea el elemento. init() recibe un único parámetro que es el texto con el que se inicializará el mensaje. En este caso  ‘Hola Mundo’. Yo estoy llamando init() al cargar la ventana, pero puede llamarse en cualquier momento, siempre y cuando 1) el documento esté totalmente cargado y 2) la llamada se haga antes de hacer cualquier llamada a uno de los otros dos métodos del objeto.

activar() es la función que se encarga de hace la animación. El código es realmentes sencillo utilizando animaciones de la vieja escuela. Pueden lograrse animaciones más sofisticadas utilizando métodos distintos, pero teniendo en cuenta que Calizman es relativamente nuevo en el mundo de Javascript, he decidido dejarlo lo más simple posible.

Por último, cambiarMensaje() se utiliza para asignar un mensage diferente al objeto y de esta forma poder usarlo para enviar distintos mensajes al usuario.

Este objeto no ha sido creado para motivos de distribución por lo que se tiene poco cuidado al momento de optimizar su comportamiento y su compativilidad. Sin embargo, unos cuantos toques por aquí y por alla y tienes un objeto totalmente transportable, aun que no realmente reusable en toda su extención.

Si tienen sugerencias sobre algo que les gustaría que explicara en un futuro, no duden enviarme un twitt a @ImBuzu o dejar la sugerencia a modo de cometario aquí en el blog.

5 thoughts on “Alertas al estilo twitter.

  1. Hola buzu.

    Acabo de ver tu twit y esto me hace entender del por que no te agradan los frameworks, yo javascript sinceramente bastante básico pero hago lo posible por defenderme, haz logrado un bonito efecto de deslize solo con js puro, esta muy bueno, lo voy a estudiar.

    Pero tienes un problema en IE6, ya que te aparece impreso el hola mundo que es el mensaje emergente y al hacer click en el vínculo cambia el texto impreso y luego ya no cambia.

    Gracias por compartirlo.

  2. Que tal willyfc, realmente no me tomé el tiempo para probarlo en IE. Un grave error sin duda, pero estoy seguro que no es tan difícil arreglarlo. En cuanto al cambio de texto, así es como debe funcionar, si cambiara me preocuparía. Fijate que el llamado a cambiarMensaje() se hace solo una vez. SI se quisiera volver a cambiar el mensaje, habría que volver a llamara a cambiarMensaje.

    Saludos, y gracias por tomarte el tiempo para revisarlo y por tu comentario.

  3. No funciona en IE, estuve investigando y lo unico que hay que hacer es detectar si es IE y aplicar el estilo asi:

    elem.style.cssText = ‘position: absolute; margin: 0; background-color: #99F; width: 100%;top: -40px; text-align: center;’;

    Saludos y felicidades por el blog… esta muy bien.

    • si, cuando desinstalé windows para usar ubuntu no instalé ningún programa para correr ie en ubuntu. Acavo de instalar el ies4linux, y mis siguientes ejemplos los probaré en IE.

      Saludos, y gracias por el comentario.

Comments are closed.