filamentgroup/jquery-mobile-fixedtoolbar-legacy-polyfill

Brings jQM Fixed Toolbar support to browsers that don't natively support position:fixed (like iOS4)

⚠️ This project is archived and the repository is no longer maintained.

jQuery Mobile Fixed Toolbar Legacy Polyfill

Brings support to browsers that don't natively support position:fixed (like iOS4)

• Copyright 2012 Filament Group, Inc.
• License Dual MIT or GPLv2
• Author @scottjehl, Filament Group, Inc.

Usage

Include jquery.mobile.fixedToolbar.polyfill.css and jquery.mobile.fixedToolbar.polyfill.js just after your jQuery and jQuery Mobile references, in the head of your document. Note that the JS for this fix must be included just after jQuery Mobile itself, so that it can execute before toolbars are initialized.

Additional methods

This polyfill adds an updatePosition method to the fixedtoolbar plugin. If you add or remove content in the page, you can call this method to reset the toolbar's positioning. This is mostly applicable to footers.

$( ".ui-footer-fixed" ).fixedToolbar( "updatePosition" );

jquery-mobile-fixedtoolbar-legacy-polyfill's Issues

Dynamic content

If I inject dynamic content, the fixed toolbar doesn't work anymore, perheps some "update" method might work. Tks

Readme File Has Incorrect Example

Please change fixedToolbar to fixedtoolbar in the readme document so that people don't get Javascript errors.

It doesn't work with Windows Phone 7.5

You see the same problem maybe 10px; or more in the footer.

Footer not visible/correctly positioned when content doesn't overflow.

On the iPad with iOS4, if the page's content doesn't require scrolling then the footer isn't visible until you touch the screen. It also doesn't always position at the bottom on complex pages.
I found the fix is to change the footer position line from:
toolbar.css("bottom", page.outerHeight() - $(window).scrollTop() - $.mobile.getScreenHeight() + "px");
to:
toolbar.css("bottom", $(document).outerHeight() - $(window).scrollTop() - $.mobile.getScreenHeight() + "px");

Using the document height instead of the page seems to work better.

Fixed toolbars not working in WP7.5

Both the fixed header and footer scrolls with the page. The 1.0 version of the polyfill positioned the footer correctly (though there is a ~2px gap) so it seems that we could get this working.

Getting inline/static toolbars on iphone 4.2.1. Getting fixed on blackberry curve 9330 on v6.

On my iphone 3gs 4.2.1 I'm getting fallback to inline/static toolbars. Is this expected behavior? It would be nice to have our choice of fallback behavior per page.

Getting fixed toolbars on a blackberry curve 9300 (v6) is not what you would want. The inline/static toolbar is better because the screen is too small for fixed toolbars. It is about 1/2 the size of my iphone screen. And the phone is slow redrawing the fixed toolbars so it makes the app appear it is broken.

Thanks

Toolbars not positioning correctly

We're using a toolbar as a tabbed navigation, when I added in the polyfill to get this working for iOS 4.3 and older, the toolbar is almost in position but sits about it's own height above the position it should be occupying.

When the user taps the screen it moves into position, if the user taps the screen again it moves back to it's former position.

How do I resolve this?

Fixed Footer

Hi I try your FixedToolBar For my Windows mobile7 application using Phonegap..

footer is moving up and down[web bounce].
Footer Placed In End Of the Page.
Footer IS Scroll With Body.
Below I add The Screen Shots .....

This Image Show that There Is No footer On Bottom

This Image Show That Footer Placed At End Of The Page

IF I changed The Orientation Horizontal To Landscape Footer Not Showed

Footer Is Moved With content.

PLz Give solution for my Problem....

i 'm using Vs 2010 and Phonegap 2.0.0 version

Fixed toolbars float from top/bottom on ios when keyboard pops up

The data-position=fixed scrolls a footer to just above the keyboard and it stays there until the keyboard closes, so when the page is scrolled while the keyboard is showing the footer scrolls as well, and hides the text fields behind it.

Cannot call methods on fixedtoolbar prior to initialization

So, if I have same header with polyfill for old toolbar for all pages, when browser goes to page without toolbar, polyfill script dies with error:

cannot call methods on fixedtoolbar prior to initialization; attempted to call method 'hide/show'

May be check should be added to detect if there is a toolbar to adjust in the first place