Skip to content
Browse files

position loader fixed by default, then check if it's positioned corre…

…ctly and if not, switch to an absolute positioned scheme, with updates on scroll (or scrollstop in iOS 4).
  • Loading branch information...
1 parent ad2f977 commit cde86da912f591baf44712f66c08ae7ab96a56af scottjehl committed Dec 30, 2011
Showing with 34 additions and 9 deletions.
  1. +1 −1 css/structure/jquery.mobile.core.css
  2. +33 −8 js/jquery.mobile.init.js
View
2 css/structure/jquery.mobile.core.css
@@ -55,7 +55,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-loader { background-color: #000; opacity: .18; display: none; z-index: 9999999; position: fixed; width: 46px; height: 46px; top: 50%; box-shadow: 0 1px 1px -1px #fff; margin-left: -18px; margin-top: -18px; left: 50%; padding: 1px; border:0; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader h1 { font-size: 0px; width: 0; height: 0; overflow: hidden; }
.ui-loader .ui-icon { display: block; margin: 0; width: 46px; height: 46px; background-color: transparent; }
-
+.ui-loader-fakefix { position: absolute; }
/*fouc*/
.ui-mobile-rendering > * { visibility: hidden; }
View
41 js/jquery.mobile.init.js
@@ -31,30 +31,55 @@ define( [ "jquery.mobile.core", "jquery.mobile.navigation", "jquery.mobile.navig
// loading div which appears during Ajax requests
// will not appear if $.mobile.loadingMessage is false
var $loader = $( "<div class='ui-loader '><span class='ui-icon ui-icon-loading'></span><h1></h1></div>" );
+
+ // For non-fixed supportin browsers. Position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
+ function fakeFixLoader(){
+ $loader
+ .css({
+ top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 ||
+ activeBtn.length && activeBtn.offset().top || 100
+ });
+ }
+
+ // check position of loader to see if it appears to be "fixed" to center
+ // if not, use abs positioning
+ function checkLoaderPosition(){
+ if( $loader.offset().top < $window.scrollTop() ){
+ $loader.addClass( "ui-loader-fakefix" );
+ fakeFixLoader();
+ $window
+ .unbind( "scroll", checkLoaderPosition )
+ .bind( "scroll", fakeFixLoader );
+ }
+ }
+
$.extend($.mobile, {
// turn on/off page loading message.
showPageLoadingMsg: function() {
+ $html.addClass( "ui-loading" );
if ( $.mobile.loadingMessage ) {
var activeBtn = $( "." + $.mobile.activeBtnClass ).first();
$loader
.find( "h1" )
.text( $.mobile.loadingMessage )
.end()
- .appendTo( $.mobile.pageContainer )
- // position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
- .css({
- top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 ||
- activeBtn.length && activeBtn.offset().top || 100
- });
+ .appendTo( $.mobile.pageContainer );
+
+ checkLoaderPosition();
+ $window.bind( "scroll", checkLoaderPosition );
}
-
- $html.addClass( "ui-loading" );
},
hidePageLoadingMsg: function() {
$html.removeClass( "ui-loading" );
+
+ if( $.mobile.loadingMessage ){
+ $loader.removeClass( "ui-loader-fakefix" );
+ }
+
+ $( window ).unbind( "scroll", fakeFixLoader );
},
// find and enhance the pages in the dom and transition to the first page.

0 comments on commit cde86da

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