Crear “vista adaptable” al estilo YouTube
Seguramente han notado en algún momento el botón que incorporó YouTube que nos permite expandir el reproductor del video al ancho total de la página, desplazando la lista de videos relacionados.
En la práctica la vista adaptable en determinadas circunstancias puede resultar sumamente beneficiosa, mejorando la usabilidad de nuestro sitio web, además de brindar libertad al usuario de cambiar la visualización de los contenidos.
Expandir la columna central del layout de nuestra página como lo hace YouTube puede resultar sencillo de realizar dependiendo de como esté estructurada y maquetada nuestra web.
Desde JankoAtWarpSpeed –un fanático de Star Trek?- nos llega este ejemplo que utiliza la siguiente estructura:
<div id="main"></div>
El CSS es el complemento que ayudará a que la estructura de nuestro layout se ajuste de la siguiente forma: contenidos y áreas de comentario flota a la izquierda, mientras que la barra lateral flota a la derecha. Esto permitirá a la barra lateral bajar cuando expandamos el contenido sin necesidad de alterar nuestra estructura XHTML manipulando el DOM.
El fragmento de CSS para que el ejemplo funcione de la manera descrita es el siguiente:
#header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;} #header { width:900px; margin:0px auto;} #main {width:960px; margin:0px auto; overflow:hidden;} #content { width:540px; float:left;} #content.wide { width:900px;} #comments { width:540px; float:left;} #sidebar { width:280px; margin-left:20px; float:right;} #footer { width:900px; margin:0px auto;}
Mediante unas líneas de Javascript y aprovechando la librería jQuery, vamos a conseguir que al dar click sobre un hipervínculo, se agregue o elimine la clase “wide” al elemento “content” de nuestra página, lo cuál completará la “magia”:
$(document).ready(function() { $("#wideView").click(function() { $("#content").toggleClass("wide"); }); });
Para finalizar, podemos ver un ejemplo funcionando, descargar el código de fuente del ejemplo o leer el artículo original.
…