Information Technology Reference
In-Depth Information
</script>
</head>
<body>
<div data-role="page" id="aboutPage">
<div data-role="header">
<h1>Our App!</h1>
</div><!-- /header -->
<div data-role="content">
<div id="androiddiv" style="display: none">
<p>We have an application you can download in the Android Marketplace!</p>
<p align="center"><img src="45_avail_market_logo1.png"></p>
</div>
<div id="applediv" style="display: none">
<p>We have an application you can download in the Apple App Store!</p>
<p align="center"><img src="app-store.png"></p>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>bugjr.com</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
You'll notice that this page is fairly simple. If you look at the content of the page, you'll
see we have two blocks of content: The first, named
androiddiv
, shows the Android
Marketplace text and image. The second,
applediv
, shows the Apple App Store text and
image. Both blocks are set to
"display: none"
in their div tag, which means that, by
default, neither is shown. At the top of the page is a very simple JavaScript function,
which tests to see which user agent is detected, and toggles on the appropriate block of
text (by setting the display to
"block"
). If we load this page in the Android web browser,
we will see Figure 6-7:
