Building Android Apps with HTML, CSS, and JavaScript, 2nd Edition

Traffic Cop

For the next series of examples, we’ll write a single page called android.html that will sit in front of all the site’s other pages. Here’s how it works:

1. On first load, android.html will present the user with a nicely formatted version of the site navigation.

2. We’ll then use jQuery to “hijack” the onclick actions of the nav links, so when the user clicks a link, the browser page will not navigate to the target link. Rather, jQuery will load a portion of the HTML from the remote page and deliver the data to the user by updating the current page.

We’ll start with the most basic functional version of the code and improve it as we go along. If you’ve still got example files hanging around from Chapter 2, either move them out of the way or set up a new empty subdirectory on your web server to work in as you make your way through this chapter.

The HTML for the android.html wrapper page is extremely simple (see Example 3-1). In the head section, set the title and viewport options and include links to a stylesheet (android.css) and two JavaScript files: jquery.js and a custom JavaScript file named android.js.

Note

You must put a copy of jquery.js in the same directory as the HTML file. For more information on where to get jquery.js and what to do with it, see Introduction to JavaScript. You should do this now before proceeding further.

The body has just two div containers: a header with the initial title in an h1 tag and an empty div container, which will end up holding HTML snippets ...