Marcio Barrios

New Xenon Layout: A Simple Dynamic Layout

publicado el 8 de Abril de 2006
Enlace permanente: http://www.marciobarrios.com/new-xenon-layout

Aquí os presento la nueva versión del script Xenon Layout.

He mejorado el código (ahora utilizo object literal y funciona en Firefox, Opera, Safari y IE) y su facilidad de uso y ahora su principal utilidad es la posibilidad de crear una estructura dinámica, es decir, tener la posibilidad de cambiar el documento CSS dependiendo de la resolución de la pantalla, además os permite utilizar las propiedades min-width y max-width en IE. Aquí podéis ver un ejemplo.

Como explicaba en el anterior artículo el objetivo de este script es la de poder crear un layout a las necesidades de cada proyecto optimizándolo tanto para pantallas pequeñas (PSP, Nokia 7170) como para pantallas grandes.

Uso

Más sencillo imposible, son 2 pasos:

1. Inserta el script en el head mediante el siguiente código html (solo tienes que asegurarte de que la ruta sea la correcta): <script type="text/javascript" src="xenonLayout.js"></script>
2. Configura el script para tus necesidades, solo tienes que asociar la siguiente llamada a los eventos de 'onload' y 'onresize', en el script utilizo la función addevent de John Resig como manejador de eventos, pero podeis borrarla y utilizar otro manejador de eventos: xenonLayout.init(400,1200,'normal','thin','wide'); Parámetros:
   1. thinWidth: (opcional) límite en píxeles para cambiar de documento CSS para resoluciones pequeñas, solo utilizado si se define titleThinCss
   2. wideWidth: (opcional) límite en píxeles para cambiar de documento CSS para resoluciones grandes, solo utilizado si se define titleWideCss
   3. titleNormalCss: (requerido) atributo 'title' de la etiqueta link que enlaza el CSS por defecto
   4. titleThinCss: (opcional) atributo 'title' de la etiqueta link que enlaza el CSS para resoluciones pequeñas, necesario para cambiar de Css
   5. titleWideCss: (opcional) atributo 'title' de la etiqueta link que enlaza el CSS para resoluciones grandes, necesario para cambiar de Css
   Nota: Para poder utilizar el min-width y max-width en IE debéis colocar estos atributos en la primera regla(el típico #wrapper) del CSS por defecto (que a su vez debe ser el primer CSS enlazado), en nuestro caso 'normal.css', está hecho así porque es mucho más rápido que ir buscando en todas las reglas del CSS.

Listado de compatibilidad entre navegadores

Yo solo lo he probado en Windows y con los 3 navegadores que tengo, a ver si entre todos me escribís y completamos este cuadro y empiezo a arreglar fallos

Navegadores	Plataforma	¿Funciona?
Internet Explorer	Windows	Sí
Firefox	Windows	Sí
Opera	Windows	Sí
Safari	Mac OSX	?

Descarga un rar con los archivos

Este código es un experimento propio y está distribuido bajo licencia de Creative Commons 2.5(Reconocimiento-CompartirIgual) al igual que todo el contenido de esta web, sois libres de coger el código y modificarlo.

El rar contiene estos archivos:

• Js con el código comentado
• Js con el código comprimido (2Kb)
• Readme.txt con las instrucciones para hacer funcionar el código
• un ejemplo para ver como funciona

Xenon Layout (.rar, 6,49Kb)

Nota: Si queréis cambiar la configuración hacedlo en xenonLayout.js y luego comprimidlo.