How to – Make a jQuery Mobile Page Cover the Whole Screen

While building web apps using jQuery Mobile there will be many occasions that you will have a mobile page whose content will not be enough to cover the entire mobile screen or laptop screen leaving an ugly white blank area at the bottom.

This is how I have overcome the problem using some javascript + jquery and a small html trick.

Assumption: You have 2 pages. Page1 is the main page, Page2 is the external htm page that you want to bring into the view by “ajax linking” pages. Page2 is the page that has not enough content to cover the screen and you want to make it cover the screen.

1) HTML Trick

Create a div in your mobile page (page2) and give it a height value of something like 1000px.

<div style="height:1000px;background-color:#fillingcolor"></div>

2) JavaScript Trick

Add this line to the content area of your mobile page (page2, data-role=”content”) (actually anywhere in the page should be fine as long as it is executed)

document.body.style.overflow = 'hidden';
Note: 1) + 2) works for desktop browsers. Read on for the mobile trick.
3a) Javascript Trick (Mobile Browsers)
Step 2 will stop desktop browsers from scrolling but won't stop mobile scrolling. For mobile browsers add the following lines to the page (page2) for which you want to disable the scrolling:
var handlemove = function (event) {
event.preventDefault();
event.stopPropagation();
return false;
}
$("body").bind("touchmove", handlemove);
But beware that this will also disable the scrolling (by blocking “touchmove” event) for page1.
3b) Javascript Trick (Mobile Browsers)

Now go the the main page (page1) and add the following lines to the page:

$('#main').bind('pageshow', function () {
$("body").unbind("touchmove");
});

Note: Main is a div with data-role=”page”.
Note: Event should be “pageshow” otherwise this line will not be executed as expected since we are using ajax loading for animated transitions between pages. Events like pagecreate, pageload will be triggered just once for the first loading of page1. If we want page1 to scroll again after transitioning back from page2, we should attach this code to the 'pageshow' event.
 

Now everything should be fine. Page2 covers the entire screen whether desktop or mobile, desktop scroll for page2 is disabled, mobile scroll for page2 is disabled, mobile scroll for page1 is re-enabled after transitioning back from page2.

Hope this helps someone.

Good luck,
Serdar.

Leave a Reply

Your email address will not be published. Required fields are marked *