Menu
I have a project with jQuery Mobile + phonegap and I have some issues with the footer and content div.
A basic jQuery Mobile page looks like this:
<div data-role="page" data-theme="b" id="map">
<div data-role="header" data-theme="b" data-position="inline">
<a href="#" data-rel="back" data-icon="arrow-l">Back</a>
<h1>MAP</h1>
</div><!-- /header -->
<div data-role="content" id="map_canvas">
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<h4>TEST</h4>
</div><!-- /footer -->
</div><!-- /page -->
Now I'm trying to load google maps in the content so I use this in JavaScript:
$('div').live("pageshow", function()
{
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
And this is the result:
The problem is that the footer doesn't stick to the bottom unless you specify the attribute data-position="fixed" like this:
<div data-role="footer" data-theme="d" data-position="fixed">
<h4>TEST</h4>
</div><!-- /footer -->
That's fine but the problem is the map is loading before jquery mobile take the footer to the bottom, as a result I have this page:
Where you can see the map only using the space left before it's moved to the bottom.
My question is.. what event should I wait for or what do I need to add to my code in order to load the map so it will use all the space between header and footer?
320
You don't need to wait for an event, you need to set the .ui-content element's height to something around 100%.
Here is a purely CSS method of achieving 100% height for a jQuery Mobile pseudo-page:
/*make sure the viewport is 100% height*/
html, body {
height : 100%;
}
/*make the page element 100% height*/
#map-page {
height : 100%;
}
/*specify a height for the header so we can line-up the elements, the default is 40px*/
#map-page .ui-header {
height : 40px;
}
/*set the content to be full-width and height except it doesn't overlap the header or footer*/
#map-page .ui-content {
position : absolute;
top : 40px;
right : 0;
bottom : 30px;
left : 0;
}
/*absolutely position the footer to the bottom of the page*/
#map-page .ui-footer {
position : absolute;
bottom : 0;
left : 0;
width : 100%;
height : 30px;
}
Here is a demo: http://jsfiddle.net/jasper/J9uf5/2/
158
This one also works:
<html>
<head>
<meta name="viewport" id="viewport"
content="width=device-width, height=device-height,
initial-scale=1.0, maximum-scale=1.0,
user-scalable=no;" />
</head>
<body>
....
<div data-role="header" data-position="fixed">
....
<div data-role="footer" data-position="fixed">
....
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
