Normally the JQuery Mobile Widget Panel re-positions the header and footer of the page relatively.
Here is how to leave fixed the header and footer of a JQuery Mobile Application and move just the content when displaying a panel.
A solution is to overwrite a method of the panel widget object in a separate js file, like this:
// override open function to fix header and footer
(function( $, undefined ) {
$.mobile.panel.prototype.open = function( immediate ) {
if ( !this._open ) {
var self = this,
o = self.options,
_openPanel = function() {
self._off( self.document , "panelclose" );
self._page().jqmData( "panel", "open" );
if ( $.support.cssTransform3d && !!o.animate && o.display !== "overlay" ) {
self._wrapper.addClass( o.classes.animate );
self._fixedToolbars().addClass( o.classes.animate );
}
if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
( self._wrapper || self.element )
.animationComplete( complete, "transition" );
} else {
setTimeout( complete, 0 );
}
if ( o.theme && o.display !== "overlay" ) {
self._page().parent()
.addClass( o.classes.pageContainer + "-themed " + o.classes.pageContainer + "-" + o.theme );
}
self.element
.removeClass( o.classes.panelClosed )
.addClass( o.classes.panelOpen );
self._positionPanel( true );
self._pageContentOpenClasses = self._getPosDisplayClasses( o.classes.pageContentPrefix );
if ( o.display !== "overlay" ) {
self._page().parent().addClass( o.classes.pageContainer );
self._wrapper.addClass( self._pageContentOpenClasses );
//self._fixedToolbars().addClass( self._pageContentOpenClasses );
}
self._modalOpenClasses = self._getPosDisplayClasses( o.classes.modal ) + " " + o.classes.modalOpen;
if ( self._modal ) {
self._modal
.addClass( self._modalOpenClasses )
.height( Math.max( self._modal.height(), self.document.height() ) );
}
},
complete = function() {
// Bail if the panel was closed before the opening animation has completed
if ( !self._open ) {
return;
}
if ( o.display !== "overlay" ) {
self._wrapper.addClass( o.classes.pageContentPrefix + "-open" );
self._fixedToolbars().addClass( o.classes.pageContentPrefix + "-open" );
}
self._bindFixListener();
self._trigger( "open" );
self._openedPage = self._page();
};
self._trigger( "beforeopen" );
if ( self._page().jqmData( "panel" ) === "open" ) {
self._on( self.document, {
"panelclose": _openPanel
});
} else {
_openPanel();
}
self._open = true;
}
};
})(jQuery);
Actually what you need to do respect to the original jquery mobile code is to comment out the line in red 🙂
