Book Image

jQuery Mobile First Look

Book Image

jQuery Mobile First Look

Overview of this book

Table of Contents (17 chapters)
jQuery Mobile First Look
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

On positioning


The jQuery Mobile framework provides three different ways in which we can position our bars, each of which proves useful in certain situations: fixed positioning (convenience of static toolbars without the drawbacks of implementing faux-scrolling); fullscreen positioning (toolbars hidden to maximize the viewport); and a persistent footer option.

Fixed positioning

We can apply fixed positioning to header or footer toolbars by adding a data-position="fixed" attribute to the element:

<div data-role="header" data-position="fixed">
  <h1>Fixed header</h1>
</div>

Fixed positioning lets the page content flow naturally, allowing us to take advantage of native scrolling instead of a scripting a faux-scrolling workaround. The header and footer divs are right in the flow of the document, but whenever they are out of view, you can tap the screen to make them appear. Tapping again or scrolling the page will cause them to reappear in the flow of the page (at the top...