File: example1.txt

With the following HTML in the head of your page:

<link href="/css/mobileP.css" rel="stylesheet" type="text/css" title="P" media="screen" />
<link href="/css/mobileL.css" rel="alternate stylesheet" type="text/css" title="L" media="screen" />


You can now add the following code to make use of the $B object to automatically switch between the two alternate stylesheets when the orientation of the page changes:

(function($B) {
"use strict";
var changeStyle, lnks, i, addEvent, checkOrientation;
changeStyle = function(title) {
lnks = document.getElementsByTagsName('link');
for (i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}};

var addEvent = function(ob, type, fn) {
if (window.addEventListener)
  addEvent = function(ob, type, fn ) {
    ob.addEventListener(type, fn, false );
  };
  else if (document.attachEvent)
    addEvent = function(ob, type, fn ) {
      var eProp = type + fn;
      ob['e'+eProp] = fn;
      ob[eProp] = function(){ob['e'+eProp]( window.event );};
      ob.attachEvent( 'on'+type, ob[eProp]);
    };
  else return; 
addEvent(ob, type, fn);
};

checkOrientation = function() {
$B.resize();
changeStyle($B.orientation());
};
 
addEvent(window,'resize', checkOrientation);
})($B);