Commit
… 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
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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.
Sorry, something went wrong. |
||
} | ||
.ui-footer-fixed.ui-fixed-hidden { | ||
bottom: 0 !important; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
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.
Don't mind this - first pass and all...