Response title
This is preview!
Using fixed footer with Jquery mobile + phonegap on android
in jQuery Mobile
•
10 years ago
I am building a phonegap app for Android using jquery mobile and having some
trouble with fixed footers.
Please see the HTML code below.
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js">
</script>
<script type="text/javascript" src="js/jquery-1.7.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery.mobile-1.1.1.min.js"> </script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed"
data-tap-toggle="false">
<h1>Test</h1>
</div><!-- /header -->
<div data-role="content">
<form id="searchform" action="" method="post" onsubmit="return false;"
data-ajax="false">
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
</form>
<script type="text/javascript">
$('.city').each(function() {
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
});
</script>
</div><!-- /content -->
<div data-role="footer" data-position="fixed"
data-tap-toggle="false">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#help" data-icon="info"
data-transition="none">Help</a></li>
<li><a href="#help" data-icon="star"
data-transition="none" >Favorites</a></li>
<li><a href="#help" data-icon="arrow-r"
data-transition="none" >Results</a></li>
</ul>
</div>
</div>
</div><!-- /page -->
<div data-role="page" id="help">
<div data-role="header" data-position="fixed"
data-tap-toggle="false">
<h1>Help</h1>
</div><!-- /header -->
</div>
</div>
</body>
</html>There is a long form containing several fields including checkboxes, radio buttons, select lists etc. (using repeated select lists here to simulate). There is a fixed footer at the bottom. Things work fine on desktop browsers. But when I test on my phone having Android 2.3 I observe strange behaviour. Assuming the footer is hiding the select list underneath , if I click on any of the tabs on the navbar, the select list pops up whereas I would expect a transition to a new page. This is as if the select list is getting the click event instead of the footer. This is very annoying to the user. I have searched google but haven't seen this problem reported elsewhere.
1