Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
This backports the new fixedtoolbar plugin so that it works similarly…
Browse files Browse the repository at this point in the history
… 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
scottjehl committed Mar 6, 2012
1 parent a37efe8 commit 801e4aa
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 0 deletions.
11 changes: 11 additions & 0 deletions 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;

This comment has been minimized.

Copy link
@scottjehl

scottjehl Mar 6, 2012

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

}
.ui-footer-fixed.ui-fixed-hidden {
bottom: 0 !important;
}
1 change: 1 addition & 0 deletions css/structure/jquery.mobile.structure.css
Expand Up @@ -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" );
Expand Down
1 change: 1 addition & 0 deletions js/index.php
Expand Up @@ -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'
Expand Down
63 changes: 63 additions & 0 deletions 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
Copy link
Contributor

@rbdcti rbdcti commented on 801e4aa Mar 7, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link

@scottjehl scottjehl commented on 801e4aa Mar 7, 2012 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@toddparker
Copy link
Contributor

@toddparker toddparker commented on 801e4aa Mar 7, 2012 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rbdcti
Copy link
Contributor

@rbdcti rbdcti commented on 801e4aa Mar 7, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.