CODEWITHSUNDEEP
jqueryjquery-mobilejquery-mobile-panel
Annie
Annie

Reputation: 33

How can I open the jQuery mobile panel between the header and footer only, and not the whole page?

I have a panel that appear on screen, which is great, but I would like for it to appear between the header and footer only and not top to bottom on screen. Sample code below,

<!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.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel"> 
<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">
<h1>Page Footer</h1>
</div> 
</div> 
</body>
</html>

Upvotes: 0

Views: 563

Answers (1)

Annie
Annie

Reputation: 33

I used the js file, provied by Omar

 $(document).on("pagecreate", "#home", function (e) {
     var activePage = this;
     $("#navpanel").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
         });
     });
 });

Then I added the following code to my hearder

<div data-role="header" data-position="fixed">

This stopped the panel from stretching over my header.

Upvotes: 2

Related Questions