Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Helpers: resetActivePageHeight now accounts for external toolbars #7146

Closed
wants to merge 3 commits into from

2 participants

@gabrielschulhof
Collaborator

Fixes gh-7134

gabrielschulhof added some commits
@gabrielschulhof gabrielschulhof Helpers: resetActivePageHeight now accounts for external toolbars
Fixes gh-7134
10be525
@gabrielschulhof gabrielschulhof 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.
d133893
@gabrielschulhof gabrielschulhof added this to the 1.4.2 milestone
@arschmitz
Owner

id like to see some comments in navigation about the deferred you are adding.

@arschmitz arschmitz removed their assignment
@gabrielschulhof gabrielschulhof removed their assignment
@gabrielschulhof
Collaborator

@arschmitz I commented things a but. HTH.

@arschmitz
Owner

:+1:

@gabrielschulhof gabrielschulhof deleted the branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 20, 2014
  1. @gabrielschulhof
  2. @gabrielschulhof

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

    gabrielschulhof authored
    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.
Commits on Feb 23, 2014
  1. @gabrielschulhof
This page is out of date. Refresh to see the latest.
Showing with 52 additions and 2 deletions.
  1. +32 −1 js/jquery.mobile.helpers.js
  2. +20 −1 js/jquery.mobile.navigation.js
View
33 js/jquery.mobile.helpers.js
@@ -9,6 +9,36 @@ define( [ "jquery", "./jquery.mobile.ns", "jquery-ui/jquery.ui.core" ], function
//>>excludeEnd("jqmBuildExclude");
(function( $, window, undefined ) {
+ // Subtract the height of external toolbars from the page height, if the page does not have
+ // internal toolbars of the same type
+ var compensateToolbars = function( page, desiredHeight ) {
+ var pageParent = page.parent(),
+ toolbarsAffectingHeight = [],
+ externalHeaders = pageParent.children( ":jqmData(role='header')" ),
+ internalHeaders = page.children( ":jqmData(role='header')" ),
+ externalFooters = pageParent.children( ":jqmData(role='footer')" ),
+ internalFooters = page.children( ":jqmData(role='footer')" );
+
+ // If we have no internal headers, but we do have external headers, then their height
+ // reduces the page height
+ if ( internalHeaders.length === 0 && externalHeaders.length > 0 ) {
+ toolbarsAffectingHeight = toolbarsAffectingHeight.concat( externalHeaders.toArray() );
+ }
+
+ // If we have no internal footers, but we do have external footers, then their height
+ // reduces the page height
+ if ( internalFooters.length === 0 && externalFooters.length > 0 ) {
+ toolbarsAffectingHeight = toolbarsAffectingHeight.concat( externalFooters.toArray() );
+ }
+
+ $.each( toolbarsAffectingHeight, function( index, value ) {
+ desiredHeight -= $( value ).outerHeight();
+ });
+
+ // Height must be at least zero
+ return Math.max( 0, desiredHeight );
+ };
+
$.extend( $.mobile, {
// define the window and the document objects
window: $( window ),
@@ -139,7 +169,8 @@ define( [ "jquery", "./jquery.mobile.ns", "jquery-ui/jquery.ui.core" ], function
pageHeight = page.height(),
pageOuterHeight = page.outerHeight( true );
- height = ( typeof height === "number" ) ? height : $.mobile.getScreenHeight();
+ height = compensateToolbars( page,
+ ( typeof height === "number" ) ? height : $.mobile.getScreenHeight() );
page.css( "min-height", height - ( pageOuterHeight - pageHeight ) );
},
View
21 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);
Something went wrong with that request. Please try again.