O'Reilly logo

Beginning Mobile Application Development in the Cloud by Richard Rodger

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

APPENDIX

Exercise Solutions

CHAPTER 1

1. In the view.html file, replace this line:

tapper.onclick = function() {

with this:

tapper.ontouchstart = function() {

Reload the app in your mobile browser. Tapping still works, and the color changes.Reload the app in your desktop browser. You’ll notice that clicking no longer works, and the app only responds to touch events.

2. Add an onresize event handler to the JavaScript:

    window.onresize = function() {
      var tapper = document.getElementById('tapper');
      var landscape = window.innerHeight < window.innerWidth
      tapper.style.width  = ( landscape ? 400 : 300 ) + 'px';
      tapper.style.height = ( landscape ? 200 : 300 ) + 'px';
    }

This code first obtains a reference to the tapper div in the usual way, using getElementById. Then it determines whether the mobile device is in landscape orientation by comparing the window width and height. If the window is shorter than it is wide (height < width), then the device must be on its side, in landscape mode.

The code then sets the width and height style values, using the convenient conditional evaluation syntax (<test> ? <test is true> : <test is false>).

3. When you scroll up, the mobile device browser automatically hides the address bar. You can use this behavior to force the address bar to disappear. Even if you scroll up by one pixel, it will still work.

However, it is not quite so simple. First, you need to ensure that the page is in fact scrollable, so you give the page a large height:

 <style> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required