Window.Growl con jQuery
- Nov
- 28
8 comentarios! 109 palabras - 1 hits
Window.Growl basado en jQuery
Esta es una modificación del script original ideado por Daniel Mota basada en la libreria jQuery.
- var Growl = {
- init:function(width,height,duration) {
- Growl.msg = [];
- Growl.active = false;
- Growl.duration = (duration || 2)*1000;
- Growl.height = height/2;
- Growl.width = width/2;
- $(document).ready(function() {Growl.create();});
- },
- create:function() {
- $('body').append('<p id="growlmsg"></p><div id="growl" class="growl"></div>');
- },
- queue:function() {
- var msg = Growl.msg.pop();
- if(msg) Growl.show(msg);
- },
- show:function(msg) {
- if(Growl.active) {
- Growl.msg.push(msg);
- return;
- }
- Growl.active = true;
- var top = document.documentElement.scrollTop || window.pageYOffset || 0;
- var left = document.documentElement.scrollLeft || window.pageXOffset || 0;
- var h = (window.innerHeight || document.documentElement.clientHeight || 0)/2;
- var w = (window.innerWidth || document.documentElement.clientWidth || 0)/2;
- var he = top+h-Growl.height, we = left+w-Growl.width;
- $('#growlmsg').top(he+'px').left(we+'px').show().html(msg).fadeTo(1000,1);
- $('#growl').top(he+'px').left(we+'px').show().fadeTo(1000,0.8);
- setTimeout(function() {Growl.hide();}, Growl.duration);
- },
- hide: function() {
- $('#growlmsg').fadeOut("slow",function() {Growl.display($(this));});
- $('#growl').fadeOut("slow",function() {
- Growl.display($(this));
- Growl.active = false;
- setTimeout(function() {Growl.queue();}, 200);
- });
- },
- display: function(e) {
- e.hide();
- }
- };
Metodos de uso
Growl.show('Mensaje que queremos mostrar');
8 comentarios
# Escrito por Daniel hace 3 años, 3 meses
Vaya, te ha quedado fenomenal y el tema de aplicar los efectos esta de luho, lo que veo es que jQuery no implementa ninguna funcion para facilitar las posiciones de pantalla no?.
No estaria mal alguna funcionalidad.
Gracias por el codigo.
# Escrito por Alex Sancho hace 3 años, 3 meses
Seguro del todo no estoy, aun tengo que mirarme con mas tranquilidad la documentacion de jquery, pero yo no he sabido encontrar ningun metodo nativo para hacerlo.
Gracias a ti por el script, esto no es mas que una mera adaptacion ;)
salu2
# Escrito por Orlando hace 2 años, 9 meses
hola, gracias por el post pero no se entiende bien, no dices si hace falta un CSS o que version de jquery es necesaria
# Escrito por Alex Sancho hace 2 años, 9 meses
@Orlando: Puesto que la idea original es de Daniel, te remito al post que publico, donde podras ver el css que utiliza el script. Respecto a la version de jQuery, deberia de funcionar correctamente con la ultima.
Salu2
# Escrito por Orlando hace 2 años, 9 meses
Gracias por ru comentarion, pero la verdad estoy algo confundido, no entiendo bien si el codigo que pones debo ponerlo dentro de mi pagina, o usar el growl.js que tienes en tu pagina, o el del otro amigo, ya que cuando llamo a la funcion que mencionas dice que no la encuentra (Call to undefined function: show()) favor perdona mi torpesa
# Escrito por Orlando hace 2 años, 9 meses
Hola cuando podras responder mi pregunta?
# Escrito por Rodrigo hace 1 año, 12 meses
Hola !! Gracias por la adaptación a jquery, he estado experimentando con esto para utilizarlo en un proyecto, pero me hacía falta que mostrara imágenes, pudiera cambiar el tamaño y tuviera mas efectos como el growl de mi leopard.
Si quieres la versión que modifiqué, con gusto te la mando para que le eches un vistazo.
Gracias de nuevo !!
# Escrito por Anonymous hace 1 año, 8 meses
no funciona tu link de ejemplo del codigo :S
existe la posibilidad de corregirlo?