Smashing Mobile Web Development

Elements to Build

In the previous chapter, you built the database structure that holds the wines and wineries in the system. In this chapter, you build the Find tab, the geolocation, and AJAX elements that will enable you to interact with the user’s location and surrounding venues.

Creating the Find tab

Since you already defined the top navigation structure with the Find tab, you just need to build the page containing the map and other geolocation elements. Start with the following steps:

1. Open your text editor of choice and start editing in the index.html file.

2. In index.html, after the close of the <div> for the Manage tab, add the following structure for the Find tab. The markup for this tab is the same as for the Activity tab, but with ID=“find” which allows the page transitions to work properly.

<div id=”find” data-role=”page”>

<div data-role=”header”>

<h1>Find</h1>

<div data-role=”navbar” data-iconpos=”bottom”>

<ul>

<li><a data-icon=”star href=”#activity”>Activity</a></li>

<li><a data-icon=”grid” href=”#manage”>Manage</a></li>

<li><a data-icon=”info” “ class=”ui-btn-active”

href=”#find”>Find</a></li>

<li><a data-icon=”gear” href=”#settings”>Settings</a></li>

<li><a data-icon=”search” href=”#search”>Search</a></li>

</ul>

</div><!-- /navbar -->

</div><!-- /header -->

<div data-role=”content”>

<p>Find</p>

</div><!-- /content -->

</div><!--/find

3. When using Google Maps in elements that are set to be hidden or not viewable, sometimes you deal with issues ...