diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css index 22bd5075..2b8c12cc 100644 --- a/css/structure/jquery.mobile.core.css +++ b/css/structure/jquery.mobile.core.css @@ -54,7 +54,9 @@ div.ui-mobile-viewport { overflow-x: hidden; } /* loading screen */ .ui-loading .ui-mobile-viewport { overflow: hidden !important; } .ui-loading .ui-loader { display: block; } -.ui-loader-inline .ui-icon-loading { display: block; margin: 1em auto; width: 35px; height: 35px; background-color: rgba(0,0,0,.1); } +.ui-loading-inline { min-height: 35px; position: relative; } + +.ui-loader-inline .ui-icon-loading { display: block; margin: 0 auto; position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -17px; width: 35px; height: 35px; background-color: rgba(0,0,0,.1); } .ui-loading .ui-page { overflow: hidden; } .ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; } diff --git a/docs/pages/dialog.html b/docs/pages/dialog.html index bee258b9..b72259ff 100644 --- a/docs/pages/dialog.html +++ b/docs/pages/dialog.html @@ -25,6 +25,10 @@

This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.

Sounds good Cancel + +
+ This is some alternate content. +
diff --git a/docs/pages/fetchlinks.html b/docs/pages/fetchlinks.html index 6e1f97df..3f38e33f 100644 --- a/docs/pages/fetchlinks.html +++ b/docs/pages/fetchlinks.html @@ -26,7 +26,10 @@
<a href="dialog.html" data-rel="dialog">Link</a>
 
-

A fetch link is created by adding the data-target attribute to a link. This tells the framework to not change pages and instead load the href into the target DOM element on the current page when the link is clicked. The target can be any jQuery selector (or restrict to ID only?).

+

A fetch link is created by adding the data-target attribute to a link. This tells the framework to not change pages and instead load the href into the target DOM element on the current page when the link is clicked. The target can be any jQuery selector (or restrict to ID only?).

+ +

Alternate Content

+
<a href="dialog.html" data-target=".quote">
 
diff --git a/js/jquery.mobile.fetchlink.js b/js/jquery.mobile.fetchlink.js index 17ae7b4a..3d5fbcf8 100644 --- a/js/jquery.mobile.fetchlink.js +++ b/js/jquery.mobile.fetchlink.js @@ -33,22 +33,32 @@ $.widget( "mobile.fetchlink", $.mobile.widget, { if ( url && method ) { targetEl.ajaxStart(function(){ - $(this).trigger('inlineLoader'); + var $el = $(this); + + $el + .addClass('ui-loading-inline') + .trigger('inlineLoader') + .height( $el.height() ); }); $.get( url, function( data ) { var rscript = /)<[^<]*)*<\/script>/gi, data = $( $("
").append( data.replace( rscript, "" ) ).find( load ) ) responseEl = !fragment ? $( data.html() ) : data; - + + /* TODO: Fetched relative a/img paths are broken by the base tag. */ + setTimeout(function() { targetEl[ method ]( responseEl.addClass('fade in') ); responseEl .trigger( "create" ) .trigger( "fetchlink", { target : targetEl, data: responseEl }); + + targetEl + .removeClass('ui-loading-inline') + .height('auto'); }, 300); - }); } } @@ -62,7 +72,7 @@ $( document ).bind( "inlineLoader", function( e ){ $( e.target ).children().removeClass('fade in').addClass('fade out'); setTimeout(function() { - $( e.target ).html( "
" ); + $( e.target ).html( "
" ); }, 300); });