Javascript Rotation Script Part #1
Here is a quick and dirty rotation script, I have edited down for simplicity but expect that it can easily be expanded on to suit your needs:
There are 2 parts, the first is the additional attribute to put into the body tag, as seen below:
<body onorientationchange="updateRotation();" >
Next there is a simple Javascript file which needs to be included, Along with a Basic Css File and added in a metatag for viewport zoom settings, in the head of the document as follows:
<head> <title>Sample Page</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <style type="text/css"> @import url("/css/iphone.css"); </style> <script type="text/javascript" src="/js/rotation.js"></script> </head>
Here is the sample Javascript file: ( “/js/rotation.js” )
window.onload = function initialLoad(){
updateRotation();
}
function updateRotation(){
var contentType = "";
switch(window.orientation){
case 0:
contentType = "layout_normal";
break;
case -90:
contentType = "layout_right";
break;
case 90:
contentType = "layout_left";
break;
case 180:
contentType = "layout_flipped";
break;
}
document.getElementById("content").setAttribute("class", contentType);
}
Pretty simple So far, check back later this week for the rest of the details, or visit the working demo at: