• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Cuadro deslizable al final de una página con jQuery

cuadro deslizable jquery

Muchas veces cuando leemos algún artículo de una página web, al llegar al final del artículo nos aparece una caja o cuadro de forma deslizante en la parte de la derecha abajo que nos ofrece cierta información.

Este cuadro se puede usar, por ejemplo, para mostrar un artículo relacionado o cualquier otro tipo de información que tenga que ver con la web en cuestión.

Implementarlo es bastante sencillo, lo conseguiremos a través de la librería jQuery y añadiendo un poco de CSS y HTML. Explicaremos todo al detalle donde va cada cosa y cómo funciona para que no haya pérdida.

Un ejemplo lo podéis ver en esta misma página. Si bajáis casi hasta el final de este artículo, veréis como se desplaza en la parte de la derecha abajo un cuadro informativo.

Para empezar descargamos los archivos, el enlace se encuentra más abajo. Dentro del archivo descargado encontramos tres archivos principales. Lo primero, copiamos el archivo de imagen close.gif y lo pegamos en la carpeta de imágenes de nuestro sitio web, luego comprobar la ruta hacia esta imagen en el CSS que sea la correcta.

Vamos a explicar el proceso siguiendo las siguientes tres fases:

MARCADO HTML

Primero necesitamos que el párrafo, donde queremos que empiece a mostrarse el cuadro deslizante, lleve un id "last", como muestro a continuación.

<p id="last">Algún párrafo de texto</p>

A continuación de ese párrafo, tenemos que poner el siguiente código HTML, que engloba toda la información del cuadro deslizante.

<div id="slidebox">
<a class="close"></a>
<p>Esto es un ejemplo de muestra para el artículo:</p>
<h2>Cuadro deslizable al final de una página con jQuery</h2>
<a class="more" href="#">Leer Más »</a>
</div>

El elemento con clase close le dará al usuario la opción de cerrar el cuadro para que no vuelva a aparecer.

CSS

Abrimos el archivo style-cuadrodeslizable.css que previamente hemos descargado y veremos dentro los estilos del cuadro deslizante. Copiamos todo el código y lo pegamos en nuestro archivo de estilos de nuestro sitio web. Vamos a explicar esos estilos.

Damos al cuadro una posición fija para que siga al usuario mientras éste se desplaza. El valor inicial de la derecha, hará que el cuadro se oculte, nosotros vamos a hacerlo deslizar hacia fuera con algo de jQuery. Poner la anchura y altura a vuestro gusto.

#slidebox{
    width:200px;
    height:245px;
    padding:10px;
    background-color:#fff;
    border-top:3px solid #ec9b1b;   
    position:fixed;
    bottom:0px;
    right:-430px;
    -moz-box-shadow:-2px 0px 5px #d0d4db;
    -webkit-box-shadow:-2px 0px 5px #d0d4db;
    box-shadow:-2px 0px 5px #d0d4db;
}

Los elementos del texto y del enlace Leer Más tendrán el siguiente estilo. Cambiarlos para que queden bien en vuestra web.

#slidebox p, a.more{
    font-size:11px;
    text-transform:uppercase;
    font-family: 'Lato';
    letter-spacing:1px;
    color:#000;
}
a.more{
    cursor:pointer;
    color:#000;
}
a.more:hover{
    text-decoration:none;
	color:#ec9b1b;
}
#slidebox h2{
    color:#E28409;
    font-size:17px;
    margin:10px 20px 10px 0px;
    font-family: 'Lato';
}

Y por último, el estilo para la cruz de cierre del cuadro. Comprobar que la ruta del gif esté bien dirigida. Si no os gusta esa cruz podéis poner otra.

a.close{
    background:transparent url(../img/close.gif) no-repeat top left;
    width:13px;
    height:13px;
    position:absolute;
    cursor:pointer;
    top:10px;
    right:10px;
}
a.close:hover{
    background-position:0px -13px;
}

JAVASCRIPT

En primer lugar, incluimos la librería jQuery antes de la etiqueta final </body>. En el archivo descargado os he puesto una versión de jQuery, seguramente ya tenéis una versión superior, de ser así, no hacer caso a ese archivo y simplemente incluir la librería al archivo que tengáis. Un ejemplo a continuación de cómo se haría. Cambiar la ruta por la vuestra.

<script src="jquery/jquery-1.4.2.min.js"></script>

A continuación, añadimos el código de las dos siguientes funciones. Una de ellas es para determinar si hemos alcanzado el elemento de disparo mientras desplazamos y si es así hacer que el cuadro se deslice fuera. La otra función hace que el cuadro desaparezca al hacer clic en la pequeña cruz de cierre. Añadir este código después de la inclusión de la biblioteca jQuery y antes de la etiqueta final </body>.

<script type="text/javascript">
$(function() {
	$(window).scroll(function(){
		var distanceTop = $('#last').offset().top - $(window).height();

		if  ($(window).scrollTop() > distanceTop)
			$('#slidebox').animate({'right':'0px'},300);
		else
			$('#slidebox').stop(true).animate({'right':'-430px'},100);
	});

	$('#slidebox .close').bind('click',function(){
		$(this).parent().remove();
	});
});
</script>

Para los que utilizáis Wordpress os puede servir el plugin End Page Slide Box.

Y eso es todo! A continuación os dejo el enlace de descarga con todos los archivos. Espero que os haya gustado el tutorial y que podáis hacer algún uso de este cuadro deslizante.

Esto es un ejemplo de muestra para el artículo:

Cuadro deslizable al final de una página con jQuery

Leer Más »

ENLACE DE DESCARGA
Cuadro deslizable al final de una página con jQuery (Iborra Web Design)

CONTRASEÑA DEL ARCHIVO
iborra.es

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (0)

No hay Comentarios todavía en este post. Podrías ser el primero!

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code