Permalink
Browse files

Navigation: resetActivePageHeight() on pageshow but wait for window.load

This fixes the problem whereby header and footer heights are miscalculated when
showing the initial page, because during the initial page load, pageshow
happens before window.load, meaning that the CSS may not yet be loaded,
affecting header and footer heights.

Re gh-7134
  • Loading branch information...
gabrielschulhof committed Feb 19, 2014
1 parent 6dcea68 commit 65ad2f9305b2ea2ccfb2a73acb5886c26761efdf
Showing with 20 additions and 1 deletion.
  1. +20 −1 js/jquery.mobile.navigation.js
@@ -22,6 +22,9 @@ define( [
// resolved on domready
var domreadyDeferred = $.Deferred(),
+
+ // resolved and nulled on window.load()
+ loadDeferred = $.Deferred(),
documentUrl = $.mobile.path.documentUrl,
// used to track last vclicked element to make sure its value is added to form data
@@ -423,13 +426,29 @@ define( [
$.mobile.pageContainer.pagecontainer();
//set page min-heights to be device specific
- $.mobile.document.bind( "pageshow", $.mobile.resetActivePageHeight );
+ $.mobile.document.bind( "pageshow", function() {
+
+ // We need to wait for window.load to make sure that styles have already been rendered,
+ // otherwise heights of external toolbars will have the wrong value
+ if ( loadDeferred ) {
+ loadDeferred.done( $.mobile.resetActivePageHeight );
+ } else {
+ $.mobile.resetActivePageHeight();
+ }
+ });
$.mobile.window.bind( "throttledresize", $.mobile.resetActivePageHeight );
};//navreadyDeferred done callback
$( function() { domreadyDeferred.resolve(); } );
+ $.mobile.window.load( function() {
+
+ // Resolve and null the deferred
+ loadDeferred.resolve();
+ loadDeferred = null;
+ });
+
$.when( domreadyDeferred, $.mobile.navreadyDeferred ).done( function() { $.mobile._registerInternalEvents(); } );
})( jQuery );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);

0 comments on commit 65ad2f9

Please sign in to comment.