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:On first load,
android.html will present the user with a nicely
formatted version of the site navigation.
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.
The HTML for the
android.html wrapper page is extremely simple (see
Example 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.
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 retrieved from other pages.
Example 1. This simple HTML wrapper markup will sit in front of the rest of
the site’s pages
<html>
<head>
<title>Jonathan Stark</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" href="android.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="android.js"></script>
</head>
<body>
<div id="header"><h1>Jonathan Stark</h1></div>
<div id="container"></div>
</body>
</html>
|
Let’s move on to the
android.css file. As you can see in Example 2.
Example 2. The base CSS for the page is just a slightly shuffled version of
previous examples
body {
background-color: #ddd;
color: #222;
font-family: Helvetica;
font-size: 14px;
margin: 0;
padding: 0;
}
#header {
background-color: #ccc;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#ccc), to(#999));
border-color: #666;
border-style: solid;
border-width: 0 0 1px 0;
}
#header h1 {
color: #222;
font-size: 20px;
font-weight: bold;
margin: 0 auto;
padding: 10px 0;
text-align: center;
text-shadow: 0px 1px 1px #fff;
}
ul {
list-style: none;
margin: 10px;
padding: 0;
}
ul li a {
background-color: #FFF;
border: 1px solid #999;
color: #222;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
ul li:first-child a {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
ul li:last-child a {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
ul li a:active,ul li a:hover {
background-color:blue;
color:white;
}
#content {
padding: 10px;
text-shadow: 0px 1px 1px #fff;
}
#content a {
color: blue;
}
|
1. Setting Up Some Content to Work With
This JavaScript loads a document called
index.html, and will not work without it.
If you want a couple functioning links to
play with, you can create about.html,
blog.html, and
consulting-clinic.html. To do so, just duplicate
index.html a few times and change the filename of
each copy to match the related link. For added effect, you can change
the content of the h2 tag in each file to match the
filename. For example, the h2 in
blog.html would be
<h2>Blog</h2>.
At this point, you should have the following
files in your working directory:
android.html
You created this in Example 1.
android.css
You created this in Example 2.
about.html
A copy of
index.html, with the h2 set to
“About”.
blog.html
A copy of
index.html, with the h2 set to
“Blog”.
consulting-clinic.html
A copy of
index.html, with the h2 set to
“Consulting Clinic”.
2. Routing Requests with JavaScript
The JavaScript in android.js is where all
the magic happens in this example. Create this file in the same
directory as your android.html file. Please refer
to Example 3 as we go through it line by
line.
Example 3. This bit of JavaScript in android.js
converts the links on the page to Ajax requests
$(document).ready(function(){
loadPage();
});
function loadPage(url) {
if (url == undefined) {
$('#container').load('index.html #header ul', hijackLinks);
} else {
$('#container').load(url + ' #content', hijackLinks);
}
}
function hijackLinks() {
$('#container a').click(function(e){
e.preventDefault();
loadPage(e.target.href);
});
}
|
Tip:
One of my favorite things about JavaScript
is that you can pass a function as a parameter to another function.
Although this looks weird at first, it’s extremely powerful and allows
you to make your code modular and reusable. If you’d like to learn
more, you should check out JavaScript: The Good
Parts by Douglas Crockford (O’Reilly). In fact, if
you are working with JavaScript, you should check out everything by
Douglas Crockford; you’ll be glad you did.
Click handlers do not run when the page first loads; they run when the
user actually clicks a link. Assigning click handlers is like setting
booby traps; you do some initial setup work for something that may or
may not be triggered later.
Tip:
It’s worth taking a few minutes to read up
on the properties of the event object that JavaScript creates in
response to user actions in the browser. A good reference is located
at http://www.w3schools.com/htmldom/dom_obj_event.asp.
When testing the code in this chapter, be sure you point your
browser at the android.html page. Web servers will
typically default to displaying index.html if you
just navigate to the directory that the files are in. Normally this is
helpful, but in this case it will cause a problem.
