From bf02fc880d97156b41594cbae997750fe68b406a Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 8 Sep 2011 12:31:59 -0400 Subject: [PATCH 01/14] increased timeout that waits for a potential hashchange event to fire as a result of pop. --- js/jquery.mobile.navigation.pushstate.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.navigation.pushstate.js b/js/jquery.mobile.navigation.pushstate.js index 06bd748a..03f3c1ff 100644 --- a/js/jquery.mobile.navigation.pushstate.js +++ b/js/jquery.mobile.navigation.pushstate.js @@ -91,7 +91,7 @@ // change the page based on the hash $.mobile._handleHashChange( poppedState.hash ); - }); + }, 100); } }, From dae560d67f7b7afcf25f8758372701f5ac33805b Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 5 Sep 2011 14:48:50 +0100 Subject: [PATCH 02/14] added support test & html class for overflow-scrolling-touch --- js/jquery.mobile.support.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js index 2b503f89..1b2fc729 100644 --- a/js/jquery.mobile.support.js +++ b/js/jquery.mobile.support.js @@ -70,6 +70,7 @@ $.extend( $.support, { pushState: "pushState" in history && "replaceState" in history, mediaquery: $.mobile.media( "only all" ), cssPseudoElement: !!propExists( "content" ), + overflowScrollingTouch: !!propExists( "overflowScrolling" ), boxShadow: !!propExists( "boxShadow" ) && !bb, scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos, dynamicBaseTag: baseTagTest(), @@ -117,4 +118,9 @@ if ( !$.support.boxShadow ) { $( "html" ).addClass( "ui-mobile-nosupport-boxshadow" ); } -})( jQuery ); +// For opting into touch overflow scrolling +if( $.support.overflowScrollingTouch ){ + $( "html" ).addClass( "ui-mobile-overflow-scrolling" ); +} + +})( jQuery ); \ No newline at end of file From c8e676d5915d201831d3f303ed5fec71c5794c34 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 5 Sep 2011 15:20:51 +0100 Subject: [PATCH 03/14] applied conditional overflow scrolling to page div --- themes/default/jquery.mobile.core.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/themes/default/jquery.mobile.core.css b/themes/default/jquery.mobile.core.css index 5d3360b2..f356eee3 100644 --- a/themes/default/jquery.mobile.core.css +++ b/themes/default/jquery.mobile.core.css @@ -22,6 +22,17 @@ .landscape, .landscape .ui-page { min-height: 300px; } +/* native overflow scrolling */ +.ui-mobile.ui-mobile-overflow-scrolling .ui-page { + overflow: auto; + height: 100%; + -webkit-overflow-scrolling: touch; + -moz-overflow-scrolling: touch; + -o-overflow-scrolling: touch; + -ms-overflow-scrolling: touch; + overflow-scrolling: touch; +} + /* loading screen */ .ui-loading .ui-mobile-viewport { overflow: hidden !important; } .ui-loading .ui-loader { display: block; } From 440be55f2b3081407c246af35d9cedd7213d2bfc Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 7 Sep 2011 09:24:36 -0400 Subject: [PATCH 04/14] changed the name of the overflow support test and class to touchOverflow / touch-overflow --- js/jquery.mobile.support.js | 6 +++--- themes/default/jquery.mobile.core.css | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js index 1b2fc729..ac095809 100644 --- a/js/jquery.mobile.support.js +++ b/js/jquery.mobile.support.js @@ -70,7 +70,7 @@ $.extend( $.support, { pushState: "pushState" in history && "replaceState" in history, mediaquery: $.mobile.media( "only all" ), cssPseudoElement: !!propExists( "content" ), - overflowScrollingTouch: !!propExists( "overflowScrolling" ), + touchOverflow: !!propExists( "overflowScrolling" ), boxShadow: !!propExists( "boxShadow" ) && !bb, scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos, dynamicBaseTag: baseTagTest(), @@ -119,8 +119,8 @@ if ( !$.support.boxShadow ) { } // For opting into touch overflow scrolling -if( $.support.overflowScrollingTouch ){ - $( "html" ).addClass( "ui-mobile-overflow-scrolling" ); +if( $.support.touchOverflow ){ + $( "html" ).addClass( "ui-mobile-touch-overflow" ); } })( jQuery ); \ No newline at end of file diff --git a/themes/default/jquery.mobile.core.css b/themes/default/jquery.mobile.core.css index f356eee3..47521b1d 100644 --- a/themes/default/jquery.mobile.core.css +++ b/themes/default/jquery.mobile.core.css @@ -23,7 +23,7 @@ .landscape .ui-page { min-height: 300px; } /* native overflow scrolling */ -.ui-mobile.ui-mobile-overflow-scrolling .ui-page { +.ui-mobile.ui-mobile-touch-overflow .ui-page { overflow: auto; height: 100%; -webkit-overflow-scrolling: touch; From 1a524756f3e9ca984816965b3424f9af4beaeeb0 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 7 Sep 2011 09:44:34 -0400 Subject: [PATCH 05/14] added a pre-transition class to set pages to display: block early and allow for their scrollTop and focus to be set before they are shown. --- js/jquery.mobile.navigation.js | 45 +++++++++++++++++++-------- themes/default/jquery.mobile.core.css | 3 ++ 2 files changed, 35 insertions(+), 13 deletions(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index cf20a35c..50c1fb4a 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -412,8 +412,8 @@ var active = $.mobile.urlHistory.getActive(); if( active ){ - var lastScroll = $( window ).scrollTop(); - + var lastScroll = $.support.touchOverflow ? $( ".ui-page-active" ).scrollTop() : $( window ).scrollTop(); + // Set active page's lastScroll prop. // If the Y location we're scrolling to is less than minScrollBack, let it go. active.lastScroll = lastScroll < $.mobile.minScrollBack ? $.mobile.defaultHomeScroll : lastScroll; @@ -434,19 +434,31 @@ toScroll = active.lastScroll || $.mobile.defaultHomeScroll, screenHeight = getScreenHeight(); - // Scroll to top + // Scroll to top, hide addr bar window.scrollTo( 0, $.mobile.defaultHomeScroll ); if( fromPage ) { //trigger before show/hide events fromPage.data( "page" )._trigger( "beforehide", null, { nextPage: toPage } ); } - toPage - .height( screenHeight + toScroll ) - .data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } ); + + if( !$.support.touchOverflow ){ + toPage.height( screenHeight + toScroll ); + } + + toPage.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } ); //clear page loader $.mobile.hidePageLoadingMsg(); + + if( $.support.touchOverflow && toScroll ){ + toPage.addClass( "ui-mobile-pre-transition" ); + // Send focus to page as it is now display: block + reFocus( toPage ); + + //set page's scrollTop to remembered distance + toPage.scrollTop( toScroll ); + } //find the transition handler for the specified transition. If there //isn't one in our transitionHandlers dictionary, use the default one. @@ -455,18 +467,25 @@ promise = th( transition, reverse, toPage, fromPage ); promise.done(function() { - //reset toPage height bac - toPage.height( "" ); - - // Send focus to the newly shown page - reFocus( toPage ); + //reset toPage height back + if( !$.support.touchOverflow ){ + toPage.height( "" ); + // Send focus to the newly shown page + reFocus( toPage ); + } // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. - $.mobile.silentScroll( toScroll ); + if( !$.support.touchOverflow ){ + $.mobile.silentScroll( toScroll ); + } //trigger show/hide events if( fromPage ) { - fromPage.height("").data( "page" )._trigger( "hide", null, { nextPage: toPage } ); + if( !$.support.touchOverflow ){ + fromPage.height( "" ); + } + + fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } ); } //trigger pageshow, define prevPage as either fromPage or empty jQuery obj diff --git a/themes/default/jquery.mobile.core.css b/themes/default/jquery.mobile.core.css index 47521b1d..9793b396 100644 --- a/themes/default/jquery.mobile.core.css +++ b/themes/default/jquery.mobile.core.css @@ -32,6 +32,9 @@ -ms-overflow-scrolling: touch; overflow-scrolling: touch; } +.ui-page.ui-mobile-pre-transition { + display: block; +} /* loading screen */ .ui-loading .ui-mobile-viewport { overflow: hidden !important; } From 6333be5ddfebc7230fbd39572dacc48f81f668ec Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 7 Sep 2011 09:45:12 -0400 Subject: [PATCH 06/14] changed the docs bg image so it doesn't act fixed in iOS5 --- docs/_assets/css/jqm-docs.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_assets/css/jqm-docs.css b/docs/_assets/css/jqm-docs.css index 56f6293b..0044db3c 100644 --- a/docs/_assets/css/jqm-docs.css +++ b/docs/_assets/css/jqm-docs.css @@ -6,7 +6,7 @@ cobblers, shoes, body { background: #dddddd; } -.ui-mobile .type-home { background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; } +.ui-mobile .type-home .ui-content { margin: 0; background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; } .ui-mobile #jqm-homeheader { padding: 40px 10px 0; text-align: center; margin: 0 auto; } .ui-mobile #jqm-homeheader h1 { margin: 0 0 ; } .ui-mobile #jqm-homeheader p { margin: .3em 0 0; line-height: 1.3; font-size: .9em; font-weight: bold; color: #666; } From fda71670b46ac02ebb30e81d758b053530409e45 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 7 Sep 2011 12:36:28 -0400 Subject: [PATCH 07/14] reset scrollTop to 0, not defaultHomeScroll --- js/jquery.mobile.navigation.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 50c1fb4a..d60d8873 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -425,13 +425,13 @@ // using beforechangepage or popstate/hashchange (whichever comes first) $( document ).bind( "beforechangepage", getLastScroll ); $( window ).bind( $.support.pushState ? "popstate" : "hashchange", getLastScroll ); - + //function for transitioning between two existing pages function transitionPages( toPage, fromPage, transition, reverse ) { //get current scroll distance var active = $.mobile.urlHistory.getActive(), - toScroll = active.lastScroll || $.mobile.defaultHomeScroll, + toScroll = active.lastScroll || ( $.support.touchOverflow ? 0 : $.mobile.defaultHomeScroll ), screenHeight = getScreenHeight(); // Scroll to top, hide addr bar From bc036b91b08b609c3e4ecbbe2a0d1378b3fe6b81 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 7 Sep 2011 12:39:33 -0400 Subject: [PATCH 08/14] Clock tap is busted, so this logic is here but commented-out --- js/jquery.mobile.navigation.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index d60d8873..332e36ad 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -426,6 +426,17 @@ $( document ).bind( "beforechangepage", getLastScroll ); $( window ).bind( $.support.pushState ? "popstate" : "hashchange", getLastScroll ); + // Make the iOS clock quick-scroll work again if we're using native overflow scrolling + /* + if( $.support.touchOverflow ){ + $( window ).bind( "scrollstop", function(){ + if( $( this ).scrollTop() === 0 ){ + $.mobile.activePage.scrollTop( 0 ); + } + }); + } + */ + //function for transitioning between two existing pages function transitionPages( toPage, fromPage, transition, reverse ) { From bb4e1ca2754d4bb58a783209bc7a344371e5d85d Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 7 Sep 2011 18:05:45 -0400 Subject: [PATCH 09/14] removed image dimensions in demo page --- docs/toolbars/bars-fullscreen.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/toolbars/bars-fullscreen.html b/docs/toolbars/bars-fullscreen.html index 66ff7fd1..a59562c4 100755 --- a/docs/toolbars/bars-fullscreen.html +++ b/docs/toolbars/bars-fullscreen.html @@ -22,7 +22,7 @@
- Photo Run + Photo Run

This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively — a common scenario for photo, image or video viewers.

From b645781f4da5f14130a57c10c79bd65ec51a1aca Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 7 Sep 2011 18:08:12 -0400 Subject: [PATCH 10/14] implemented native overflow scrolling based on support for -[prefix]-overflow-scrolling: touch. True fixed headers and footers come supported as well. --- Makefile | 1 + build.xml | 1 + docs/_assets/css/jqm-docs.css | 1 + js/index.php | 1 + js/jquery.mobile.fixHeaderFooter.js | 4 +- js/jquery.mobile.fixHeaderFooter.native.js | 59 ++++++++++++++++++++++ js/jquery.mobile.navigation.js | 46 +++++++++++------ js/jquery.mobile.support.js | 5 -- themes/default/jquery.mobile.core.css | 40 ++++++++++++++- 9 files changed, 135 insertions(+), 23 deletions(-) create mode 100644 js/jquery.mobile.fixHeaderFooter.native.js diff --git a/Makefile b/Makefile index cc664c6d..6614b2de 100644 --- a/Makefile +++ b/Makefile @@ -67,6 +67,7 @@ JSFILES = js/jquery.ui.widget.js \ js/jquery.mobile.controlGroup.js \ js/jquery.mobile.links.js \ js/jquery.mobile.fixHeaderFooter.js \ + js/jquery.mobile.fixHeaderFooter.native.js \ js/jquery.mobile.media.classes.js \ js/jquery.mobile.init.js diff --git a/build.xml b/build.xml index 62428e64..e1012b22 100644 --- a/build.xml +++ b/build.xml @@ -51,6 +51,7 @@ jquery.mobile.controlGroup.js, jquery.mobile.links.js, jquery.mobile.fixHeaderFooter.js, + jquery.mobile.fixHeaderFooter.native.js, jquery.mobile.media.classes.js, jquery.mobile.init.js"/> diff --git a/docs/_assets/css/jqm-docs.css b/docs/_assets/css/jqm-docs.css index 0044db3c..0f53fb3e 100644 --- a/docs/_assets/css/jqm-docs.css +++ b/docs/_assets/css/jqm-docs.css @@ -21,6 +21,7 @@ dt code, dd code { font-size:1.3em; line-height:150%; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } #jqm-homeheader img { width: 235px; } +img { max-width: 100%; } .ui-header .jqm-home { top:0.65em; } nav { margin: 0; } diff --git a/js/index.php b/js/index.php index bdfb6da7..93f1014c 100644 --- a/js/index.php +++ b/js/index.php @@ -33,6 +33,7 @@ $elements = array( 'jquery.mobile.controlGroup.js', 'jquery.mobile.links.js', 'jquery.mobile.fixHeaderFooter.js', + 'jquery.mobile.fixHeaderFooter.native.js', 'jquery.mobile.media.classes.js', 'jquery.mobile.init.js' ); diff --git a/js/jquery.mobile.fixHeaderFooter.js b/js/jquery.mobile.fixHeaderFooter.js index e275923a..b38209ac 100644 --- a/js/jquery.mobile.fixHeaderFooter.js +++ b/js/jquery.mobile.fixHeaderFooter.js @@ -37,7 +37,7 @@ $.fn.fixHeaderFooter = function( options ) { // single controller for all showing,hiding,toggling $.mobile.fixedToolbars = (function() { - if ( !$.support.scrollTop ) { + if ( !$.support.scrollTop || $.support.touchOverflow ) { return; } @@ -361,7 +361,7 @@ $( document ).bind( "pagecreate create", function( event ) { $( event.target ).each(function() { - if ( !$.support.scrollTop ) { + if ( !$.support.scrollTop || $.support.touchOverflow ) { return this; } diff --git a/js/jquery.mobile.fixHeaderFooter.native.js b/js/jquery.mobile.fixHeaderFooter.native.js new file mode 100644 index 00000000..b7740d9d --- /dev/null +++ b/js/jquery.mobile.fixHeaderFooter.native.js @@ -0,0 +1,59 @@ +/* +* jQuery Mobile Framework : "fixHeaderFooter" native plugin - Behavior for "fixed" headers,footers, and scrolling inner content +* Copyright (c) jQuery Project +* Dual licensed under the MIT or GPL Version 2 licenses. +* http://jquery.org/license +*/ + +(function( $, undefined ) { + +$.mobile.touchOverflowEnabled = true; + +$( document ).bind( "pagecreate", function( event ) { + if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){ + + var $target = $( event.target ), + scrollStartY = 0; + + if( $target.is( ":jqmData(role='page')" ) ){ + + $target.each(function() { + var $page = $( this ), + $fixies = $page.find( ":jqmData(role='header'), :jqmData(role='footer')" ).filter( ":jqmData(position='fixed')" ), + fullScreen = $page.jqmData( "fullscreen" ), + $scrollElem = $fixies.length ? $page.find( ".ui-content" ) : $page; + + $page.addClass( "ui-mobile-touch-overflow" ); + + $scrollElem.bind( "scrollstop", function(){ + if( $scrollElem.scrollTop() > 0 ){ + window.scrollTo( 0, $.mobile.defaultHomeScroll ); + } + }); + + if( $fixies.length ){ + + $page.addClass( "ui-native-fixed" ); + + if( fullScreen ){ + + $page.addClass( "ui-native-fullscreen" ); + + $fixies.addClass( "fade in" ); + + $( document ).bind( "vclick", function(){ + $fixies + .removeClass( "ui-native-bars-hidden" ) + .toggleClass( "in out" ) + .animationComplete(function(){ + $(this).not( ".in" ).addClass( "ui-native-bars-hidden" ); + }); + } ); + } + } + }); + } + } +}); + +})( jQuery ); diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 332e36ad..2b9e029a 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -409,10 +409,17 @@ lastScrollEnabled = false; - var active = $.mobile.urlHistory.getActive(); + var active = $.mobile.urlHistory.getActive(), + activePage = $( ".ui-page-active" ), + scrollElem = $( window ), + touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled; + + if( touchOverflow ){ + scrollElem = activePage.is( ".ui-native-fixed" ) ? activePage.find( ".ui-content" ) : activePage; + } if( active ){ - var lastScroll = $.support.touchOverflow ? $( ".ui-page-active" ).scrollTop() : $( window ).scrollTop(); + var lastScroll = scrollElem.scrollTop(); // Set active page's lastScroll prop. // If the Y location we're scrolling to is less than minScrollBack, let it go. @@ -429,11 +436,13 @@ // Make the iOS clock quick-scroll work again if we're using native overflow scrolling /* if( $.support.touchOverflow ){ - $( window ).bind( "scrollstop", function(){ - if( $( this ).scrollTop() === 0 ){ - $.mobile.activePage.scrollTop( 0 ); - } - }); + if( $.mobile.touchOverflowEnabled ){ + $( window ).bind( "scrollstop", function(){ + if( $( this ).scrollTop() === 0 ){ + $.mobile.activePage.scrollTop( 0 ); + } + }); + } } */ @@ -442,9 +451,10 @@ //get current scroll distance var active = $.mobile.urlHistory.getActive(), - toScroll = active.lastScroll || ( $.support.touchOverflow ? 0 : $.mobile.defaultHomeScroll ), + touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, + toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), screenHeight = getScreenHeight(); - + // Scroll to top, hide addr bar window.scrollTo( 0, $.mobile.defaultHomeScroll ); @@ -453,7 +463,7 @@ fromPage.data( "page" )._trigger( "beforehide", null, { nextPage: toPage } ); } - if( !$.support.touchOverflow ){ + if( !touchOverflow){ toPage.height( screenHeight + toScroll ); } @@ -462,13 +472,19 @@ //clear page loader $.mobile.hidePageLoadingMsg(); - if( $.support.touchOverflow && toScroll ){ + if( touchOverflow && toScroll ){ + toPage.addClass( "ui-mobile-pre-transition" ); // Send focus to page as it is now display: block reFocus( toPage ); //set page's scrollTop to remembered distance - toPage.scrollTop( toScroll ); + if( toPage.is( ".ui-native-fixed" ) ){ + toPage.find( ".ui-content" ).scrollTop( toScroll ); + } + else{ + toPage.scrollTop( toScroll ); + } } //find the transition handler for the specified transition. If there @@ -479,20 +495,20 @@ promise.done(function() { //reset toPage height back - if( !$.support.touchOverflow ){ + if( !touchOverflow ){ toPage.height( "" ); // Send focus to the newly shown page reFocus( toPage ); } // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. - if( !$.support.touchOverflow ){ + if( !touchOverflow ){ $.mobile.silentScroll( toScroll ); } //trigger show/hide events if( fromPage ) { - if( !$.support.touchOverflow ){ + if( !touchOverflow ){ fromPage.height( "" ); } diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js index ac095809..7b78dbcc 100644 --- a/js/jquery.mobile.support.js +++ b/js/jquery.mobile.support.js @@ -118,9 +118,4 @@ if ( !$.support.boxShadow ) { $( "html" ).addClass( "ui-mobile-nosupport-boxshadow" ); } -// For opting into touch overflow scrolling -if( $.support.touchOverflow ){ - $( "html" ).addClass( "ui-mobile-touch-overflow" ); -} - })( jQuery ); \ No newline at end of file diff --git a/themes/default/jquery.mobile.core.css b/themes/default/jquery.mobile.core.css index 9793b396..7c9d9289 100644 --- a/themes/default/jquery.mobile.core.css +++ b/themes/default/jquery.mobile.core.css @@ -23,7 +23,8 @@ .landscape .ui-page { min-height: 300px; } /* native overflow scrolling */ -.ui-mobile.ui-mobile-touch-overflow .ui-page { +.ui-page.ui-mobile-touch-overflow, +.ui-mobile-touch-overflow.ui-native-fixed .ui-content { overflow: auto; height: 100%; -webkit-overflow-scrolling: touch; @@ -62,6 +63,43 @@ .ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; } .ui-page-fullscreen .ui-content { padding:0; } +/* native fixed headers and footers */ +.ui-mobile-touch-overflow.ui-page.ui-native-fixed, +.ui-mobile-touch-overflow.ui-page.ui-native-fullscreen { + overflow: visible; +} +.ui-mobile-touch-overflow.ui-native-fixed .ui-header, +.ui-mobile-touch-overflow.ui-native-fixed .ui-footer { + position: fixed; + left: 0; + right: 0; + top: 0; + z-index: 200; +} +.ui-mobile-touch-overflow.ui-page.ui-native-fixed .ui-footer { + top: auto; + bottom: 0; +} +.ui-mobile-touch-overflow.ui-native-fixed .ui-content { + padding-top: 2.5em; + padding-bottom: 3em; + top: 0; + bottom: 0; + height: auto; + position: absolute; +} +.ui-mobile-touch-overflow.ui-native-fullscreen .ui-content { + padding-top: 0; + padding-bottom: 0; +} +.ui-mobile-touch-overflow.ui-native-fullscreen .ui-header, +.ui-mobile-touch-overflow.ui-native-fullscreen .ui-footer { + opacity: .9; +} +.ui-native-bars-hidden { + display: none; +} + /* icons sizing */ .ui-icon { width: 18px; height: 18px; } From f49e69ef84667d86ff4935fecd83a5d5aacf3f9d Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 8 Sep 2011 13:26:33 -0400 Subject: [PATCH 11/14] disabled iOS5 improvements by default. Can be enabled by binding to mobileinit and setting $.mobile.touchOverflowEnabled = true; --- js/jquery.mobile.fixHeaderFooter.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/jquery.mobile.fixHeaderFooter.native.js b/js/jquery.mobile.fixHeaderFooter.native.js index b7740d9d..382a7bcf 100644 --- a/js/jquery.mobile.fixHeaderFooter.native.js +++ b/js/jquery.mobile.fixHeaderFooter.native.js @@ -7,7 +7,7 @@ (function( $, undefined ) { -$.mobile.touchOverflowEnabled = true; +$.mobile.touchOverflowEnabled = false; $( document ).bind( "pagecreate", function( event ) { if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){ @@ -48,7 +48,7 @@ $( document ).bind( "pagecreate", function( event ) { .animationComplete(function(){ $(this).not( ".in" ).addClass( "ui-native-bars-hidden" ); }); - } ); + }); } } }); From 82a9a5bb3fb5888d0e99c04de3c7d9fac5295892 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 8 Sep 2011 13:33:26 -0400 Subject: [PATCH 12/14] documented the new touchOverflowEnabled configuration property. --- docs/api/globalconfig.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/api/globalconfig.html b/docs/api/globalconfig.html index 6c3bbab8..88d76243 100755 --- a/docs/api/globalconfig.html +++ b/docs/api/globalconfig.html @@ -105,6 +105,9 @@ $(document).bind("mobileinit", function(){
defaultPageTransition string, default: 'slide'
Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.
+
touchOverflowEnabled boolean, default: false
+
Enable pages to have self-contained native scrolling and fixed toolbars in devices that support the overflow-scrolling: touch; property.
+
defaultDialogTransition string, default: 'pop'
Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions by default.
From 3ba911a6f8a03ebd1e65334e2f1d519042d6cdd6 Mon Sep 17 00:00:00 2001 From: gseguin Date: Wed, 7 Sep 2011 11:58:42 -0700 Subject: [PATCH 13/14] jshint was complaining about .this --- tests/jquery.testHelper.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/jquery.testHelper.js b/tests/jquery.testHelper.js index 684db5e9..e4978bdc 100644 --- a/tests/jquery.testHelper.js +++ b/tests/jquery.testHelper.js @@ -118,7 +118,7 @@ }, decorate: function(opts){ - var thisVal = opts.this || window; + var thisVal = opts.self || window; return function(){ var returnVal; @@ -141,4 +141,4 @@ } } }; -})(jQuery); \ No newline at end of file +})(jQuery); From 6f5a7d12660b74ace379b67f24336cb4c0913edc Mon Sep 17 00:00:00 2001 From: gseguin Date: Wed, 7 Sep 2011 13:28:40 -0700 Subject: [PATCH 14/14] Fix for issue #2404 Collapsible are collapsed by default --- js/jquery.mobile.collapsible.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index 5763ea12..eb1ee9bc 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -10,7 +10,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { options: { expandCueText: " click to expand contents", collapseCueText: " click to collapse contents", - collapsed: false, + collapsed: true, heading: ">:header,>legend", theme: null, iconTheme: "d",