Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

option to disable automatic resetActivePageHeight #5530

Closed
wants to merge 2 commits into from

3 participants

@sheppard

As I'm increasingly using jQM for "mobile-first, but not mobile only," I'm finding it useful to add a healthy margin around the page for larger screen sizes. This could be done using only CSS breakpoints were it not for the automated resetActivePageHeight. This patch allows resetActivePageHeight to function differently above a configurable screen width (like $.mobile.maxTransitionWidth). Above the specified maxAutoHeightAdjustmentWidth, resetActivePageHeight will clear out the min-height, allowing it to be configured via CSS for larger screen sizes.

@jaspermdegroot
Collaborator

@sheppard

Thanks for the PR!

If we would make this optional and it is set to false, a lot of the unstyled body will be visible below the page if there is not much content on the page. Besides this, I think there might be issues with page transitions.

The resetActivePageHeight function already takes border and padding into account (while those default to 0). Don't you think it would be a better approach if we would do the same for margin?

@sheppard

Thanks for looking at this. My idea is that defaulting this option to false would preserve the current behavior (similar to how setting maxTransitionWidth=false means transitions are always on). As far as the other issues my implicit assumptions included:

  • the developer would know that setting this option would expose the body, and modify their CSS accordingly, e.g. by adding a custom background gradient to the body for large screens and a min-height to the page div.
  • while there probably will be issues with page transitions (at least aesthetically if not technically), the developer would probably want to turn off transitions above the specified width anyway.

I hadn't thought about whether the existing function could be modified to take the margin into account in the computation. My current approach has been to use min-height but I'll see if I can get the effect I want with a margin and get back to you.

@gseguin
Collaborator

@sheppard, Thank you for the pull request! It seems like you haven't signed a CLA. Please visit http://contribute.jquery.org/CLA/ and sign it so we can look into your PR.

Thank you.

@jaspermdegroot
Collaborator

@sheppard

As discussed on IRC the other week you can override the inline style if needed. I just committed 509f3b4 which makes resetActivePageHeight() take margin into account as well.
Closing this PR. Thanks again for your effort!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 25, 2013
  1. @sheppard
  2. @sheppard

    fix indentation

    sheppard authored
This page is out of date. Refresh to see the latest.
Showing with 10 additions and 1 deletion.
  1. +3 −0  js/jquery.mobile.core.js
  2. +7 −1 js/jquery.mobile.navigation.js
View
3  js/jquery.mobile.core.js
@@ -49,6 +49,9 @@ define( [ "jquery", "./jquery.mobile.ns", "text!../version.txt" ], function( $,
// Set maximum window width for transitions to apply - 'false' for no limit
maxTransitionWidth: false,
+ // Set maximum window width for resetActivePageHeight - 'false' for no limit
+ maxAutoHeightAdjustmentWidth: false,
+
// Minimum scroll distance that will be remembered when returning to a page
minScrollBack: 250,
View
8 js/jquery.mobile.navigation.js
@@ -285,13 +285,19 @@ define( [
}
//simply set the active page's minimum height to screen height, depending on orientation
- $.mobile.resetActivePageHeight = function resetActivePageHeight( height ) {
+ $.mobile.resetActivePageHeight = function( height ) {
var aPage = $( "." + $.mobile.activePageClass ),
aPagePadT = parseFloat( aPage.css( "padding-top" ) ),
aPagePadB = parseFloat( aPage.css( "padding-bottom" ) ),
aPageBorderT = parseFloat( aPage.css( "border-top-width" ) ),
aPageBorderB = parseFloat( aPage.css( "border-bottom-width" ) );
+ // configurable option to avoid automatically resizing page on large screens
+ if (typeof height !== "number" && $.mobile.maxAutoHeightAdjustmentWidth !== false && $.mobile.window.width() > $.mobile.maxAutoHeightAdjustmentWidth) {
+ aPage.css( "min-height", "");
+ return;
+ }
+
height = ( typeof height === "number" )? height : getScreenHeight();
aPage.css( "min-height", height - aPagePadT - aPagePadB - aPageBorderT - aPageBorderB );
Something went wrong with that request. Please try again.