Smashing Mobile Web Development

Creating the Activity Tab

Before you can add any social functionality, you need to create the tab in the app from which people will access Twitter, which is also where they will see information about wines added to the cellar.

Writing the query

The Activity tab is where everything begins for the user. It displays all the recent wines added to the cellar. Because jQuery Mobile handles page navigations via hashChange events, you create a small function to handle the generation of Google Maps for the Find tab. You expand that build in some queries that will be fired when the Activity tab is active. To start, follow these steps:

1. In global.js, after the existing variables (i.e. after the line beginning var infowindow), add the following code:

$(window).bind(‘hashchange’, function(e){

e.preventDefault();

newHash = window.location.hash.substring(1);

if (newHash == “find”) {

if ($.trim($(“#map”).html()) == “”) {

navigator.geolocation.getCurrentPosition(successPosition,

errorPosition);

}

}

});

2. Because you need to capture when the app first loads (which is an automatic indication that the Activity is active since that is the opening view), you need to add some code to the script to handle that situation. To do this, change the if statement to the following:

if (newHash) {

if (newHash == “find”) {

if ($.trim($(“#map”).html()) == “”) {

navigator.geolocation.getCurrentPosition(successPosition,

errorPosition);

}

}

else if (newHash == “activity”) {

grabActivity();