iPhone Development: 12 Tips To Get You Started Article

4: Orientation Changes

Your pages and apps can be viewed in two orientation modes: portrait and landscape. It could be useful for your app to react to changes in the orientation.

Using JavaScript you can access the property window.orientation, which can have these values:

  • 0 – normal portrait orientation (home button is at the bottom)
  • -90 – landscape after clockwise rotation from portrait (home button to the left)
  • 90 – landscape after counterclockwise rotation from portrait (home button to the right)
  • 180 – unsupported for now, but would be portrait-flipped so that the home button is at the top

There’s also the orientationchange event you can use to perform an action when the user tilts the device. Here’s an example that simply presents an alert whenever the orientation changes, displaying the window.orientation value:

window.onorientationchange = function() {
alert(window.orientation);
}

You can see how this works in Example 7: rotate the phone to see the alerts. In the iPhone simulator, you’ll find the option to rotate the device under the Hardware menu.

An iPhone in three orientations

5: Orientation-specific Styles

Let’s put that orientation change event to a more practical use. Sometimes you might need to format your content using styles that depend on the orientation. This will require three simple steps:

  1. in our markup, add a class name to the body element (portrait and landscape are as good as any!)
  2. in our stylesheet, specify different content styles for body.portrait and body.landscape, as well as any descendant elements that may require it
  3. use JavaScript to update the value of the body element’s class attribute when the orientation changes

So the first step is to add a default class name, like so:

<body class="portrait">

Then the styles can be added:

body.portrait p {  
   color: red;  
}  
 
body.landscape p {  
   color: blue;  
}

And finally, the JavaScript. We’ll need to use:

  1. a listener for the load event to set the class name initially
  2. another listener for the orientationchange event
  3. a function to swap the class name when the orientationchange event occurs

Let’s take a look at the event listeners:

window.addEventListener('load', setOrientation, false);  
window.addEventListener('orientationchange', setOrientation, false);

And here’s a setOrientation function that changes the class name on the body element:

function setOrientation() {  
 var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';  
 var cl = document.body.className;  
 cl = cl.replace(/portrait|landscape/, orient);  
 document.body.className = cl;  
}

Example 8 shows these orientation specific styles.

The text changes color as the orientation changes

6: Hide Toolbars

You may have noticed that when a page is first loaded on an iPhone, the URL toolbar is visible, and when you scroll down a page, the URL toolbar disappears.

Toolbars displayed

If you’d like to make your web application feel more like a native iPhone application, you’ll want to remove the toolbar right away when the page loads. To do this, simply scroll the page one pixel down, using window.scrollTo:

window.addEventListener('load', function(){
setTimeout(scrollTo, 0, 0, 1);
}, false);

Example 9 shows this behaviour.

Toolbars are hidden

What happens if your page is too short to become scrollable? We’ll need an additional meta element in case that occurs. In order to make the page scrollable, we can set the height of the viewport using the meta element:

<meta name="viewport" content="height=device-height,width=device-width" />

7: Rounded Corners

You have to have rounded corners, right? You can use your favorite rounded-corners approach that works across the major desktop browsers, or, if you target only Safari, you can benefit from the -webkit-border-radius CSS extension. Since there’s a similar -moz-border-radius for Firefox, you can have a nice, rounded element in Firefox and Safari, which will degrade nicely to a simple box in IE and Opera:

.box {  
   -webkit-border-radius: 5px;  
   -moz-border-radius: 5px;  
   background: #ddd;  
   border: 1px solid #aaa;  
}

Example 10 shows these easy rounded corners on a div element.

Rounded corners

8: Touch Events

Of course, you use your iPhone with a finger instead of a mouse; rather than clicking, you tap. What’s more, you can use several fingers to touch and tap. On the iPhone, mouse events are replaced by touch events. They are:

  • touchstart
  • touchend
  • touchmove
  • touchcancel (when the system cancels the touch)

When you subscribe to any of those events, your event listener will receive an event object. The event object has some important properties, such as:

  • touches – a collection of touch objects, one for each finger that touches the screen. The touch objects have, for example, pageX and pageY properties containing the coordinates of the touch within the page.
  • targetTouches – works like touches, but only registers touches on a target element as opposed to the whole page.

The next example is a simple implementation of drag and drop. Let’s put a box on a blank page and drag it around. All you need to do is subscribe to the touchmove event and update the position of the box as the finger moves around, like so:

window.addEventListener('load', function() {  
   
 var b = document.getElementById('box'),  
     xbox = b.offsetWidth  / 2, // half the box width  
     ybox = b.offsetHeight / 2, // half the box height  
     bstyle = b.style; // cached access to the style object  
   
 b.addEventListener('touchmove', function(event) {  
   event.preventDefault(); // the default behaviour is scrolling  
   bstyle.left =  event.targetTouches[0].pageX - xbox + 'px';  
   bstyle.top  =  event.targetTouches[0].pageY - ybox + 'px';  
 }, false);  
       
}, false);

The touchmove event listener first cancels the default behavior of the finger move – otherwise Safari will scroll the page. The collection event.targetTouches contains a list of data for each finger currently on the target div element. We only care about one finger, so we use event.targetTouches[0]. Then pageX gives us the X coordinate of the finger. From this value we subtract half the width of the div so that the finger stays in the center of the box.

We’ve put all that code together in Example 11.

Go to page: 1 | 2 | 3

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.