Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Mensaje flotante informativo jquery

Hola amigos les traigos un ejemplo basico como pueden hacer un mensaje flotante con jquery

​Paso 1: Instalar jQuery UI en la plantilla:


Para poder ejecutar correctamente las funciones deberás instalar jQuery UI antes de </head> mediante el siguiente código:

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

Si ya tienes el archivo enlazado en tu plantilla omite este paso.

Paso 2: El marcado del documento:


Después de <body> deberás incluir el siguiente contenedor:


<div id="nota-informativa">
<!--Inserta el texto del mensaje acá -->
</div>

No olvides incluir algún fragmento de texto que desees mostrar.

Paso 3: Añadir CSS al contenedor:


Ahora antes de ]]></b:skin> deberás añadir el siguiente código con las reglas del contenedor:

#nota-informativa {
padding:5px; /*Espaciado interno*/
width:180px; /*Ancho del contenedor*/
text-align:center; /*Alineación del texto*/
background-color:#FFEE88; /*Color de fondo*/
position:fixed; /*Permite que se mantenga estático*/
display:none; /*Oculta el contenedor*/
left:200px; /*Separación del borde izquierdo*/
bottom:80px; /*Separación inferior del borde*/
box-shadow:0 0 5px #555; /*Sombras CSS3*/
}


Paso 4: Incluir el script con la función en la plantilla:


En este paso repasaremos los conceptos básicos para ejecutar una función, recuerda que al igual que Javascript nativo, necesitas incluir todo dentro de un evento, en nuestro caso haremos que la función empiece al inicio de carga de la página:

<script type="text/javascript">
$(document).ready(function () {
// Nuestro script cargará cuando el documento haya cargado al 100%
});
</script>

Debido a que el selector de nuestro contenedor es #nota-informativa, procederemos a escribir nuestro script, para ello utilizaremos 4 efectos:

Retardo del script (.delay) >> Uso de .show >> Retardo del siguiente efecto >> Uso de .hide

Si no se entiende, al ver el script posiblemente se pueda ver más claramente:

<script type="text/javascript">
$(document).ready(function () {
$("#nota-informativa")
.delay(2500) // Tiempo del retraso en milisegundos antes de que aparezca el contenedor
.show( "bounce", { times:3, distance:100, direction:'down' }, 2000 ) // Uso de .show, específicamente con bounce y algunos parámetros específicos de esta animación.
.delay(2000) //Tiempo de duración del contenedor en la página
.hide( "drop", { direction: "down" }, "slow" ); //Uso de .hide, con el efecto drop.
});
</script>

Los valores numéricos corresponden a tiempos, y en el caso de bouncing en "distance" es la altura máxima de rebote.

Cada efecto es distinto y tiene distintas opciones, pero básicamente sería lo mismo. Si deseas ver una lista de efectos compatibles puedes revisar la documentación de jQuery UI, en el apartado Effect.

Si te ha gustado el efecto de los ejemplos, puedes observar el código fuente que se muestra a continuación, si quieres que se ejecute alguno de manera automática, no olvides reemplazar el evento al que se expone a principios del paso 4:


Efecto Puff:


Marcado HTML:

<div class="nota-informativa" id="puff">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>

Script:


<script>
$( "#handler-puff" ).click(function() { // PUFF
$( "#puff" ).show( "puff", 1000 )
.delay(2000)
.hide( "puff", 1000 );
});

</script>


Efecto Bounce:


Marcado HTML:


<div class="nota-informativa" id="bounce">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>

Script:


<script>
$( "#handler-bounce" ).click(function() { // BOUNCE
$( "#bounce" ).show( "bounce", { times:3, distance:100, direction:'down' }, 2000 ).delay(2000).hide( "bounce", { times:1, distance:100, direction:'down' }, 1000 );
});

</script>


Efecto Blind:


Marcado HTML:

<div class="nota-informativa" id="blind">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magnaa.
</div>

Script:

1
<script>
$( "#handler-blind" ).click(function() { // BLIND
$( "#blind" ).show( "blind", { direction:'down' }, 1000 )
.delay(2000)
.hide( "blind", { direction:'down' }, 1000 );
});

</script>


Efecto Explode:


Marcado HTML:

<div class="nota-informativa" id="explode">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>

Script:


<script>
$( "#handler-explode" ).click(function() { // EXPLODE
$( "#explode" ).show( "explode", 500 )
.delay(2000)
.hide( "explode", 500 );
});
</script>


CSS Universal de todos los ejemplos:

.nota-informativa {
padding:5px;
width:180px;
text-align:center;
background-color:#FFEE88;
position:fixed;
display:none;
left:200px;
bottom:80px;
box-shadow:0 0 5px #555;
}


Botones de ejecución:

<center>
<input class="button" id="handler-puff" type="button" value="Efecto Puff" /> <input class="button" id="handler-bounce" type="button" value="Efecto Bounce" /> <input class="button" id="handler-blind" type="button" value="Efecto Blind" /> <input class="button" id="handler-explode" type="button" value="Efecto Explode" /></center>
0
Puntos
2616
Visitas
0
Resp
Por fc2014 hace 114 meses
Experto
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate