Skip to content
Browse files

This backports the new fixedtoolbar plugin so that it works similarly…

… on fix-blacklisted browsers like iOS4. With these files included, the toolbars will behave similarly to jQM 1.0 in browsers that don't support position:fixed properly, like iOS4.
  • Loading branch information...
1 parent a37efe8 commit 801e4aa6eed135aeacef7938cba274a3e46f2089 scottjehl committed Mar 7, 2012
View
11 css/structure/jquery.mobile.fixedToolbar.polyfill.css
@@ -0,0 +1,11 @@
+/* fixed page header & footer configuration */
+.ui-faux-fixed .ui-header-fixed,
+.ui-faux-fixed .ui-footer-fixed {
+ position: absolute;
+}
+.ui-header-fixed.ui-fixed-hidden {
+ top: 0 !important;
@scottjehl
scottjehl added a note Mar 6, 2012

Don't mind this - first pass and all...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+}
+.ui-footer-fixed.ui-fixed-hidden {
+ bottom: 0 !important;
+}
View
1 css/structure/jquery.mobile.structure.css
@@ -10,6 +10,7 @@
@import url( "jquery.mobile.transitions.flow.css" );
@import url( "jquery.mobile.grids.css" );
@import url( "jquery.mobile.fixedToolbar.css" );
+@import url( "jquery.mobile.fixedToolbar.polyfill.css" );
@import url( "jquery.mobile.navbar.css" );
@import url( "jquery.mobile.button.css" );
@import url( "jquery.mobile.collapsible.css" );
View
1 js/index.php
@@ -46,6 +46,7 @@
'jquery.mobile.controlGroup.js',
'jquery.mobile.links.js',
'jquery.mobile.fixedToolbar.js',
+ 'jquery.mobile.fixedToolbar.polyfill.js',
'jquery.mobile.zoom.js',
'jquery.mobile.zoom.iosorientationfix.js',
'jquery.mobile.init.js'
View
63 js/jquery.mobile.fixedToolbar.polyfill.js
@@ -0,0 +1,63 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Polyfilled behavior for "fixed" headers and footers in browsers that don't support position:fixed
+//>>label: Fixedtoolbar
+
+define( [ "jquery", "./jquery.mobile.fixedToolbar" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+ var supportBlacklist = $.mobile.fixedtoolbar.prototype.options.supportBlacklist;
+
+ // If the browser is blacklisted for position:fixed support, polyfill it
+ if( supportBlacklist() ){
+
+ // Add class for CSS hookage
+ $( document.documentElement ).addClass( "ui-faux-fixed" );
+
+ // Make the blacklist test return false, letting any normally-blacklisted browsers in to be polyfilled
+ $.mobile.fixedtoolbar.prototype.options.supportBlacklist = function(){ return false; };
+
+ // Per page show, re-set up the event handling
+ $( document ).bind( "pagebeforeshow", function( e ){
+
+ var page = $( e.target ),
+ fixies = page.find( ".ui-header-fixed, .ui-footer-fixed" ),
+ visibleAtStart,
+ resetPos = function(){
+ fixies.each(function(){
+ if( $(this).hasClass( "ui-header-fixed") ){
+ $( this ).css( "top", $( window ).scrollTop() + "px" );
+ }
+ else {
+ $( this ).css( "bottom", $.mobile.activePage.height() - $( window).scrollTop() - $.mobile.getScreenHeight() + "px" );
+ }
+ });
+ };
+
+ // Normalize proper object for scroll event
+ ( ( $( document ).scrollTop() === 0 ) ? $( window ) : $( document ) )
+ .bind( "scrollstart.fixed", function(){
+ visibleAtStart = fixies.not( ".ui-fixed-hidden" ).fixedtoolbar( "hide", true );
+ })
+ .bind( "scrollstop.fixed", function(){
+ resetPos();
+ visibleAtStart.fixedtoolbar( "show" );
+ });
+
+ // on resize, reset positioning
+ $( window ).bind( "throttledresize.fixed", resetPos );
+
+ // on pagehide, unbind the event handlers
+ page.one( "pagehide", function(){
+ $( window ).add( this ).add( document ).unbind( ".fixed" );
+ });
+
+ // align for pageshow
+ resetPos();
+ });
+ }
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");

4 comments on commit 801e4aa

@rbdcti
rbdcti commented on 801e4aa Mar 7, 2012

So this means that browsers like iOS4 and Android 1.6 will get the "floating" toolbars that jQM 1.0 had then? Awesome! (The static positioning can be confusing for users if the mobile page is long.) Is this going into jQM 1.1 or 1.2?

@scottjehl
@toddparker
@rbdcti
rbdcti commented on 801e4aa Mar 7, 2012

Awesome, thanks guys! I think including it either way would be great. So it sounds like jQM could be developing out a sort of plug-in framework for things like that (similar to jquery itself)? That would be great to keep the size of the core library down for optional features like this.

Please sign in to comment.
Something went wrong with that request. Please try again.