Dynamically set 100% content between header and footer in Jquery Mobile


Lot of people are building cross platform with JQuery Mobile.For the last 2-3 months I have been working on JQuery and making cross platform apps for my company.A few days ago,a weird problem stuck me. The no . of form elements and content within the viewport was very few.Hence the Toolbars instead of remaining fixed,came up as if floating in the air.To illustrate lets show a Jquery page with header nav and footer nav.

image

As you can see in the adjacent screenshot,instead of the view port being quite large,the footer is floating in the middle .The reason being very few content.This happened in mobile devices too.In windows Phone 7,the bar was floating in the middle.I have tested it with same result on Chrome and IE 10.

Now for desktop browser,we have an issue solution to the problem.

data-position=fixed  attribute will do the trick.

But unfortunately ,this doesn’t work on Windows Phone 7 and Android 2.3 browsers. The reason being the mobile browser do not have proper support for the CSS 3 position property .Hence even if we tinker with the position property,it will be of no avail.

Another solution would be to change the min-height of the content.It will definitely work,but since you are targeting more than one deices,with varying resolution and viewport size,this may not be a good idea.

So here I present a quick hack through which you can solve it .Wire up the function to the page show and page resize event and you will be good to go.

$(document).bind('pageshow',function(){
        
           
           adjustWindowheight($('#EditDiv')); //#editDiv is the id of the CONTENT part
        });

        adjustWindowheight = function (current_page_content) {
            //Check whether its WP7
            var isWp7 = window.navigator.userAgent.indexOf("IEMobile/9.0") != -1;
            current_page_content.each(function () {
                var containerHeight = parseInt($(this).css('height'));
                var windowHeight = parseInt(window.innerHeight);

                if (containerHeight + 118 < windowHeight) {
                    var newHeight = windowHeight - 118;
                    if (isWp7) {
                        //offset the page since WP7 wrongly reports page height
                        $(this).css('min-height', newHeight + 30 + 'px');
                    }
                    else {
                        $(this).css('min-height', newHeight + 'px');
                    }
                }
                else {
                    $(this).css('min-height', windowHeight + 'px');
                }

            });
        }

Now in this example,I have only hooked it to the pageshow method. I calculate the container height and the window height and I dynamically change the min height of the content.So basically for people looking for their content to fill 100% of the viewport,this would work for them .

Now windows phone does not report its container width properly ,hence we had to detect whether the browser is ie 9 of wp 7 and handle it that way. Any way hope the code helps

I will just leave you guys with the pic of the final result

image

Advertisements

3 responses to “Dynamically set 100% content between header and footer in Jquery Mobile

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s