Switchy McLayout

By Marc Dobbelsteen on 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

Created by: Marc van den Dobbelsteen
Web Site: http://webbforce.nl/
Posted: December 27, 2006

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

// addLoadEvent Created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != ‘function’) {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(setScreenClass);
// =====================

window.onresize = setScreenClass;

//  Following transition classes will be declared:
//
//	classname		  screenwidth
//	——————————————
//	pda_v			  240px			
//	pda_h			  320px			
//	ultralow		  320px –  640px	
//	screen_lo		  640px –  800px	
//	screen_med		  800px – 1024px	
//	screen_hi		 1024px – 1280px	
//	screen_wide				> 1280px			

function setScreenClass(){
		var fmt = document.documentElement.clientWidth;
		var cls = (fmt<=240)?’pda_ver’:(fmt>240&&fmt<=320)?’pda_hor’:(fmt>320&&fmt<=640)?’screen_ultralow’:(fmt>640&&fmt<=800)?’screen_low’:(fmt>800&&fmt<=1024)?’screen_med’:(fmt>1024&&fmt<=1280)?’screen_high’:’screen_wide’;
		document.getElementById(‘count’).innerHTML=fmt+’px -> ‘+cls;
		document.body.className=cls;
};

CSS

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

/*~  Default/shared styles
———————————————————————-*/
body {
 	font: normal 70% Verdana, Arial, sans-serif;
}

p {
 	line-height: 160%;
}

div#count {
 	background-color: #AAAAFE;
 	padding: 6px;
 	font: normal 1.2em Arial, Helvetica, sans-serif;
 	margin-bottom: 10px;
 	width: 80%;
}

.article {
 	border: 1px solid #CCC;
 	padding: 8px;
}

h2 {
 	font: bold 2.2em Arial, Helvetica, sans-serif;
}

p.intro {
 	font: bold 1.2em/130% Verdana, Arial, sans-serif;
}

p.summary {
 	font: normal 1em/130% Verdana, Arial, sans-serif;
}

p.fulltext {
 	font: normal 1em/140% Verdana, Arial, sans-serif;
}

a.more {
 	display: block;
 	margin: 20px 0 0 0;
}

ul,
ul li {
 	margin-left: 0;
 	padding-left: 0;
}

/*~  Body class: initial
———————————————————————-*/
.initial .article {
 	width: 30%;
}

.initial h3 {
 	font: bold 1.2em Arial, Helvetica, sans-serif;
}

.initial dd {
 	position: absolute;
 	right: 0;
 	margin-top: -1.1em;
}

.initial dl {
 	position: relative;
	 width: 150px;
}

.initial .imagewrapper {
 	width: 140px;
	 height: 140px;
 	float: left;
	 margin: 0 6px 6px 0;
}

/*~  Body class: pda_ver
———————————————————————-*/
.pda_ver .article {
 	width: 60px;
}

.pda_ver .imagewrapper {
 	display: none;
	 overflow: hidden;
}

.pda_ver h2 {
 	font-size: 13px;
}

.pda_ver p {
 	font-size: 12px;
}

.pda_ver a.more {
 	font-size: 9px;
}

.pda_ver .intro {
 	font-weight: normal;
	 font-size: 9px;
}

.pda_ver dt,
.pda_ver dd,
.pda_ver .related,
.pda_ver h3,
.pda_ver .a,
.pda_ver .b,
.pda_ver .summary,
.pda_ver .short {
 	display: none;
}

/*~  Body class: pda_hor
———————————————————————-*/
.pda_hor .article {
 	width: 80px;
}

.pda_hor h2 {
 	font-size: 14px;
}

.pda_hor p {
 	font-size: 9px;
}

.pda_hor a.more {
 	font-size: 9px;
}

.pda_hor .imagewrapper {
 	width: 70px;
	 height: 70px;
	 overflow: hidden;
}

.pda_hor .imagewrapper img {
 	width: 320px;
	 height: 100%;
}

.pda_hor dt,
.pda_hor dd,
.pda_hor .related,
.pda_hor h3,
.pda_hor .a,
.pda_hor .b,
.pda_hor .intro,
.pda_hor .short {
 	display: none;
}

/*~  Body class: screen_ultralow
———————————————————————-*/
.screen_ultralow h2 {
 	font-size: 15px;
	 margin: 0 auto;
}

.screen_ultralow .more {
 	float: right;
	 margin: 0;
	 margin-top: -10px;
}

.screen_ultralow .intro,
.screen_ultralow p {
 	font-size: 11px;
 	margin-left: 4px;
}

.screen_ultralow .article {
 	width: 130px;
	 padding: 8px;
}

.screen_ultralow .imagewrapper {
 	width: 120px;
	 height: 120px;
 	margin: 0 auto;
	 overflow: hidden;
}

.screen_ultralow dt,
.screen_ultralow dd,
.screen_ultralow .related,
.screen_ultralow h3,
.screen_ultralow .a,
.screen_ultralow .b {
 	display: none;
}

/*~  Body class: screen_low
———————————————————————-*/
.screen_low .article {
 	width: 220px;
	 padding: 10px;
}

.screen_low .imagewrapper {
 	width: 120px;
	 height: 120px;
 	float: left;
	 margin: 0 4px 2px 0;
	 overflow: hidden;
}

.screen_low dt,
.screen_low dd,
.screen_low .related,
.screen_low h3,
.screen_low .b {
 	display: none;
}

.screen_low .intro {
 	font-size: 12px;
}

/*~  Body class: screen_med
———————————————————————-*/
.screen_med .article {
 	width: 280px;
	 padding: 12px;
}

.screen_med .imagewrapper {
 	width: 180px;
	 height: 120px;
 	float: left;
	 margin: 0 6px 6px 0;
	 overflow: hidden;
}

.screen_med dt,
.screen_med dd,
.screen_med .related,
.screen_med h3,
.screen_med .b {
 	display: none;
}

.screen_med .intro {
 	font-size: 12px;
}

/*~  Body class: screen_high
———————————————————————-*/
.screen_high dt,
.screen_high dd,
.screen_high .related,
.screen_high h3 {
 	display: none;
}

.screen_high .date {
 	display: block;
}

.screen_high dd.date {
 	margin-top: -1.2em;
	 margin-bottom: 0;
}

.screen_high .article {
 	width: 600px;
	 padding: 14px;
}

.screen_high .imagewrapper {
 	width: 320px;
	 height: 120px;
}

.screen_high h2 {
 	margin-bottom: 0;
}

.screen_wide .article {
 	width: 800px;
	 padding: 16px;
}

.screen_wide .imagewrapper {
 	width: 589px;
	 clear: right;
 	height: 120px;
	 float: right;
 	margin: 0 0 8px 8px
}

.screen_wide .a {
 	width: 36%;
	 float: left;
	 margin-right: 3.4em;
}

.screen_wide .b {
 	width: 36%;
	 float: left;
	 margin-right: 2em;
}

.screen_wide .related {
 	width: 18%;
	 float: right;
 	background-color: #FBFBFB;
	 padding: 4px 4px 28px 4px;
}

.screen_wide h3 {
 	width: 18%;
	 float: right;
 	font-size: 1em;
	 margin: 0 0 1px 0;
 	background-color: #F7F7F7;
	 padding: 4px 4px 4px 4px;
	 color: #666;
}

.screen_wide a {
 	clear: left;
}

.screen_wide h2 {
 	font: bold 2.6em Arial, Helvetica, sans-serif;
	 letter-spacing: 1px;
}

.screen_wide .classify {
 	color: #CCC;
	 float: right;
	 font-size: 0.9em;
	 margin-top: -4em;
	 width: 160px;
}

.screen_wide dt,
.screen_wide dd {
 	float: left;
}

.screen_wide dt {
 	clear: left;
	 width: 40%;
}

.screen_wide dd {
 	margin: 0 0 2px;
}

.screen_wide ul li {
 	margin-bottom: 0.4em;
}

Head

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


<script type=”text/javascript” src=”behaviors_news.js”></script>

Body

Paste this code into the BODY section of your HTML document


<div class=”article”>
	<h2>Adaptive Layout</h2>
	<dl class=”classify”>
		<dt class=”date”>Date:</dt>
		<dd class=”date”>12 May 2006</dd>

		<dt>Category:</dt>
		<dd>CSS techniques</dd>
	</dl>
	<div class=”imagewrapper”><img src=”mountains_very_wide_hq.jpg” alt=”blue mountains” /></div>
	<p class=”intro”>Intro: After liquid layout and zoom layout, adaptive layout may be the next big thing</p>
	<p class=”summary”>Summary: The base for this layout form is class switching using JavaScript. A trigger value like screen size is used to define different CSS styles for certain screen objects so transitions between different layouts can be made.</p>
	<p class=”fulltext a”>Body a—Dolor sit esse, at facilisis euismod wisi duis elit amet feugiat laoreet luptatum lobortis tincidunt. Minim eu minim quis feugait et  eros, feugait in dolor aliquam aliquam duis ex. Suscipit consequat facilisis, nostrud, tation consequat, iriure, eu et.  molestie in wisi wisi aliquip te feugiat vel, et qui nisl, vel in at qui eros lobortis. Eum minim eros consequat ut commodo dolor ad luptatum augue enim esse, autem tation. Volutpat aliquip lobortis et iusto facilisi minim vel adipiscing nostrud consequat, feugait</p>

	<p class=”fulltext b”>Body b—quis euismod dolor nisl quis consequat ex. Nostrud hendrerit ad et dolor nonummy, ullamcorper eu lorem ullamcorper laoreet. Augue augue ullamcorper facilisi te velit esse nostrud dignissim, consectetuer esse luptatum at vel praesent erat. Veniam feugait praesent sit. Ut vel illum. Exerci luptatum diam illum, duis ut, dolor, duis facilisis hendrerit aliquip exerci autem commodo praesent vulputate veniam odio, hendrerit. Commodo blandit nulla duis lobortis magna, velit  lobortis.</p>
</div>