Here's my answer to a question that many people seem to have: How to determine the usable visible content area of a jQuery Mobile page.
I'll assume you're starting with a standard jquery mobile 1.1.0, and have your
To start, we need some CSS for a div we'll call "fillme":
- #fillme {
- background-color: #000;
- }
This just sets the background color to black, so you can see the size clearly in this demo.
I'm going to demonstrate on a page with a header, but no footer, so the HTML for the jQuery Mobile page should look something like this:
- <div data-role="page" id="home">
- <div data-role="header">
- <h1>Content Filled</h1>
- </div>
- <div data-role="content">
- <div id="fillme"></div>
- </div>
- </div>
At this point, we've got a div with no defined width, height, or content, but will have a black background as soon as those are provided.
We'll start by waiting until the window is loaded and ready:
- $(window).load(function() {
We're going to want this div to resize when the screen dimensions change, so we start by binding a resize event to the window:
- $(window).bind('resize',function(event){
First, make sure we're at the top of the page:
Next, get the height of the screen, without the browser chrome:
- winhigh = $.mobile.getScreenHeight();
That is the total height of the screen, however, including things like the header, so let's get the height of the first page's header (if you used a footer, you'd also take the height of the footer into consideration in a similar manner):
- headhigh = $('[data-role="header"]').first().outerHeight();
We'll subtract that from the total height of the window (which you'd also do for the footer, if you had one). We also need to compensate for the 15-pixel padding at the top AND the bottom, so we'll subtract another 30 pixels after that:
- winhigh = winhigh - headhigh - 30;
Since there's less to worry about concerning the width, we just use the document width, and adjust for the 15-pixel padding on the left and the right:
- winwide = $(document).width();
- winwide = winwide - 30;
Finally, we set the width of the "fillme" div to be the height and width we've determined for our window, and then close the window resize event listener:
- $('div#fillme').css('width',winwide + 'px').css('height',winhigh + 'px');
- });
Now, this is fine for desktop and laptop browsers, but mobile devices register an orientationchange event, so we'll create an event listener for that:
- $(window).bind('orientationchange',function(event){
Orientation changes often create that annoying whitespace at the bottom, so we'll deal with that via a tip I learned from:
- if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
- $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
- }
- else {
- $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
- };
Next, trigger the resize event, so everything gets arranged properly, and make sure the window is scrolled to the top:
- $(window).trigger('resize');
- window.scrollTo(0,0);
Finally, close the orientationevent listener, trigger the orientationchange event, to help remove the whitespace at the bottom, and close the window load function:
- }).trigger('orientationchange');
- });
That's it!
Now, whenever you resize your browser window or rotate your mobile device, you should see a big black rectangle adjust itself to the visible and usable section of the content area!
You can now use this div as a starting point to keep things visible. For a simple idea, you might decide to set this div's overflow to "hidden", so anything outside that div isn't placed on the screen.
Alternatively, you could use it as a reference to keep elements sized appropriately in a window.
For example, I used it to create a chessboard that resizes itself. I simply looked at which of the 2 dimensions had a smaller pixel size, the height or the width, and made each square 1/8th that size. By having this re-drawn in the resize event listener, I get an adjustable chessboard!
Below is the resizable div's full jquery mobile/javascript code with comments for cutting and pasting purposes:
- $(window).load(function() {
- $(window).bind('resize',function(event){
- window.scrollTo(0,0);
- winhigh = $.mobile.getScreenHeight(); //Get available screen height, not including any browser chrome
- headhigh = $('[data-role="header"]').first().outerHeight(); //Get height of first page's header
- winhigh = winhigh - headhigh - 30; //Subtract 30 for the top and bottom 15-pixel margins around the content area
- winwide = $(document).width(); //Get width of document
- winwide = winwide - 30; //Subtract 30 for the right and left 15-pixel margins around the content area
- $('div#fillme').css('width',winwide + 'px').css('height',winhigh + 'px'); //Change div to maximum visible area
- });
-
- $(window).bind('orientationchange',function(event){
- //Eliminate white-space on orientationchange: http://stackoverflow.com/questions/6448465/jquery-mobile-device-scaling
- if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
- $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
- } else {
- $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
- };
- $(window).trigger('resize');
- window.scrollTo(0,0);
- }).trigger('orientationchange');
- });