The next step is to add some JavaScript to the page to support some basic dynamic behavior. In particular, we will allow users to show and hide the big honking navigation section in the header so that they only see it when they want to. To make this work, we’ll write some new CSS and use some JavaScript to apply the new CSS to the existing HTML.
First, let’s take a look at the new CSS. Step 1 is to hide the ul elements in the header so they don’t show up when the user first loads the page. If you are following along at home, open your android.css file and add the following: #header ul.hide { display: none;
}
This won’t actually hide anything until you add the hide class to the ul elements (you’ll do this shortly with some JavaScript). Next, define the styles for the button that will show and hide the menu. We haven’t created the HTML for the button yet. For your information, it’s going to look like this:
<div class="leftButton" onclick="toggleMenu()">Menu</div>
I’ll describe the button HTML in detail in the section “Adding Basic Behavior with jQuery” on page 28, so don’t add the preceding line of code to your HTML file. The important thing to understand is that it’s a div with the class leftButton and it’s going to be in the header.
Here is the CSS style for the button (you can go ahead and add this to the android.css file):
#header div.leftButton {
position: absolute;
top: 7px;
left: 6px;
height: 30px;
font-weight: bold;
text-align: center;
color: white;
text-shadow: rgba (0,0,0,0.6) 0px -1px 1px;
line-height: 28px;
border-width: 0 8px 0 8px;
-webkit-border-image: url(images/button.png) 0 8 0 8;
For the graphics used in this chapter, you can download the example files from http://examples.oreilly.com/catalog/9781449383268 and copy
them from the images directory. Put these copies into an images subdirectory beneath the directory that contains your HTML document (you’ll probably need to create the images directory). We’ll be talking
about jQTouch in detail in Chapter 4 Taking it from the top, set the position to absolute to remove the div from the Document flow. This allows you to set its top and left pixel coordinates. Set the height to 30px so it’s big enough to tap easily. Style the text bold, white with a slight drop shadow, and centered in the box.
In CSS, the rgb function is an alternative to the familiar hex notation typically used to specify colors (e.g., #FFFFFF). rgb(255, 255, 255) and rgb(100%, 100%, 100%) are
both the same as #FFFFFF. More recently, the rgba() function has been introduced, which allows you to specify a fourth parameter that defines the alpha value (i.e., opacity) of the color. The range of allowable values is 0 to 1, where 0 is fully transparent and 1 is fully opaque; decimal values between 0 and 1 will be rendered translucent.
The line-height declaration moves the text down vertically in the box so it’s not flush
against the top border.
The border-width and -webkit-border-image lines require a bit of explanation. These two properties together allow you to assign portions of a single image to the border area of an element. If the box resizes because the text increases or decreases, the border image will stretch to accommodate it. It’s really a great thing because it means fewer images, less work, less bandwidth, and shorter load times.
The border-width line tells the browser to apply a 0 width border to the top, an 8px border to the right, a 0 width border to the bottom, and an 8px width border to the left (i.e., the four parameters start at the top of the box and work their way around clockwise). You don’t need to specify a color or style for the border.
With the border widths in place, you can apply the border image. The five parameters from left to right are: the URL of the image, the top width, the right width, the bottom width, and the left width (again, clockwise from top). The URL can be absolute (http://example.com/myBorderImage.png) or relative. Relative paths are based on the location of the stylesheet, not the HTML page that includes the stylesheet.
When I first encountered the border image property, I found it odd that I had to specify the border widths when I had already done so with the border-width property. After some painful trial and error, I
discovered that the widths in the border-image property are not border widths; they are the widths to slice from the image. Taking the right border as an example, I’m telling the browser to take the left 8px of the image and apply them to the right border, which also happens to have an 8px width It is possible to do something irrational such as applying the right 4 pixels of an image to a border that is 20px wide. To make this work properly, you have to use the optional parameters of webkit-borderimage that instruct the image what to do with the slice in the available border space (repeat, stretch, round, etc.). In three years of trying, I
have failed to come up with any sane reason to do this, so I won’t waste space here describing this confusing and impractical option of an otherwise killer feature. Okay, time for some JavaScript. In preparation for the JavaScript you’re about to write, you need to update your HTML document to include jquery.js and android.js. Add these lines to the head section of your HTML document:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="android.js"></script>
jQuery downloads, documentation, and tutorials are available at http: //jquery.com. To use jQuery, you will need to download it from there, rename the file you downloaded (such as jquery-1.3.2.min.js) to
jquery.js, and put a copy of it in the same directory as your HTML document.
The primary duty of the JavaScript in android.js is to allow users to show and hide the nav menus. Copy the following JavaScript into a file called android.js and save it in the same folder as the HTML file: if (window.innerWidth && window.innerWidth <= 480) { $(document).ready(function(){ $('#header ul').addClass('hide');$('#header').append('<div class="leftButton" onclick="toggleMenu()">Menu</div>');
}); function toggleMenu() {
$('#header ul').toggleClass('hide');
$('#header .leftButton').toggleClass('pressed');
}
}
The entire block of code is wrapped in an if statement that checks to make sure the innerWidth property of the window object exists (it doesn’t exist in some versions of Internet Explorer) and that the width is less than or equal to 480px (a reasonable maximum width for the most phones). By adding this line, we ensure that the code executes only when the user is browsing the page with a typical Android phone or
some other similarly sized device. If you are testing your Android web pages using the desktop version
of Chrome as described in “Don’t Have a Website?” on page 13, the if statement here will fail if your browser’s window width is too large. Manually resize your window to be as narrow as possible and
refresh the page.
Here we have the so-called “document ready” function. If you are new to jQuery, this can be a bit intimidating, and I admit that it took me a while to memorize the syntax. However, it’s worth taking the time to commit it to memory, because you’ll be using it a lot. The document ready function basically says, “When the document is ready, run this code.” More on why this is important in a sec.
This is typical jQuery code that begins by selecting the uls in the header and adding the hide CSS class to them. Remember, hide is the selector we used in the CSS above. The net effect of executing this line is to, well, “hide” the header ul elements. Had we not wrapped this line in the document ready function, it
would have most likely executed before the uls were even finished loading. This means the JavaScript would load, and this line would fail because the uls wouldn’t exist yet. Then, the page would continue
loading, the uls would appear, and you’d be scratching your head (or smashing your keyboard), wondering why the JavaScript wasn’t working . Here is where we append a button to the header that will allow the user to show and hide the menu (Figure 2-8). It has a class that corresponds to the CSS we wrote previously for .leftButton, and it has an onclick handler that calls the function toggleMenu() that comes next.
The toggleMenu()function uses jQuery’s toggleClass() function to add or remove the specified class to the selected object. On this line, we toggle the hide class on the header uls.
