Sometimes you will need to show jQuery Mobile panel between the page header and footer, but how can we do that? Before we can do that we will need to calculate a correct height of the viewport, header and footer. The subtracting height of both toolbars from viewport’s height will give you the height of the space between both toolbars. In the end, we need to push the panel down by overriding top style of the panel.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Code

 
You will find a code and a working example below. Because plnkr.co is sometimes unavailable, you can copy attached code.
 
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div data-role="page" id="index">
    <div data-role="panel" id="myPanel" data-display="overlay">
      <h2>Panel Header</h2>
      <p>You can close the panel by clicking outside the panel, pressing the Esc key or by swiping.</p>
    </div>
    <div data-role="header">
      <h1>Page Header</h1>
    </div>
    <div data-role="main" class="ui-content">
      <p>Click on the button below to open the Panel.</p>
      <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>
    </div>
    <div data-role="footer" data-position="fixed">
      <h1>Page Footer</h1>
    </div>
  </div>
</body>

</html>
 
 $(document).on("pagecreate", "#index", function(e) {
   var activePage = this;
   $("#myPanel").one("panelbeforeopen", function() {
     var screen = $.mobile.getScreenHeight(),
       header = $(".ui-header", activePage).hasClass("ui-header-fixed") ? $(".ui-header", activePage).outerHeight() - 1 : $(".ui-header", activePage).outerHeight(),
       footer = $(".ui-footer", activePage).hasClass("ui-footer-fixed") ? $(".ui-footer", activePage).outerHeight() - 1 : $(".ui-footer", activePage).outerHeight(),
       panelheight = screen - header - footer;
     $('.ui-panel').css({
       'top': header,
       'min-height': panelheight
     });
   });
 });
 
As you can see, we are doing this task during the pagecreate event, but we can use any other event. If your application is using any 3rd party widget that can cause page to change header and footer height it is advisable to replace pagecreate with pageshow. Because pageshow will trigger only when everything is loaded/enhanced into the DOM it can be successfully used for correct header/content/footer height calculations.
 
Next thing we need to do is trigger an action before panel is opened for the first time. It can be done via panel panelbeforeopen event. We will use this event to calculate available panel height dividing the viewport height with header and footer height.
 
Finally, we will manually set panel min-height plus panel top position. Min-height will be viewport height minus header height minus footer height. Panel top position value is equal to header height.
 

Working example

 
Working Plunker example can be found here:
 
Demo
 
Embedded example:
 
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • Ibrahim Samad

    Your tutorials are clear and straight forward. thanks very much.