Problema con libreria!

Hola experto, tanto tiempo, como andas?
Te comento que estoy haciendo una pagina web para una distribuidora.
La misma cuenta con una seccion !Novedades!, para saber de los productos nuevos...
La idea era de que el usuario ni bien entre al index le aparezca un popUp diciendole que estaba disponible dicha seccion.
Para eso encontre un popUp muy elegante denominado gritter, escrito en jquery
me puse a investigar para implementarlo...
la pagina del script es este:
http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/
he probado de todo para lograr que se me ejecute ni bien termine de cargar el index.
lo que hice fue lo siguiente...
agregue los archivos a la cabercera:
<link rel="stylesheet" type="text/css" href="css/css_popup/jquery.gritter.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.3.2');</script>
<script type="text/javascript" src="css/css_popup/js/jquery.gritter.min.js"></script>
luego hice una funcion:
<script type="text/javascript">
$(document).ready(function(){
$('#add-sticky').load(function(){
var unique_id = $.gritter.add({
// (string | mandatory) the heading of the notification
title: 'This is a sticky notice!',
// (string | mandatory) the text inside the notification
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
// (string | optional) the image to display on the left
image: 'http://s3.amazonaws.com/twitter_production/profile_images/132499022/myface_bigger.jpg',
// (bool | optional) if you want it to fade out on its own or just sit there
sticky: true,
// (int | optional) the time you want it to be alive for before fading out
time: '',
// (string | optional) the class name you want to apply to that specific message
class_name: 'my-sticky-class'
});
// You can have it return a unique id, this can be used to manually remove it later using
/*
setTimeout(function(){
$.gritter.remove(unique_id, {
fade: true,
speed: 'slow'
});
}, 6000)
*/
return false;
});
});
</script>
tambien en la cabercera.
Eso seria suficiente para que el popUp inicie al cargar el index
La verdad que he hecho varias funciones pero ninguna da resultado
Espero tu respuesta experto.
Un abrazo
1

1 Respuesta

109.400 pts. Mas de 15 años de experiencia en Java, Javascript y HTML
¿Te has bajado los ficheros "query.gritter.css" y "jquery.gritter.min.js" a tu servidor? Por que si no, no te va a funcionar tal y como lo tienes. O te los bajas y los colocas en las carpetas adecuadas, o llamas a:
http://www.boedesign.com/demos/gritter/css/jquery.gritter.css
http://www.boedesign.com/demos/gritter/css/css_popup/js/jquery.gritter.min.js
hola carlos....
he probado haciendo como dijiste
<link rel="stylesheet" type="text/css" href="css/css_popup/jquery.gritter.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.5');</script>
<script type="text/javascript" src="css/css_popup/js/jquery.gritter.min.js"></script>
pero tampoco pasa nada
y despues puse esto en la cabecera...
----------------------------------------------------
<script type="text/javascript">
$(window).load(function(){
$.gritter.add({
// (string | mandatory) the heading of the notification
title: '¡Plataformas para piscinas!',
// (string | mandatory) the text inside the notification
text: '<a href="plataformas.php" style="color:#ccc"> Leer mas</a> sobre elevadores para piscinas. ',
// (string | optional) the image to display on the left
image: 'imagenes/nuevo.png',
// (bool | optional) if you want it to fade out on its own or just sit there
sticky: false,
// (int | optional) the time you want it to be alive for before fading out
time: 18000
});
return false;
});
</script>
--------------------------------------------------
eso seria suficiente para que apareciera el popUp
Encontre una pagina que utiliza este mismo popUp...
http://www.elevadorneumatico.com.ar/
si te fijas, cuando termina de cargar el index, aparece la nitificacion abajo a la derecha.
me fije en el codigo y lo hace de la misma forma que lo hago yo...
Espero tu respuesta
Saludos
He hecho esta prueba básica y me funciona, poniendo url's absolutas en la llamada a la css y script del gritter:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.elevadorneumatico.com.ar/css/jquery.gritter.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">google.load('jquery', '1.3.2');</script>
<script type="text/javascript" src="http://www.elevadorneumatico.com.ar/js/jquery.gritter.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$.gritter.add({
// (string | mandatory) the heading of the notification
title: '¡Plataformas para piscinas!',
// (string | mandatory) the text inside the notification
text: '<a href="plataformas.php" style="color:#ccc"> Leer mas</a> sobre elevadores para piscinas. ',
// (string | optional) the image to display on the left
image: 'imagenes/nuevo.png',
// (Bool | optional) if you want it to fade out on its own or just sit there
Sticky: false,
// (Int | optional) the time you want it to be alive for before fading out
Time: 18000
});
return false;
});
</script>
</head>
<body>
Hola!
</body>
</html>
Yo creo que tu error tiene que ver con la url de la css y el js del gritter. Revisa que tienes estos archivos en local, y que la ruta es la correcta.
Hola carlos,
te comento que cuando lo probe no andaba, pero despues me di cuenta que tenia otros archivos jquery inicializados y era por eso que no cargaba el popUp. Es como se se pisaban los archivos entre si.
Muchas gracias por tu aydua
Nos veremos en la proxima!
Saludos
Diego

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas