Just having a spot of bother with jQuery mobile I'm trying to use in a Phonegap project.
I would like the Header & Footer toolbars to completely disappear when the screen is tapped so that all the content may be seen.
I have this code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
}
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" data-fullscreen="true">
<div data-role="header" data-fullscreen="true" class="ui-bar-a ui-header ui-header-fixed fade ui-fixed-overlay" data-position="fixed">
<h1>Hide Header/Footer</h1>
</div>
<div data-role="content">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
<div data-role="navbar" data-position="fixed" data-fullscreen="true">
<ul>
<li><a href="" class="ui-btn-active">One</a></li>
<li><a href="">Two</a></li>
</ul>
</div>
</div>
</body>
</html>
I have used the data-fullscreen="true" as instructed by the jQuery Mobile docs and this works correctly when scrolled down the page into an area where the header and footer would not be visible if they were static.
The problem I have is that say, for example I tap the screen when the header is visible where it would be were it static, it slides up as if it was disappearing, but then an empty black toolbar comes back down without any text.
I have tried copying the code exactly how it is on the docs example and I get the same problem where on this page, the toolbars disappear correctly: jQuery Demo
i had the same problem. You have to insert some css(position:absolute and height:0) in your header,content and footer. You can do it like this:
Css:
And with jquery:
You can check the complete anwser here http://jsfiddle.net/laynusfloyd/C3Y5X/