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.
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:
- in our markup, add a class name to the
body
element (portrait
andlandscape
are as good as any!) - in our stylesheet, specify different content styles for
body.portrait
andbody.landscape
, as well as any descendant elements that may require it - 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:
- a listener for the
load
event to set the class name initially - another listener for the
orientationchange
event - 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.
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.
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.
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.
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. Thetouch
objects have, for example,pageX
andpageY
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.
Stoyan is an engineer at Yahoo and the author the author of Object-Oriented JavaScript and other books and articles about web development. Outside work, his time is spent experimenting with random web technologies, blogging at phpied.com and playing the blues guitar to his daughters' despite their preference for Mickey Mouse CDs.