From 699001a3c625e2df41ba25c1a2d653d4eef49da8 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 25 Jan 2012 18:26:04 +0700 Subject: [PATCH] Added an experimental "updatePagePadding" method, which allows developers to adjust the page element's padding to accommodate a taller toolbar, so there is no overlap. Addresses Issue #3484 Caveats: - This method must be called when the toolbar is visible, meaning you'll see a visible jump when a page is shown. For this reason, I'm hesitant to recommend this feature. It would be a lot smoother to set the page padding in a custom CSS file to make up for whatever EM height your toolbars happen to be. - Height is set in Pixels, meaning changes in font size could render it inaccurate. If we want to set height in ems, we'll need to add an em conversion utility function to jQM. - To ensure it works properly, this method will need to be called on page show, and at any time a content reflow might occur: resize, orientationchange, zoom? This method is not currently called automatically. It can be called like this: $(".ui-header-fixed").fixedtoolbar( "updatePagePadding" ); --- js/jquery.mobile.fixedToolbar.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/js/jquery.mobile.fixedToolbar.js b/js/jquery.mobile.fixedToolbar.js index a9b8c50d..dbf9920d 100644 --- a/js/jquery.mobile.fixedToolbar.js +++ b/js/jquery.mobile.fixedToolbar.js @@ -129,7 +129,18 @@ define( [ "jquery", "jquery.mobile.widget", "jquery.mobile.core", "jquery.mobile }); }, - _visible: false, + _visible: false, + + // This will set the content element's top or bottom padding equal to the toolbar's height + updatePagePadding: function() { + var $el = this.element, + header = $el.is( ".ui-header" ); + + // This behavior only applies to "fixed", not "fullscreen" + if( this.options.fullscreen ){ return; } + + $el.closest( ".ui-page" ).css( "padding-" + ( header ? "top" : "bottom" ), $el.height() ); + }, show: function(){ var hideClass = "ui-fixed-hidden",