Menu
I have a jQM application that uses the header as a navigation bar. The problem I'm having is that the page transitions (specifically slide) move the header along with the content as one "page". I'm looking for a way to keep the header static during page transitions.
I've checked the API and can't seem to find anything. Has anyone figured out a way to accomplish this? Is it even possible with jQM?
Any help would be appreciated!
804
You will need to build your own header that is not part of a <div data-role="page"> element. Generally you add your header/footer as a child of the <div data-role="page"> element but that makes them transition with the rest of the page.
To remove the header from transitions you can absolutely position your custom header at the top of the page and then add padding to the data-role="content" div elements so the header does not hide any content.
<style>
#my_header {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 50px;
z-index : 1000;
overflow : hidden;
}
[data-role="content"] {
padding-top : 50px;
}
</style>
<body>
<div data-role="page">...</div>
<div id="my_header">...</div>
</body>
<!-- Notice the header div is not nested within any data-role="page" divs -->
I haven't tested this but I do something similar for site-wide menus and it works great. The pages should transition behind the header and the header should stay in-place.
121
This link to the jquerymobile site outlines how to do this 'properly'. Probably new in 1.20 (I'm just getting on board with this so not certain). Works better than the padding solution for me, but only if you don't need the same static instance of the header which is probably what the OP was after, as it keeps state. Handy link, anyhow.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
