Response title
This is preview!
Move this topic
Fixed, Absolute, Always Visible Header / Footer like in a native app
in Developing jQuery Mobile
•
10 years ago
Hi Guys
I have seen quite a lot of threads about this topic in this forum, but I haven't found any proper solution.
So my questions:
- Is anything scheduled from jQM for getting this fixed / improved?
- Has anybody come up with a solution that works?
Help is very much appreciated!
I have seen quite a lot of threads about this topic in this forum, but I haven't found any proper solution.
So my questions:
- Is anything scheduled from jQM for getting this fixed / improved?
- Has anybody come up with a solution that works?
Help is very much appreciated!
Thanks.
Fabian
Fabian
1
Replies(4)
Yes, and yes. We've been doing a ton of research and coding on this and pretty much have this feature wrapped up. True fixed toolbars in a wide range of browsers, all with native scrolling. This will be in 1.1, coming in February.
Ticket with a ton of info here:
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
Demo:
Browser support:
Android 2.1 - Now excluded from fixed: rules, toolbars now safely fall back static positioning
Android 2.3 - True fixed toolbars
Kindle Fire - True fixed toolbars
Honeycomb 3.0 - True fixed toolbars
iOS4 - Toolbars safely fall back static positioning
iOS5 - True fixed toolbars, tap to toggle works on the footer and both bars on the fullscreen page
BB7 - True fixed toolbars but the toolbars take up 40+% of the height of the Curve - is static better?
BB5/6 - Bars scroll with page and re-position after scroll stop but functional
WebOS 1.4 - Toolbars safely fall back to static positioning
Firefox Mobile 9 + 10 beta - Not true fixed, bars scroll with page and re-position after scroll stop but functional
Older Firefox mobile - falls back to static positioning (manually exclude older than version 6)
Opera Mini - Excluded, falls back to static positioning
Opera Mobile 11.5 - Bars scroll with page and re-position after scroll stop but functional
Dolphin 7.2.1 (Bada) - True fixed toolbars
UC Web - Toolbars safely fall back static positioning
Android 2.3 - True fixed toolbars
Kindle Fire - True fixed toolbars
Honeycomb 3.0 - True fixed toolbars
iOS4 - Toolbars safely fall back static positioning
iOS5 - True fixed toolbars, tap to toggle works on the footer and both bars on the fullscreen page
BB7 - True fixed toolbars but the toolbars take up 40+% of the height of the Curve - is static better?
BB5/6 - Bars scroll with page and re-position after scroll stop but functional
WebOS 1.4 - Toolbars safely fall back to static positioning
Firefox Mobile 9 + 10 beta - Not true fixed, bars scroll with page and re-position after scroll stop but functional
Older Firefox mobile - falls back to static positioning (manually exclude older than version 6)
Opera Mini - Excluded, falls back to static positioning
Opera Mobile 11.5 - Bars scroll with page and re-position after scroll stop but functional
Dolphin 7.2.1 (Bada) - True fixed toolbars
UC Web - Toolbars safely fall back static positioning
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
Leave a comment on toddparker's reply
If you need truely fixed footers NOW and you're only targeting more recent android devices or iPhones (say, in a Phonegap environment), it's very easy to add them:
1. Make sure to disable zooming in your app by adding this meta - tag to your head:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
2. Create your page with a footer as you would normally. Make sure NOT TO ADD data-position="fixed".
3. Instead, add a class "fixedFooter" to the class attribute of the footer: class="fixedFooter"
4. Create the class "fixedFooter" in your CSS(-file):
.fixedFooter {
position: fixed !important;
left: 0px !important;
right: 0px !important;
bottom: 0px !important;
z-index: 999 !important;
}5. Look at your page. If the fixed footer overlaps your content,
at some padding-bottom to the last element in the content area of your page.
Leave a comment on judgedoom's reply
Hello Guys
Thank you very much for your time and good answers.
@toddparker:
That is great! Is there any roadmap of jQM which illustrates the scheduled releases?
@judgedoom:
Thanks, this solution works!
How is it about overlapping though: If my fixed header / footer is a ui-bar, does the height of this bar change, based on the device-width or is 'padding-top', respectively 'padding-bottom' reliable?
Cheers!
Fabian
Thank you very much for your time and good answers.
@toddparker:
That is great! Is there any roadmap of jQM which illustrates the scheduled releases?
@judgedoom:
Thanks, this solution works!
How is it about overlapping though: If my fixed header / footer is a ui-bar, does the height of this bar change, based on the device-width or is 'padding-top', respectively 'padding-bottom' reliable?
Cheers!
Fabian
Leave a comment on fabian_bigler's reply
Sure, recent blog post with roadmap should cover your questions:
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
Leave a comment on toddparker's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to fabian_bigler's question