0

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>
Annie
  • 33
  • 6
  • @Omar, I looked at the answer you gave before, do I include the js code to my html file or the js jquery-mobile files. Am a complete beginner so if you could explain it in the simplest way possible (dumb it down for me) that would be great. :) – Annie Sep 17 '14 at 15:22
  • create a separate js file to place your custom js functions and load it after jQM js file. – Omar Sep 17 '14 at 15:24
  • No, that didn't work for me :( – Annie Sep 17 '14 at 16:34
  • copy js in this [fiddle](http://jsfiddle.net/Palestinian/mgpc58zs/) replace `#home` with your page id and `#navpanel` with panel's id. – Omar Sep 17 '14 at 17:02
  • just add this to your CSS file (.ui-panel-display-overlay { z-index: 100; }) – Tasos Sep 17 '14 at 17:09
  • Thanks guys for all your help, but I found another way of doing it and it works well on my code. I just added data-position ="fixed" to my header section and it worked like a charm.
    – Annie Sep 18 '14 at 09:04
  • Add an answer with your solution. – Omar Sep 19 '14 at 08:27

1 Answers1

2

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.

Omar
  • 32,302
  • 9
  • 69
  • 112
Annie
  • 33
  • 6