window.onload = function(){setScreenClass();setBehavior();};
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;
};
function setBehavior(){
tabs = document.getElementsByTagName('dt');
for (t=0;t < tabs.length; t++ ){
if(tabs[t].parentNode.parentNode.className == 'tabbed'){
tabs[t].onclick = activateTab;
//alert(tabs[t].onclick);
}
}
};
function activateTab(){
tabs = document.getElementsByTagName('dt');
for (t=0;t < tabs.length; t++ ){
if(tabs[t].className == 'current'){tabs[t].className="";}
}
page = document.getElementsByTagName('dd');
for (t=0;t < page.length; t++ ){
if(page[t].className == 'current'){page[t].className="";}
}
this.className="current";
dd = this.nextSibling;
if(dd.nodeType!=1){dd = dd.nextSibling;}
dd.className="current";
};
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>A List Apart: Switchy McLayout - Tabbed Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Showcasing the Switchy McLayout technique" />
<meta name="robots" content="index, follow" />
<script src="behaviors_compression.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="presentation_compression.css" />
</head>
<body class="initial">
<div id="count"></div>
<!-- Begin of article markup -->
<div class="tabbed">
<dl>
<dt id="tab1">T a b A</dt>
<dd>
<h3>Body tab A</h3>
<p>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.</p>
<p> 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>
</dd>
<dt id="tab2" class="current">T a b B</dt>
<dd class="current">
<h3>Body tab B</h3>
<p>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.</p>
<p> 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>
</dd>
<dt id="tab3">T a b C</dt>
<dd>
<h3>Body tab C</h3>
<p>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.</p>
<p> 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>
</dd>
<dt id="tab4">T a b D</dt>
<dd>
<h3>Body tab D</h3>
<p>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.</p>
<p> 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>
</dd>
</dl>
</div>
<!-- End of article markup -->
</body>
</html>
