Tutorial: Notificaciones animadas con jQuery

5 Mar

Hoy vamos a ver un tutorial en el que crearemos sencillas pero efectivas notificaciones con jQuery que podrá entender hasta el mas novato.

Veamos como queda el resultado final y vamos a ello.

Javascript

En esta parte vamos a crear la función notify() que será la encargada de crear las notificaciones con parámetros que controlan el texto del mensaje (msg), la velocidad a la que aparece (speed), cuanto tarda en desaparecer (fadeSpeed), y el tipo de notificación (type).

function notify(msg,speed,fadeSpeed,type){
 //crear notificaciones
}

Ahora vamos a ver el código que crea las notificaciones con la clase .notify en el body de la página.

function notify(msg,speed,fadeSpeed,type){
 $('body').append('
<div class="notify '+type+'" style="display: none; position: fixed; left: 10px;">
'+msg+'</div>
');
}

Podéis ver que hemos añadido el tipo de notificación (type) como una clase y el texto del mensaje (msg) en un párrafo a parte de ocultar la notificación (display:none) y asignarle position:fixed, para mantenerlo visible aunque el usuario se desplace por la página.

function notify(msg,speed,fadeSpeed,type){

 $('body').append('<div class="notify '+type+'" style="display:none;position:fixed;left:10"><p>'+msg+'</p></div>');

 notifyHeight = $('.notify').outerHeight();

 $('.notify').css('top',-notifyHeight).animate({top:10,opacity:'toggle'},speed);
}

Hemos guardado la altura de la notificación en notifyHeight para posicionarla fuera del body. Para ello, le aplicamos la propiedad css top con su altura negativa.

Después de posicionarla, animamos la notificación cambiando la posición a top:10 y mostrándola con opacity:’toggle’. Definimos la velocidad de la animación con speed.

Ahora solo nos queda crear un temporizador para hacer desaparecer la notificación y estamos casi listos.

function notify(msg,speed,fadeSpeed,type){

 $('.notify').remove();

 if (typeof fade != "undefined"){
 clearTimeout(fade);
 }
 $('body').append('<div class="notify '+type+'" style="display:none;position:fixed;left:10"><p>'+msg+'</p></div>');

 notifyHeight = $('.notify').outerHeight();

 $('.notify').css('top',-notifyHeight).animate({top:10,opacity:'toggle'},speed);

 fade = setTimeout(function(){

 $('.notify').animate({top:notifyHeight+10,opacity:'toggle'}, speed);

 }, fadeSpeed);

}

Hemos creado un temporizador en la variable fade y para ocultar la notificación, volvemos a usar opacity:’toggle’, ya que este, oculta si está visible y al contrario automáticamente.

También, eliminamos cualquier notificación antes de crear una nueva mediante remove() y reseteamos cualquier temporizador que pudiera estar activo con clearTimeout(fade).

Si os habéis fijado, es necesario comprobar que fade no esté sin definir (undefined) ya que si no lo hacemos vamos a recibir errores.

Hasta aquí hemos llegado con Javascript, ahora vamos con CSS.

CSS

El CSS estrictamente necesario, se resume a aplicarle un tamaño a la notificación:

.notify{
 width: 250px;
}

A parte de esto, los colores de fondo, texto y demás, son completamente opcionales.

¡Está vivo!

Podéis comprobar el resultado final, en el que he creado un tipo de notificación de error y empezar a crear vuestras propias notificaciones.

También es aconsejable descargar el código ya que es mucho mas fácil entenderlo con los comentarios.

A disfrutar de vuestras notificaciones y gracias al amigo Venkman que sugirió usar position:fixed en ved de absolute.

Links: Descargar código | Demo

10 comentarios to “Tutorial: Notificaciones animadas con jQuery”

  1. converdb 7 marzo 2010 a 20:34 #

    El blog está cojonuto. Sigue dándole!
    Nada más que una cosica, si me permites. Las imágenes de cabecera que te lleven al texto del post… yo siempre pincho la imagen y a continuación al back…

    • ozzysong 7 marzo 2010 a 23:21 #

      Hombre, es que tengo el blog hosteado en wordpress y se lo organiza un poco como le da la gana a el, you know.

  2. Venkman 8 marzo 2010 a 08:56 #

    Si no te importa no soportar IE6, una buena mejora (en mi opinión) sería cambiar el div de las notificaciones a position:fixed

    Más que nada porque así se muestra en la misma posición de la ventana, aunque nos hayamos desplazado hacia abajo. En esa situación, si no, no se vería la notificación.

    • ozzysong 8 marzo 2010 a 09:38 #

      Pues no, no me importa no soportar IE6, gracias por el consejo, lo voy a cambiar ahora mismo.

  3. Dante 24 marzo 2011 a 20:29 #

    Buenisimo! en el caso que quisieras mostras varias notificaciones a la ves digamos algo similar a esto http://www.erichynds.com/examples/jquery-notify/
    que habria que hacer?

  4. Juan Escobar 5 julio 2011 a 05:40 #

    Hola, gracias por el tutorial. Tengo una pregunta.
    Como haría si no quiero que las notificaciones se general al dar clic sino automáticamente al ser redireccionado a alguna url. Por ejemplo cuando ingreso un nuevo registro en mi base de datos y deseo notificarle al usuario que la acción se llevo a cabo bien.

    Saludos.

  5. Eder M 4 diciembre 2012 a 16:04 #

    Muchas gracias! hace tiempo que estaba buscando un tipo de notificación pero no encontraba uno ¬¬’ hasta ahora! :D Buen aporte!

Trackbacks/Pingbacks

  1. Bitacoras.com - 5 marzo 2010

    Información Bitacoras.com…

    Valora en Bitacoras.com: Hoy vamos a ver un tutorial en el que crearemos sencillas pero efectivas notificaciones con jQuery que podrá entender hasta el mas novato. Veamos como queda el resultado final y vamos a ello. Javascript En esta parte vamos a …..

  2. Tutorial-Notificaciones-animadas-con-jQuery : Sysmaya - 26 marzo 2010

    […] .Articulo Indexado en la Blogosfera de Sysmaya […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: