Building Android Apps : Adding Basic Behavior with jQuery

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
9/27/2010 5:29:20 PM
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 [click here], 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;

Tip: For the graphics used in this chapter, you can download the example files from 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).

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>

Note: jQuery downloads, documentation, and tutorials are available at 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) { 
$('#header ul').addClass('hide');
$('#header').append('<div class="leftButton"
function toggleMenu() {
$('#header ul').toggleClass('hide');
$('#header .leftButton').toggleClass('pressed');

Come to think of it, we haven’t written the CSS for the pressed class yet, so let’s do so now. Go back to android.css and insert the following:

#header div.pressed {
-webkit-border-image: url(images/button_clicked.png) 0 8 0 8;

As you can see, we’re simply specifying a different image for the button border (it happens to be slightly darker). This will add a two-state effect to the button that should make it evident to the user that the button can both show and hide the menu (Figure 1). Figure 2 shows a stretched-out view of the page showing both the menu and some of the text.

Figure 1. The Menu button displays darker when it has been pressed

Figure 2. A tall view of the completed basic Android CSS