Tuesday, December 25th, 2007

iPhone window.onorientationchange Code

Category: iPhone, JavaScript, Showcase

<p>Re-posted from devphone.com.

iPhone Snow Globe

Apple has put up some sample code that shows off the new window.onorientationchange and window.orientation ability that lets you detect the orientation of the iPhone.

You setup your HTML with a body tag with the class of “portrait” or “landscape” and most of the CSS goes from that. You also put an empty div with the id of currentOrientation that is used for some of the magic.

Below is a simple JavaScript handler:

javascript
< view plain text >
  1. window.onorientationchange = function() {
  2.   /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
  3.     left, or landscape mode with the screen turned to the right. */
  4.   var orientation = window.orientation;
  5.   switch(orientation) {
  6.     case 0:
  7.         /* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
  8.            in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
  9.         document.body.setAttribute("class","portrait");
  10.        
  11.         /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events"  */
  12.         document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom).";
  13.         break;  
  14.        
  15.     case 90:
  16.         /* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the
  17.            body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
  18.         document.body.setAttribute("class","landscapeLeft");
  19.        
  20.         document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
  21.         break;
  22.    
  23.     case -90:  
  24.         /* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the
  25.            body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
  26.         document.body.setAttribute("class","landscapeRight");
  27.        
  28.         document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
  29.         break;
  30.   }
  31. }

And, since it is Christmas/insert your winter holiday here, there is a nice sample snow globe that you can shake by changing the orientation of your iPhone.

Have a great holiday period, and try to stay off of your phones and spend some time with the family ;)

Related Content:

Posted by Dion Almaer at 11:11 am
4 Comments

+++--
3.8 rating from 35 votes

4 Comments »

Comments feed TrackBack URI

It could be cool to have an interface that acts like a sphere or a slider with two axes, where tilting it will go to a different item. If you had a menu such as
x x x
x o x
x x x

And you started at ‘o’, then the orientation of your tilt will bring you to a different menu item. Would be fun to try!

Comment by Peter Goodman — December 25, 2007

awesome!

Comment by Mark Holton — December 25, 2007

It would be cool to get a browser vendor that at least partially tried to follow the standards instead of creating an “extended” definition of the standard which basically is the very core of “Embrace, Extend, Exterminate”.

PS!
For those interested in actually following the standards we’ve got a programming contest going on with a grand prize of 10,000 EUROs, read up at;
http://ajaxwidgets.com/news_gaia_programming_contest.aa

Comment by Thomas Hansen — December 26, 2007

Darn if only I had an iPhone or iPod Touch… Oh well.
Wanted to try your havigation Peter. Sounds like a cool idea (not in an actual website though)

Comment by helimeef — January 1, 2008

Leave a comment

You must be logged in to post a comment.