Question

im currently working on a website for mobile devices and im using jquery mobile.

I have my header in a fixed position by using:

<header data-role="header" data-position="fixed">

This works perfectly fine, however when the page is viewed on a device in landscape mode, the header takes up alot of the space.

Is it possible with jquery mobile to set data-position=”fixed” only in portrait mode and have a NOT fixed header in landscape mode?

Thanks in advance!

Answer 1

You could bind to the orientationchange event and call $("[data-position='fixed']").fixedtoolbar('hide'); on the header.

This is the jQuery Mobile page that talks about the methods available on the fixed tool bars http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed-methods.html.

And these are the available events http://jquerymobile.com/demos/1.1.0/docs/api/events.html, one of which is orientationchange.

You can try using the actual selector shown with the data-position attribute rather than the #header. It might take a little bit of debugging to get it to work but no reason why it should not.