Jquery mobile fixed toolbars
My recent forays into mobile app development with Phonegap have uncovered a couple of surprises (for me at least). Clearly mobile app development and specifically HTML5 applications are a very imature space! I have been focusing on getting to know a couple of different model-view frameworks (Knockout, Backbone, Angular) and also trying to get a simple UI based on HTML5 to render in a mobile phone, both with and without UI frameworks (JQuery mobile, Appmobi aUX.js). The surprise for me was that a simple fixed header/footer with scrolling content is not supported in the current mainstream mobile devices for HTML applications…
For desktop browsers the solution is very simple – use position: fixed for the header and footer then position them at the top and bottom of the page.
header{
position: fixed;
top: 0px;
height:25px;
}
footer{
position: fixed;
bottom: 25px;
height:25px;
}
The scrollable content can then be placed inside a container, for example a div or section, which has overflow: auto
#scrollablecontent{
position: absolute;
top: 25px;
height:25px;
overflow:auto;
}
The main content area will now fill the space from 25 pixels from the top to 25 pixels from the bottom and automatically resize to the current screen size (even when the window is resized). If the content placed inside this area is too large to fit then scrolling will automatically be added as required.
Unfortunately this setup does not work as expected (read this for an in-depth explanation) with the standard browser on Android prior to 3.0 or iOS prior to 5.0 Since a large portion of users won’t have the very latest version this causes a problem for HTML5 apps since the fixed headers/footers for menu and toolbars is a standard UI feature in most mobile applications today. The reason is that fixed position is defined as being in relation to the viewport of the browser. In a desktop browser this is the visible window area, but in mobile browsers the viewport for fixed positioning is usually defined as the “layout viewport” which basically means your entire page.
Overflow auto doesn’t work either on most mobile browsers so even if you manage to force the layout viewport to match the visible viewport scrolling inside an element won’t work as expected! Even in browsers that do have support for scrolling inside an element the behavior may not be what you wanted – iOS 5 supports scrolling but doesn’t implement inertia so it just doesn’t feel right anyway!
As with most issues like this there are multiple solutions and frameworks that solve the problem (at least partially). These two are the ones I like the best:
- IScroll 4 – a great library that does a good job of fakeing fixed headers/footer with scrollable areas by intercepting the touchstart/touchmove events and forcing the UI to respond as expected. It has inertia and even supports “pull to refresh” as a plugin. For pure mobile scrolling there is a Lite version which drops most of the advanced features and just focuses on the core functionality. No support yet for Windows Phone so this is an issue for truly cross platform applications – but I am sure that support for WP7 will be released in future revisions.
- jQuery Mobile – the scrolling works… But it just doesn’t look right. Fixed positioning is implemented by moving the headers/footers after the user has scrolled them. Unfortunately this can result in them sticking to the page and moving about until the user stops scrolling. Still it does work and since this solution is much more simple than IScroll it will work on more platforms. Also the whole jQuery stack is tried and tested and continually refined so I expect this feature will be updated as new browser versions and platforms are released.
