Deprecated: Creation of dynamic property wpdb::$categories is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php on line 760 Deprecated: Creation of dynamic property wpdb::$post2cat is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php on line 760 Deprecated: Creation of dynamic property wpdb::$link2cat is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php on line 760 Deprecated: Using ${var} in strings is deprecated, use {$var} instead in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/comment-template.php on line 1745 Deprecated: wp_getimagesize(): Implicitly marking parameter $image_info as nullable is deprecated, the explicit nullable type must be used instead in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/media.php on line 5180 Deprecated: Creation of dynamic property POMO_FileReader::$is_overloaded is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/streams.php on line 26 Deprecated: Creation of dynamic property POMO_FileReader::$_pos is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/streams.php on line 29 Deprecated: Creation of dynamic property POMO_FileReader::$_f is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/streams.php on line 160 Deprecated: Creation of dynamic property MO::$_gettext_select_plural_form is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/translations.php on line 293 Deprecated: Creation of dynamic property WP_Block_Type::$skip_inner_blocks is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-block-type.php on line 357 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php:760) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/feed-rss2.php on line 8 JQuery – Ideas Fugaces https://www.pcpolis.es/blog Algunas buenas ideas que se presentan sin avisar... Fri, 22 Nov 2019 17:33:18 +0000 es hourly 1 https://wordpress.org/?v=5.9.13 Animación de Imagen de Fondo con JQuery Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 https://www.pcpolis.es/blog/css/animacion-de-imagen-de-fondo-con-jquery/ Sun, 22 Aug 2010 15:48:54 +0000 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 https://www.pcpolis.es/blog/?p=279 Lo que sique es una continuación del efecto "nudging", que vimos anteriormente. En este caso animaremos el fondo como solíamos hacer en flash, con la ventaja de que ahora ganamos un poco en accesibilidad.

Ej. 1: animación vertical

HTML

Partimos de una simple lista desordenada, a cuyo elemento padre (ul) hemos otorgado la regla «nav».

CSS

Los elementos de la navegación (li) flotan a la izquierda y se les ha dado un alto de línea equivalente al de la parte de la imagen a mostrar, para poder centrar el texto. Cada enlace se muestra en bloque.

Hay que destacar que el estado hover ha sido declarado, por lo que los usuarios que no tengan activado javascript en su navegador, podrán ver al menos la posición final.

Se ha establecido una posición inicial para este fondo, de forma que funcione en los navegadores que no establecen una posición de forma predeterminada.

Imagen

Se pueden conseguir diferentes efectos variando el formato y el movimiento de la imagen. En este caso se desplazará hacia arriba hasta mostrar la banda decorativa que está en la parte inferior y que servirá además de marcador. Esta configuración se repetira también para el elemento activo.

Imagen de Fondo

Fig. 1: Imagen de Fondo

El antes y el después para la imagen de la Fig. 1, se consigue con un desplazamiento vertical de 79 pixeles, lo que corresponde a la mitad de su altura. De manera predeterminada en la hoja de estilos, la banda inferior permanecerá oculta hasta que el usuario pase el ratón sobre el enlace.

Script

Finalmente, el script es muy simple: la imagen del fondo debe moverse cuando el usuario pasa el ratón por encima, variando su posición. Los eventos implicados son «mouseover» y «mouseout».

Hay que destacar en esta función que cada animación es detenida antes de su comienzo, y con esto se evitan comportamientos inapropiados o repeticiones innecesarias que se producen cuando el ratón pasa repetidas veces por un enlace. jQuery también tiene un método .hover que puede ser utilizado para simplificar el script.

Por último, hay que recordar que es necesario, además de la propia librería jquery, el plugin Background-Position que permite estos movimientos de la imagen de fondo. Ambos ficheros deben ser enlazados de la manera habitual en la cabecera del documento.

Ver Código (+/-)

HTML


<ul id="nav">
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Contactar</a></li>
</ul>

CSS

/*
   --- Animación de Imagen de Fondo en Menu  ---
*/

#animar_fondo ul {
	list-style:none;
	margin:0;
	padding:0;
	height:79px;
}

#animar_fondo li {
	float:left;
	width:153px;
	height:79px;
	margin:0;
	padding:0;
	text-align:center;
	line-height:79px;
}
#animar_fondo li a {
	display:block;
	color:#d4b596;
	text-decoration:none;
}
#animar_fondo li a {
	background-image: url(../imagenes/animar_fondo/menu_fondo.jpg);
	background-repeat: repeat;
	background-position: 0 0;
}
#animar_fondo li a:hover {
	background-position:0px -79px;
}

JQuery

/*
--- Animación de Imagen de Fondo en Menu
*/

$(function(){
	$('#nav a')
		.css( {backgroundPosition: "0 0"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundPosition:"(0 -79px)"}, {duration:500})
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:200, complete:function(){
				$(this).css({backgroundPosition: "0 0"})
			}})
		})
});

La referencia para esta práctica la he tomado del blog de Jonathan Snook aquí. Espero que hayas disfrutado del tutorial y que te haya sido de utiliad. Que tengas un buen día.

]]> Acordeon con JQuery y CSS Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 https://www.pcpolis.es/blog/css/acordeon-con-jquery-y-css/ Wed, 21 Jul 2010 12:34:08 +0000 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 https://www.pcpolis.es/blog/?p=269 Este es uno de los widgets que más se están usando por su funcionalidad y sencillez. El códio lo he visto en la página de SohTanaka, y me gustó mucho la forma en que presenta el tutorial, así que he decidido seguir sus consejos e intentar analizar el código para ver cómo funciona, además de aportar algo más en el diseño.

Ej. 1: Acordeon con JQuery y CSS

JQuery + CSS
AcordeonMétodo: .toggle()

Diseño y Mantenimiento Web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor. Duis vel tortor sit amet orci egestas laoreet id ac nibh.

MAQUETACIÓN

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Distintos lengüajes de diseño

HTML, CSS, JavaScript

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor.

Duis vel tortor sit amet orci egestas laoreet id ac nibh. Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris.

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Proyectos

Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris. Fusce mattis euismod mi, ut condimentum lectus consectetur quis. Ut lectus sem, ullamcorper ut gravida sagittis, consequat scelerisque lacus.

Desarrollo y Mantenimiento

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Páginas Comerciales

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor. Duis vel tortor sit amet orci egestas laoreet id ac nibh. Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris. Fusce mattis euismod mi, ut condimentum lectus consectetur quis. Ut lectus sem, ullamcorper ut gravida sagittis, consequat scelerisque lacus.

Asesoramiento

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

HTML

Consiste en varios pares de bloques compuestos de Título y Contenido.

<div class="acordeon">
    <!--Pares de Título y Contenido -->
    <!--Par-1 -->
    <h2 class="accion"><a href="#">Título</a></h2>
    <div class="acordion_cont">
        <div class="bloque">
        	<!--Texto e Imágenes -->
        </div>
    </div>
</div>
CSS

Lo más importante es el fondo y el padding de la etiqueta h2. Aquí se ha utilizado una misma imagen para los dos estados, activo y reposo, variando la posición de la imagen de top para el esado en reposo y bottom para el estado activo.

La clase «acordion_cont» asignada al div que le sigue al título, será luego utilizada para localizar el elemento que debe mostrarse y ocultarse. Contine a su vez un div al que se le ha aplicado la clase «bloque» con un padding de 20px.

JQuery
/* Acordeon */
$(document).ready(function(){
	$(".acordion_cont").hide();
	$('.accion:first').addClass('active').next().slideToggle("slow");
	$('.accion').click(function(){
	if( $(this).next().is(':hidden') ) {
		$('.accion').removeClass('active').next().slideUp();
		$(this).toggleClass('active').next().slideDown();
	}
	return false;
	});
});

Cuando se carga el documento:

    1. Se oculta todo el contenido con la clase que se ha pasado como localizador, en este caso: .acordion_cont
    2. La pseudoclase :first permite determinar el primero de los elementos al que se le ha aplicado la clase ‘accion’, para activarlo. Luego se localiza de manera similar el siguiente elementto del mismo tipo (div) y se le aplica el método .slideToggle(), que consiste en colapsar alternativamente su altura.

Cuando hacemos click:

    1. Se le aplica el método .toggleClass() al elemento pulsado. Este método permite agregar o quitar la clase ‘active’ que es la que se le ha pasado como parámetro. Acto seguido se determina el siguiente elemento y se muestra mediante .slideDown().
    2. Una línea más se ha agregado como condicional, para completar la funcionalidad del widget y que no se nos queden abiertas las ventanas según las usamos. Para ello se usa el condicional «if» que determina en primer lugar si presionamos el título de una ventana que esté cerrada, de otra manera no ocurrirá nada. Si la ventana está cerrada, quitará todos los elementos que tengan la clase ‘active’ y cerrará el contenedor abierto. Finalmente otorga la clase ‘active’ al elemento pulsado y abre el contenedor que le corresponde, y que es el siguiente.
]]> Menú con JQuery y CSS Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 https://www.pcpolis.es/blog/css/menu-con-jquery-y-css/ Sat, 17 Jul 2010 17:02:29 +0000 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 https://www.pcpolis.es/blog/?p=264 ¿Echas de menos Flash? Los efectos que se logran con este programa son irremplazables, pero ha habido que ceder un poco a favor de la funcionalidad e interactividad de la Web. En cualquier caso Flash también es código, así que para conseguir algunos movimientos útiles también nos podemos ayudar de JavaScript, en este caso de la librería JQuery.

Ejemplo 1: Menú con Desplazamiento Horizontal

HTML

Un div contenedor (#menu_hor) y otros tantos div(#menu1, #menu2 y #menu3) como elementos de menú se quiera.

CSS

Es importante que el div contenedor (#menu_hor) tenga asignada una posición relativa, de esa manera al asignarle una posición absoluta a los tres menus interiores, su posición será con respecto a este div. Otra propiedad importante sera que el desbordamiento sea oculto, para que únicamente muestre aquella parte de las imagenes que nos interesa. Sus medidas dependeran de las imagenes que se utilicen.

Para los elementos del menú, la clase que apliquemos servirá de referenencia para ejecutar los cambios con javascript. Aquí lo importante es su posicionamiento, que debe ser absoluto, y su ubicación dentro del contenedor, que dependerá de cada elemento: left:0px, left:40px y left:80px. De esa forma se muestran las leyendas situadas en el extremo izquierdo.

JQuery

La clase JavaScript necesaria para conseguir este efecto es .animate(), su sintaxis es la siguiente:

.animate( properties, [ duration ], [ easing ], [ callback ] )

y la función clave sería la siguiente:

$(document).ready(function(){

	/* menu1 */
	$("#menu1").mouseover(function(){
      $(".bloque2").animate({"left": "440px"}, "slow");
	  $(".bloque3").animate({"left": "480px"}, "slow");
    });
});
  1. En primer lugar nos auxiliamos de un gestor de eventos ( mouseover) que se ha asignado al div #menu1, que desencadena el resto de acciones
  2. La función clave, a la que se le pasan dos parámetros: la propiedad css de la capa que tiene asignada la clase bloque2 y el tiempo en el que se desea que se ejecute esta acción.

El resto del script, que puedes ver a continuación en la sección de código, es una variación de esta primera parte, combinándola como se desee que ocurran las transiciones en el resto de elementos del menú.

Ver Código(+/-)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://www.pcpolis.es/blog/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){

/* menu1 */
$("#menu1").mouseover(function(){
$(".bloque2").animate({"left": "440px"}, "slow");
$(".bloque3").animate({"left": "480px"}, "slow");
});

/* menu2 */
$("#menu2").mouseover(function(){
$(".bloque2").animate({"left": "40px"}, "slow");
$(".bloque3").animate({"left": "480px"}, "slow");
});

/* menu3 */
$("#menu3").mouseover(function(){
$(".bloque3").animate({"left": "80px"}, "slow");
$(".bloque2").animate({"left": "40px"}, "slow");
});

});
</script>
<style>
img {
border:none;
}

#contenedor {
width:520px;
background-color: #999999;
height:250px;
overflow:hidden;
position:relative;
}

.bloque1 {
background-color:#757C08;
left:0px;
width:440px;
height:250px;
margin:0px;
top: 0px;
position:absolute;
}

.bloque2 {
background-color:#6F8C94;
left:440px;
width:440px;
height:250px;
margin:0px;
top: 0px;
position:absolute;
}

.bloque3 {
background-color:#782748;
left:480px;
width:440px;
height:250px;
margin:0px;
top: 0px;
position:absolute;
}
</style>
</head>
<body>
<div id="contenedor">



</div>
</body>
]]> Fichas con JavaScript Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 https://www.pcpolis.es/blog/css/fichas-con-javascript/ Thu, 01 Jul 2010 16:19:19 +0000 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 https://www.pcpolis.es/blog/?p=259 En este tutorial se muestra la manera de hacer fichas ( Slick Tabbed ) similares a las que se pueden hacer con Dreamweaver y la librería Spry. En este caso la librería que utilizaremos en primer lugar será JQuery, pero lo importante es comprender la manera en que está construido este fichero y cómo utiliza tanto los elementos de Estilos CSS como los scripts que permiten su ejecución.

Este es el resultado final:

Olvídate de MíFicha Técnica

  • Título OriginalEternal Sunshine of the Spotless Mind
  • Año2004
  • PaísU.S.A.
  • DirectorMichel Gondry
  • RepartoJim Carrey, Kate Winslet
  • Joel (Jim Carrey) se queda asombrado y aturdido cuando se entera de que su novia Clementine (Kate Winslet) ha borrado de su cerebro los recuerdos de su tumultuosa relación. Desesperado, Joel contacta con el inventor del proceso, el Dr. Howard Mierzwiak (Tom Wilkinson) para eliminar cualquier recuerdo de Clementine de su propia memoria.Pero sucede que, mientras los recuerdos progresivamente desaparecen, Joel comienza a redescubrir su pasión inicial. (FILMAFFINITY)
Trailer situado en Youtube.

Lo que viene a continuación es una interpretación del excelente tutorial en inglés que encontré en la página de nettut+, y esta vez voy evitar la técnica de resumen que caracteriza a este blog por respeto a la meticulosidad y paciencia que nos ha ofrecido su autor. Por supuesto, he procurado aportar algo yo también.

Aquí puedes ver el Ejemplo de NetTut+ en acción.

Paso 1: crear una apariencia adecuada para las fichas

He descargado el psd del ejemplo para practicar, pero luego he creado una apariencia diferente en Photoshop. Aunque, como podrán comprobar, la mayor parte del formato se consigue con los colores de fondo.

Paso 2: crear la estructura del fichero

1) Crear un div contenedor, lo que nos facilitará su manipulación.

2) Crear el encabezado, probablemente con una etiqueta de título (h)

3) Debajo hay que crear otro div que contenga todas las pestañas y el contenido. Será la que tenga el fondo gris oscuro (en el original).

4) Los siguiente será un div que contenga una lista desordenada en la que cada elemento (li) será una pestaña y sus enlaces <a> nos permitirán configurar su apariencia, darles comportamiento de rollovers y cambiar su estado a on/off.

5) Finalmente crearemos div en los que estará el contenido de cada pestaña, y lo mostraremos u ocultaremos dependiendo de qué pestaña esté activa. Todo quedaría de la siguiente manera:

¡Importante! Si no vez el código, recarga la página.

<div>
<h4>Heading</h4>
    <div>
        <ul>
            <li><A>Pestaña</A></li>
            <li><A>Pestaña</A></li>
            <li><A>Pestaña</A></li>
        </ul>
        <div>Contenido Tab 1</div>
        <div>Contenido Tab 2</div>
        <div>Contenido Tab 3</div>
</div>
Paso 3: crear el fondo en Photoshop

Yo he utilizado una superposición de motivo: polvo azul ( 128 x 128 ). También he creado dos degradados, uno para los enlaces y otro para el fondo de la ficha, lo que crea un bonito efecto de sombra.

polvo azul
Degradado del Enlace
Degradado del Fondo

Paso 4: crear los ficheros fichas.html y estilos.css
fichas.html

La estructura del fichero html quedaría como sigue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Ejemplo de fichas - Simple</title>
	<link rel="stylesheet" href="estilos.css" type="text/css" media="screen" />
</head>

<body>

<div id="tabbed_box_1" class="tabbed_box">
	<h4>Olvídate de mí<small>Ficha técnica</small></h4>
    <div class="tabbed_area">

        <ul class="tabs">
            <li><a href="" id="tab_1" class="active">Fichas</a></li>
            <li><a href="" id="tab_2">Sinopsis</a></li>
            <li><a href="" id="tab_3">Trailer</a></li>
        </ul>

        <div id="content_1" class="content">Contenido de la Ficha 1</div>
        <div id="content_2" class="content">Contenido de la Ficha 2</div>
        <div id="content_3" class="content">Contenido de la Ficha 3</div>

    </div>

</div>

</body>
</html>

Estos son algunos aspectos a destacar sobre la estructura del código:

  1. El título se ha colocado en un elemento <small> cuyo contenido de texto siempre será inferior en una unidad al tamaño del elemento que lo precede. Para un texto normal, equivaldría a <Font size = “-1”>
  2. Se le ha dado un id a los div para poder utilizarlos en la página.
  3. Se le ha dado una clase al elemento <ul>.
estilos.css

Estos son algunos de los aspectos a tener en cuenta para los estilos.

Hay que insistir que el método de ir dando los estilos de afuera hacia adentro se debe a la forma en que funcionan las Hojas de Estilo en Cascada, es decir, nos aseguramos que cualquier estilo de los elementos interiores se sobrescriba y no a la inversa.

Estilos del Título
  1. Centraremos el div contenedor #tabbed_box dándole un ancho determinado y asignando a los márgenes izquierdo y derecho la propiedad: auto.
  2. Se ha dado estilo a la etiqueta h4 como parte de un div (.tabbed_box h4) y no directamente, teniendo en cuenta que puede cambiar en página grandes. Se ha establecido su margen de fondo en 10 pix. Hay que tener en cuenta que muchos elementos tienen valores predeterminados y en el caso de la etiqueta h4 el margen de fondo es mayor que el que deseamos, por ello hay que especificarlo.
  3. Se le ha dado una posición relativa al elemento <small> para poder posicionarlo un poco más a la derecha y arriba. Su espacio entre letras se ha tenido que redefinir a 0, pues en caso contrario heredaria el espaciado -1 de la etiqueta h4.
Estilos de la Lista Desordenada
  1. Para los elementos de la lista desordenada, quitamos todos los paddings y margins otorgándoles un valor de cero. La propiedad ‘inline’ los mantendrá a todos dispuestos en la misma línea y no cada uno en una lína diferente, como correspondería a la forma predeterminada de display: block. También se eliminan los iconos que de manera predeterminada llevan todas las listas desordenadas.
Estilos de los enlaces de cada una de las tres pestañas
  1. Se han creado los estilos para los estados de: reposo, sobre y activo.
  2. En este paso se le dice a todos los elementos con la clase contenido que deben tener un fondo blanco, y se hacen invisibles los elementos que no están activos.

Nota.

Mas tarde, con el uso de JavaScript se alternarán los estados visible y oculto de estos elementos con las propiedades display: block y display:none.

Otros estilos a destacar
  1. Para eliminar el borde sobrante en la parte inferior, se ha utilizando un pseudo-selector denominado last-clild ( último elemento hijo ).

Código JavaScript

( sin JQuery )

  1. En primer lugar hay que crear un archivo javascrip con la función o funciones que permitirán ejecutar las acciones de ocultar y mostrar el contenido.

    2. La función javascript que utilizamos es la siguiente:

    function tabSwitch_2(active, number, tab_prefix, content_prefix) {   

    for (var i=1; i < number+1; i++) {
      document.getElementById(content_prefix+i).style.display = 'none';
      document.getElementById(tab_prefix+i).className = '';
    }
    document.getElementById(content_prefix+active).style.display = 'block';
    document.getElementById(tab_prefix+active).className = 'active';       

}

    En esta función se asume que tenemos un juego de pestañas y su correspondiente contenido con un prefijo que será: tab_1, tab_2 … and content_1, content_2 …

    El primer argumento de la función: active, hace referencia al elemento activo que debe mostrarse. El segundo argumento: number, se refiere al número de pestañas que están siendo usadas. Y el tercer y cuarto argumentos se refieren a los prefijos usados en los Ids de nuestros elementos del dom.

    – Eso significa que si queremos que haya dos ficheros, sólo tendremos que cambiar los prefijos y podremos usar la misma función todas las veces que queramos.

  2. Crear un enlace a este archivo en la cabecera del archivo html.
  3. Agregar código javascript en cada uno de los tres enlaces contenidos en los elementos li de la siguiente manera:
       <ul class="tabs">
            <li><a href="javascript:tabSwitch_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">Fichas</a></li>
            <li><a href="javascript:tabSwitch_2(2, 3, 'tab_', 'content_');" id="tab_2">Sinopsis</a></li>
            <li><a href="javascript:tabSwitch_2(3, 3, 'tab_', 'content_');" id="tab_3">Trailer</a></li>
        </ul>

( JQuery )

Podemos usar esta librería para dar un poco más de animación al fichero que hemos conseguido. Lo primero es ir al sitio oficial de JQuery y descargar la última versión.

La librería JQuery contiene una gran cantidad de funciones que permiten seleccionar grupos de elementos. Por ejemplo, si quisieramos seleccionar todos los enlaces (<a>) de una página y hacer que desaparecieran con un efecto de deslizado hacia arriba, tendríamos que poner en la cabecera de la página el siguiente codigo:

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

<script>

//Cuando se cargue el Dto. ejecuta el contenido ...

$(document).ready(function(){

$("a").slideUp();

});

</script>

Colocando el código anterior en la cabecera de nuestro documento podremos comprobar que todos los enlaces desaparecen con un efecto de deslizamiento hacia arriba.

Trabajo con los Selectores ( Pestañas )

Después de practicar, vamos a modificar el código de nuestras pestañas eliminando la parte de javascript y añadiendo el atributo title y una clase más: tab. De esta manera podremos referirnos a todos los elementos que contengan la clase tab o cuyo id corresponda al atributo title.

        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">Ficha</a></li>
            <li><a href="#" title="content_2" class="tab">Sinopsis</a></li>
            <li><a href="#" title="content_3" class="tab">Trailer</a></li>
        </ul>

Ahora, con estos dos elementos, se pueden utilizar todos los enlaces con la clase “tab” y se puede localizar cualquier elementos cuyo Id sea igual que el atributo title del enlace que haya sido pulsado. Necesitamos añadir el enlace a la librería en la cabecera de nuestra página y añadir una nueva función a nuestro fichero javascript:

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

Esta nueva función, básicamente, lo que hace es ocultar todas las pestañas cuando se carga el documento y dejar visible sólo la que está activa:

// cuando el documento se cargue, ejecuta el contenido ...
$(document).ready(function(){

// cuando se pulsa un enlace
$("a.tab").click(function () {

// desactiva todas las fichas
$(".active").removeClass("active");

// activa la ficha seleccionada
$(this).addClass("active");

// oculta los elementos con la clase 'content' con deslizamiento hacia arriba
$(".content").slideUp();

// Detecta el atributo 'title' de la ficha seleccionada y encuentra el elemento con el miso Id. Entonces lo muestra con un deslizamiento hacia abajo.
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();

});

});
</script>

Y con eso queda terminado nuestro ejemplo. En la página de Jquery hay una variante para la construcción de un fichero que aporta sencillez y otra manera de conseguir los mismos resultados.

Nos queda pendiente un ejemplo de fichero con las facilidades que nos brinda Dreamweaver, y la librería Spry. Espero que hayas disfrutado del tutorial.

A continuación tienes el código de mi ejemplo, varía sobre todo en los estilos, pues he tenido que adaptarlo a WordPress. Recuerda que el artículo original de Collis Ta’eed está muy bien detallado.

Ver Código (+/-)
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>Ejemplo de Fichas con JQuery</title>
    <!--Cargar los estilos -->
    <link rel=”stylesheet” href=”fichas_estilos.css” type=”text/css” media=”screen” />
    <!--Cargar la librería jquery el archivo con las funciones javascript -->
    <script src=”scripts/jquery-1.4.2.min.js”></script>
    <!--Cargar el archivo con las funciones javascript -->
    <script src=”fichas_functions.js” type=”text/javascript”></script>
</head>
<body>
<div id=”tabbed_box” class=”tabbed_box”>
  <h4>Olvídate de Mí<small>Ficha Técnica</small></h4>
  <div class=”tabbed_area”>
    <ul class=”tabs”>
      <li><a href=”#” title=”content_1″ class=”tab active”>FICHA</a></li>
      <li><a href=”#” title=”content_2″ class=”tab”>Sinopsis</a></li>
      <li><a href=”#” title=”content_3″ class=”tab”>Trailer</a></li>
    </ul>
    <div id=”content_1″ class=”content”>
      <ul>
        <li><img src=”imagenes/olvidate_de_mi.jpg” /></li>
        <li>Título Original<small>Eternal Sunshine of the Spotless Mind</small></li>
        <li>Año<small>2004</small></li>
        <li>País<small>U.S.A.</small></li>
        <li>Director<small>Michel Gondry</small></li>
        <li>Reparto<small>Jim Carrey, Kate Winslet</small></li>
      </ul>
    </div>
    <div id=”content_2″ class=”content”>
      <ul>
        <li>Joel (Jim Carrey) se queda asombrado y aturdido cuando se entera de que su novia Clementine (Kate Winslet) ha borrado de su cerebro los recuerdos de su tumultuosa relación. Desesperado, Joel contacta con el inventor del proceso, el Dr. Howard Mierzwiak (Tom Wilkinson) para eliminar cualquier recuerdo de Clementine de su propia memoria.
          <P>Pero sucede que, mientras los recuerdos progresivamente desaparecen, Joel comienza a redescubrir su pasión inicial. (FILMAFFINITY)</P>
        </li>
      </ul>
    </div>
    <div id=”content_3″ class=”content”>
      <ul>
        <li>Trailer situado en Youtube, con subtítulos.</li>
        <li>
          <object width=”425″ height=”344″>
            <param name=”movie” value=”http://www.youtube.com/v/IVpd3iGszU0&hl=es_ES&fs=1&”>
            </param>
            <param name=”allowFullScreen” value=”true”>
            </param>
            <param name=”allowscriptaccess” value=”always”>
            </param>
            <embed src=”http://www.youtube.com/v/IVpd3iGszU0&hl=es_ES&fs=1&” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed>
          </object>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>
estilos.css
@charset "utf-8";
/* CSS Document */

body {
	background-image:url(imagenes/fondo_2.jpg);
	margin:40px;
}

/* Centrar el contenido */
#tabbed_box {
	margin: 0px auto 0px auto;
	width:500px;
}

/* Encabezado */
.tabbed_box h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	color:#ffffff;
	letter-spacing:-1px;
	margin-bottom:10px;
}

.tabbed_box h4 small {
	color:#e3e9ec;
	font-weight:normal;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	position:relative;
	top:-4px;
	left:6px;
	letter-spacing:0px;
}

/* Elementos internos */
.tabbed_area {
	border:1px solid #494e52;
	background-color:#fff7b3;
	padding:8px;
}

/* Elementos de la lista */
ul.tabs {
	margin:0px; padding:0px;
}

ul.tabs li {
	list-style:none;
	display:inline;
}

/* Estilos a los enlaces de la lista desordenada */
ul.tabs li a {
	background-color:#464c54;
	color:#FFFFCC;
	padding:8px 14px 8px 14px;
	text-decoration:none;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	border:1px solid #464c54;
}
ul.tabs li a:hover {
	background-color:#2f343a;
	border-color:#2f343a;
}
ul.tabs li a.active {
	background-color:#ffffff;
	color:#282e32;
	border:1px solid #464c54;
	border-bottom: 1px solid #ffffff;
}

/* Estilos del contenido */
.content {
	background-color:#ffffff;
	padding:10px;
	border:1px solid #464c54;
}

#content_2, #content_3 { display:none; }

ul.tabs {
	margin:0px; padding:0px;
	margin-top:5px;
	margin-bottom:6px;
}

/* Paso 13. Agregar algunos estilos al contenido */
	.content ul {
	margin:0px;
	padding:0px 20px 0px 20px;
}
.content ul li {
	list-style:none;
	border-bottom:1px solid #d6dde0;
	padding-top:15px;
	padding-bottom:15px;
	font-size:14px;
}
.content ul li a {
	text-decoration:none;
	color:#3e4346;
}
.content ul li small {
	color:#8b959c;
	font-size:9px;
	text-transform:uppercase;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:relative;
	left:10px;
	top:0px;
}

.content ul li:last-child {
	border-bottom:none;
}

/* Paso 15. Imágenes para las pestañas y el fondo */
ul.tabs li a {
	background-image:url(imagenes/tab_off.jpg);
	background-repeat: repeat-x;
	background-position: top;
}
ul.tabs li a.active {
	background-image:url(imagenes/tab_on.jpg);
	background-repeat:repeat-x;
	background-position:top;
}
.content {
	background-image:url(imagenes/content_bottom.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
}
]]> Tooltip con JQuery Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 https://www.pcpolis.es/blog/css/tooltip-con-jquery/ Wed, 16 Jun 2010 11:31:18 +0000 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 https://www.pcpolis.es/blog/?p=252 Todo lo que a los ojos del usuario es sencillo y funcional: es bueno. De manera que practiquemos un poco más con las posibilidades que nos ofrece la librería JQuery para mejorar y optimizar la presentación del contenido de nuestra web.Un tooltip es ese pequeño letrero con fondo amarillo que nos muestra información adicional cuando situamos el puntero sobre un determinado enlace. Partiendo de ahí ha evolucioado hasta el punto en que ya podemos cargar contenidos mucho más complejos.  Aquí van unos cuantos ejemplos de cómo se pueden combinar el código javascript -especialmente la librería JQuery- y las Hojas de Estilo (CSS) para conseguir estos resultados.

Ej. 1 : Tooltip de Texto

Cuando sitúe el puntero del ratón sobre este enlace, aparecerá un pequeño texto de información. Al mover el puntero, la caja de texto se moverá también mientras nos encontremos dentro de los límites del enlace, y desaparecerá cuando nos alejemos. Para conseguir este resultado necesitamos:

  1. La librería JQuery
  2. Una función JavaScript que permita añadir un nuevo elemento html a la página y otra  que calcule la posición en la que estará situado el puntero del ratón. Ambas en el fichero tooltip.js que más abajo se incluye con las anotaciones del autor.
  3. También necesitaremos una hoja de estilo que defina la apariencia de la caja de texto o elemento emergente.
Ej. 2: Tooltip con Imágenes

Galería (sin Leyenda)

  • gallery thumbnail
  • gallery thumbnail
  • gallery thumbnail
  • gallery thumbnail

Galería (con Leyenda)

  • gallery thumbnail
  • gallery thumbnail
  • gallery thumbnail
  • gallery thumbnail
Ejemplo 3: Tooltip con Imágenes y texto

Pasa el puntero por el siguiente enlace de Plantillas para obtener una vista previa de la imagen. Y en el enlace de PCPolis encontrarás la misma imagen que incluye un texto explicativo.

Problemas y Soluciones

A continuación relaciono los problemas con los que me encontré llevando a la práctica los ejemplos de este artículo y la forma en que pude solucionarlos. Me parece una buena idea incluir este apartado, pues la mayoría de las veces cometemos errores que suelen ser comunes y a pesar de ser pequeños generan auténticos dolores de cabeza.

  1. En el Ej.1 no aparecía el tooltip. Solución: La etiqueta anchor del enlace debe tener la clase tooltip y no la había incluído: <a class=»tooltip» title=»Ejemplo de…
  2. En el Ej..2 no aparecían las imágenes. Solución: No tenía bien escrita la ruta a las imagenes, que es diferente en mi caso.
  3. Había un conflicto entre librerías JQuery debido a que estaba cargando dos archivos jquery.js distintos. La plantilla que utilizo carga esta librería automáticamente desde wp-includes / js / jquery /jquery.js y en algunos casos habrá que sustituirla por una versión más reciente.
ENLACES RELACIONADOS

Alen Grakalic (http://cssglobe.com)

En cssglobe puedes ver el artículo original en inglés y descargar los archivos de ejemplo. Espero que hayas disfrutado y que este artículo haya resultado de utilidad.

Mostrar / Ocultar el Código

(+/-)

Estilos CSS
Nota. En el ejemplo original están incluídos en el propio archivo html. Los que incluyo tienen algunas modificaciones necesarias para wordpress.

/* ESTILOS PARA TOOLTIP

Ejemplo 1 */

#emergente1 h1{
font-size:180%;
font-weight:normal;
color:#555;
}

#emergente1 a{
text-decoration:none;
color:#f30;
}

#emergente1 a:hover {
background-color: transparent;
}

#emergente1 p{
clear:both;
margin:0;
padding:.5em 0;
}

#emergente1 pre{
display:block;
font:100% «Courier New», Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

#tooltip{
position:absolute;
border:1px solid #CCCCCC;
padding:2px 5px;
color:#FFFFFF;
display:none;
background-color: #2d83d5;
font-weight: bold;
}

#emergente a:hover {
background-color: transparent;
}

/* Ejemplo 2 */

#emergente2 {
display:block;
overflow:hidden;
}

#emergente2 h1{
font-size:180%;
font-weight:normal;
color:#555;
}

#emergente2 h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}

#emergente2 a{
text-decoration:none;
color:#f30;
}

#emergente2 p{
clear:both;
margin:0;
padding:.5em 0;
}

#emergente2 pre{
display:block;
font:100% «Courier New», Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

#emergente2 img    {
border: 1px solid #CCCCCC;
margin-bottom:7px;
}

#emergente2 ul,li{
margin:0!important;
padding:0;
}

#emergente2 li{
list-style:none;
float:left;
display:inline;
margin-right:0px;
}

#preview{
position:absolute;
border:1px solid #ccc;
padding:5px;
display:none;
color:#666666;
background-color: #fff;
text-align: center;
line-height: 2em;
}

#emergente2 a:hover {
background-color: transparent;
}

/* Ejemplo 3  */

#emergente3 h1{
font-size:180%;
font-weight:normal;
color:#555;
}

#emergente3 h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}

#emergente3 a{
text-decoration:none;
color:#f30;
}

#emergente3 p{
clear:both;
margin:0;
padding:.5em 0;
}

#emergente3 pre{
display:block;
font:100% «Courier New», Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

#emergente3 img{border:none;}

#emergente3 ul,li{
margin:0;
padding:0;
}

#emergente3 li {
list-style:none;
float:left;
display:inline;
margin-right:10px;
}

#screenshot {
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
line-height:2em;
text-align:center;
}

#emergente3 a:hover {
background-color: transparent;
}

Arvhivo JavaScript

tooltips.js

/*
* Tooltip script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/

this.tooltip = function(){
/* CONFIG */
xOffset = -18;
yOffset = 0;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$(«a.tooltip»).hover(function(e){
this.t = this.title;
this.title = «»;
$(«body»).append(«<p id=’tooltip’>»+ this.t +»</p>»);
$(«#tooltip»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»)
.fadeIn(«fast»);
},
function(){
this.title = this.t;
$(«#tooltip»).remove();
});
$(«a.tooltip»).mousemove(function(e){
$(«#tooltip»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»);
});
};

// starting the script on page load
$(document).ready(function(){
tooltip();
});

/*
* Image preview script
*/

this.imagePreview = function(){
/* CONFIG */

xOffset = -18;
yOffset = 0;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/*     END CONFIG NOTAS:
hover es un gestor de evento para cuando se pasa el ratón sobre un objeto
hover( over, out )
*/
$(«a.preview»).hover(function(e){
this.t = this.title;
this.title = «»;
var c = (this.t != «») ? «<br/>» + this.t : «»;
$(«body»).append(«<p id=’preview’><img src='»+ this.href +»‘ alt=’Image preview’ />»+ c +»</p>»);
$(«#preview»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»)
.fadeIn(«fast»);
},
function(){
this.title = this.t;
$(«#preview»).remove();
});
$(«a.preview»).mousemove(function(e){
$(«#preview»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»);
});
};

// starting the script on page load
$(document).ready(function(){
imagePreview();
});

/*
* Url preview script
*/

this.screenshotPreview = function(){
/* CONFIG */

xOffset = -18;
yOffset = 0;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/* END CONFIG */
$(«a.screenshot»).hover(function(e){
this.t = this.title;
this.title = «»;
var c = (this.t != «») ? «<br/>» + this.t : «»;
$(«body»).append(«<p id=’screenshot’><img src='»+ this.rel +»‘ alt=’url preview’ />»+ c +»</p>»);
$(«#screenshot»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»)
.fadeIn(«fast»);
},
function(){
this.title = this.t;
$(«#screenshot»).remove();
});
$(«a.screenshot»).mousemove(function(e){
$(«#screenshot»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»);
});
};

// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});

]]>