knithx.net » programacion http://www.knithx.net Weblog sobre tecnología por el knithx team Sun, 05 Oct 2008 12:27:31 +0000 http://wordpress.org/?v=2.5.1 en Hibridando CSS y Javascript http://www.knithx.net/2007/04/22/hibridando-css-y-javascript/ http://www.knithx.net/2007/04/22/hibridando-css-y-javascript/#comments Sun, 22 Apr 2007 11:30:36 +0000 knithx http://www.knithx.net/2007/04/22/hibridando-css-y-javascript/ Cuando se trata de modificar las propiedades de una interfaz web sin recargar el contenido de la página y mostrar los cambios de forma inmediata, una de las soluciones más aplicadas hoy en días es el uso de pequeñas rutinas en Javascript (y por extensión, el omnipresente AJAX protagonista de la Web 2.0). Los lectores de knithx más asiduos habrán notado un cambio en la estructura del diseño, pasando éste de ser de dos columnas a una. El menú o barra lateral, asimismo, sigue haciendo acto de presencia, pero permanece oculta hasta que se decide lo contrario pulsando en el botón menú (situado en la parte superior del contenido), apareciendo a la derecha del contenido dando lugar a un diseño de una o dos columnas fluido según la decisión del lector.

En términos formales, esto se consigue gracias a la aplicación conjunta de Javascript y CSS. Como se muestra abajo, diseñé una función que modifica el ancho del div content de 100% cuando la sidebar no se muestra a 65% cuando sí lo hace. A su vez, la misma función modifica la propiedad display de la barra lateral, alternando los valores de por defecto a none. En resumidas cuentas: el contenido se estrecha para dar cabida al menú cuando el lector decide que se muestre, u ocupa todo el ancho de la página si el menú está oculto.

<script type=“text/javascript”>
	function showhide(id){
		if (document.getElementById){
			obj = document.getElementById(id);
		if (obj.style.display == “none”){
			obj.style.display = “”;
			document.getElementById(‘content’).style.width = “65%”;}
		else {
			obj.style.display = “none”;
			document.getElementById(‘content’).style.width = “100%”;}
		}
	}
</script>

Evidentemente, esto no es más que una pequeña muestra de la modificación del estilo CSS de una página “en directo” mediante Javascript. Sobra decir que las posibilidades son infinitas, pero también es importante advertir que el abuso de código “de programa” en nuestra página puede dar lugar a incompatibilidades en diferentes exploradores y un aumento progresivo del peso del archivo si no se emplea con cuidado.

]]> http://www.knithx.net/2007/04/22/hibridando-css-y-javascript/feed/