O'Reilly logo

Smashing Mobile Web Development by Greg Avola

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required