jQuery / ubicando con css

Bienvenidos sean a este post, hoy nos enfocaremos en otro tema de css.

Si vienen de los post anteriores ya tenemos una pagina con efectos que nos muestra y oculta una parte de la pagina con efectos de desaparicion incluido asi como una animacion para modificar el texto de la pagina, pero en este post nos centraremos en el menu donde estan los botones para ello vamos a utilizar el codigo del post anterior, en caso de no tenerlo pueden descargarlo mediante el siguiente link:

Simplemente extraigan todos los archivos en un mismo directorio, una vez hecho vayan al archivo codigo.js y agreguen el siguiente segmento de codigo en el mismo:

$(document).ready(function() {
	$('#encabezado').click(function() {
		var ancho=$('div.capitulo p').outerWidth();
		var $cambiador=$('#cambiador');
		var cambAncho=$cambiador.outerWidth();
		$cambiador.animate({
			borderWidth: '5px',
			left: ancho - cambAncho,
			height: '+=20px'
		}, 'slow');
	});
});

En este caso asociaremos el evento click al titulo de la pagina, el div con el id encabezado, nuestro primer paso sera definir una variable llamada ancho la cual contendra el valor total del ancho donde esta el texto, esto gracias al metodo outerWidth, despues enlazamos una variable al div cambiador, y volvemos a definir otra variable con el nombre de cambAncho donde haremos algo similar a la primer variable pero enfocado en el div cambiador, nuestro siguiente paso sera aplicar la funcion animate a cambiador, primero le estableceremos un ancho al borde de 5 px, en el left establecemos la diferencia entre la primer y tercer variable y por ultimo incrementaremos el alto en 20 px por cada click que hagamos, vamos a ver como trabaja mediante el siguiente video

En el video podemos ver como se incrementa la altura, afecto al ancho del borde pero del left no tenemos ninguna novedad, aqui podemos hacer dos cosas, una puede ser agregar la siguiente propiedad dentro del bloque de #cambiador en el archivo estilo.css:

position: relative;

O podemos hacerlo mediante el archivo codigo.js, para ello tomaremos este segmento de codigo:

$cambiador.animate({
	borderWidth: '5px',
	left: ancho - cambAncho,
	height: '+=20px'
}, 'slow');

Lo modificaremos de la siguiente manera:

$cambiador.css({
	position: 'relative'
	}).animate({
		borderWidth: '5px',
		left: ancho - cambAncho,
		height: '+=20px'
	}, 'slow');

En este caso agregamos a css para agregar el tema de la posicion, en lugar de agregarlo en el archivo, para que no sea aplicado al momento de cargarse el archivo sino cuando suceda algun evento en la pagina, despues el animate sigue siendo el mismo que anteriormente, veamos como funciona ahora mediante el siguiente video

Como pueden ver de una forma muy practica podemos ajustar los elementos a las variaciones de tamaño y como en otros lenguajes podemos encadenar varias funciones en un objeto, antes de finalizar les dejo un archivo con el codigo final del ejemplo que vimos en este post:

En resumen, hoy hemos visto como posicionar un elemento por medio del metodo css, primero hicimos unna modificacion sobre nuestra pagina para luego comentar que deberiamos haber agregado en el archivo .css, despues mostramos como se puede hacer lo mismo mediante el metodo css y vemos las distintas salidas sin aplicar y aplicandolo, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.