Switchy McLayout | JavaScriptSource

Switchy McLayout

Marc Dobbelsteen Dec 27, 2006

General

This script and CSS combination allows you to define the dimensions, information richness, and appearance of your content objects for set ranges of screen sizes. A news site, for example, could have one layout and appearance for wide screens, one for medium-sized screens, and another for PDAs. Images could shrink or even disappear according to the screen size, columns could come and go as needed to maintain readability, and you can achieve a more efficient use of the available space for each screen size.


Try the example page. Also, try resizing the page and notice how it adjusts.

Notes

Read the complete details of this technique here.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: behaviors_news.js


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Leave a Response

(2 comments)

this is exactly what I am looking for! :)

Jehzeel Laurente Apr 3, 2007

Script is awesome, but doesnt work correctly for resolutions that have a width greater than 1280 pixels.

John Luetke Dec 29, 2006