Tema: Función para mostrar alertas / notificaciones con JQUERY
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 01/05/2010, 14:07
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 9 meses
Puntos: 20
Respuesta: Función para mostrar alertas / notificaciones con JQUERY
Lo conseguí asignándole una id para cada mensaje

Código completo

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Mensaje superior</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  7. <script type="text/javascript" src="jquery.jgrowl_minimized.js"></script>
  8. <link rel="stylesheet" href="jquery.jgrowl.css" type="text/css" />
  9.  
  10. <script type="text/javascript">
  11.  
  12. $(document).ready(function() {
  13.     $('#notificacion').jGrowl("Has recibido un mensaje nuevo de Darucilla!", { 
  14.     sticky: false,
  15.     theme: 'verde',
  16.     closer: false
  17.     });
  18.     $('#notificacion2').jGrowl("Has recibido un mensaje nuevo de Darucilla!", { 
  19.     sticky: true,
  20.     theme: 'rojo',
  21.     closer: false
  22.     });
  23.  
  24. });
  25.  
  26. </script>
  27. <style type="text/css">
  28. div.jGrowl div.verde {
  29.     background-color: #77EF6A;
  30.     color: #000;
  31.     width:  800px;
  32.     height:20px;
  33. }
  34. div.jGrowl div.rojo {
  35.     background-color: #EF6A77;
  36.     color: #000;
  37.     width:  300px;
  38.     height:20px;
  39. }
  40.  
  41. body > div.jGrowl.top-center {
  42.     top:                0px;
  43.     left:               10%;
  44. }
  45.  
  46. body > div.jGrowl.bottom-left {
  47.     left:               0px;
  48.     bottom:             0px;
  49. }
  50.  
  51. body > div.jGrowl.top-right {
  52.     right:              0px;
  53.     top:                0px;
  54. }
  55.  
  56. </style>
  57. </head>
  58. <body>
  59. <p>aaaaaaaaaaaaaaaaaaa</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  60. <p>bbbbbbbbbbbbbbbbbbbb</p><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  61. <div id="notificacion" class="top-center"></div>
  62. <div id="notificacion2"></div>
  63. </body>
  64. </html>

Lo guay ahora sería que el mensaje lo cogiese dinámicamente, es decir, que continuamente (ej. cada 5 min.) estuviese preguntando a una página si hay nuevas notificaciones y si hubiese alguna la mostrase, esto se puede hacer? es algo común para saber si te llega algun mensaje de un usuario mientras estas visitando la página web no?

Muchas gracias!