jQuery-Mobile external Panel always open among pages

Question

I've tried to search around but found no relatable topics I could understand. I'm not very familiar with Javascript or coding in general.

I am using Jquery Mobile 1.4.5 and this is my issue:

I cannot get external panels to work properly. The panel displays just fine on my first page, but when I change page it won't show up as intended. My plan is to have the panels work in the same manner as they do on the Jquery mobile demo page.

Link: Jquery Mobile Demo

Here you can see the panel is always showing no matter what page they are on, I found out they don't use external panels on that site but it should still be possible.

How my site works at the moment:

1. Panel work just fine when loading first page (#page_home)
2. When entering new page (#page_kodi or #page_download) it does not show up automatically as intended.
3. When I enter #page_kodi or #page_download and manually bring it up it stays up as intended
4. This is the odd part: When I go from (with panel open) #page_download to #page_kodi to #page_home (main page) it works.
5. when I go from #page_home to another page it does not work.

Here is my JS code for panels, I'm sure there is a better way to write this, and maybe some of it is not needed.

Javascript:

    <script>
    <!-- Creates the panels & navbars/Tabs -->
    $(document).on("pagecreate", function() {
        $("body > [data-role='panel']").panel();
        $("body > [data-role='panel'] [data-role='listview']").listview();
    });
    $(document).on("pageshow", function() {
        $("body > [data-role='header']").toolbar();
        $("body > [data-role='header'] [data-role='navbar']").navbar();
    });
    </script>

<script>
$(document).on("pagebeforeshow", function( event, data ) {
    $('#leftpanel').panel("open");
})
</script>

<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$(document).on("pagebeforecreate", "#page_home", function () {
  $( "#leftpanel" ).panel({ dismissible: true });
  $( "#leftpanel").panel("close");
});
}
</script>

<script>
$(document).on("pagecreate", "#page_home", function () {
 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
 setTimeout(function(){
    $('#leftpanel').panel("close");
}, 500);
 }
});
</script>

<script>
$(document).on("pagebeforecreate", "#page_home", function () {
  $( "#leftpanel" ).panel({ dismissible: false });
});
</script>

<script>
$(document).on("pagebeforecreate", "#page_download", function () {
  $( ".leftpanel" ).panel( "option", "dismissible", false );
  $('#leftpanel').panel("open");
});
</script>

<script>
$(document).on("pagebeforecreate", "#page_kodi", function () {
  $( "#leftpanel" ).panel( "option", "dismissible", false );
  $('#leftpanel').panel("open");
});
</script>

<script>
/* Left & Right swipe gestures to open panels*/
$(document).on("pagecreate", function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    $(document).on("swipeleft swiperight", function(e) {
        if ($(".ui-page-active").jqmData("panel") !== "open") {
            if (e.type === "swipeleft") {
                $("#rightpanel").panel("open");
            } else if (e.type === "swiperight") {
                $("#leftpanel").panel("open");
            }
        }
    });
    }
});
</script>

I have placed all these in my HTML file.

HTML Panel:

<div style="margin-top: 0px; background-color: #212120;" class="customlist panel-open" data-role="panel" data-position="left" data-dismissible="" data-display="overlay" data-theme="none" id="leftpanel">
    <ul data-role="listview" data-inset="false">
MY CONTENT HERE
</ul>
</div>

data-dismissible="" I have put it this way because that's what works when you set it manually with JS, or so i've read. It did not work if I set it to false or true.

Basically what I'm trying to do here is always have the panel OPEN on bigger screens and closed with option to open it with swipe on smaller screens. This works as of now. The trouble I am having is when changing pages the panel does not act as intended and closes when I am going from my front page to another, but not if I go from another to my front page.

PS: I've also put the panel between two of my pages like this:

page_home

-- panel -- some popup

page_download

page_kodi

Thanks in advance for all the help you can give and sorry for the wall of text.

Answer 1

Assuming you are using a single-page model, here is a simple stub for a JQM project with a Panel which can stay open among different pages. The default behavior is parametrized by overriding the _bindPageEvents function of the mobile.panel widget, so you can dinamcally set a flag for that.

You can set the stayAlwaysOpen flag as you like, by spoofing the useragent string or (maybe better) by checking the viewport width, up to you. You could also check a CSS breakpoint for that purpose.

To keep header navigation and make the panel somewhat more pleasant, i used also the function scalePanelToContent from: jQuery mobile panel between header and footer (credits: Omar ).

 var stayAlwaysOpen = true; $.widget("mobile.panel", $.mobile.panel, { _bindPageEvents: function() { var self = this; this.document // Close the panel if another panel on the page opens .on("panelbeforeopen", function(e) { if (self._open && e.target !== self.element[0]) { self.close(); } }) // On escape, close? might need to have a target check too... .on("keyup.panel", function(e) { if (e.keyCode === 27 && self._open) { self.close(); } }); if (!this._parentPage && this.options.display !== "overlay") { this._on(this.document, { "pageshow": function() { this._openedPage = null; this._getWrapper(); } }); } // Clean up open panels after page hide if(stayAlwaysOpen) return; if (self._parentPage) { this.document.on("pagehide", ":jqmData(role='page')", function() { if (self._open) { self.close( true ); } }); } else { this.document.on("pagebeforehide", function() { if (self._open) { self.close( true ); } }); } } }); function scalePanelToContent() { var screenH = $.mobile.getScreenHeight(); var headerH = $(".ui-header").outerHeight() - 1; var footerH = $(".ui-footer").outerHeight() - 1; var panelH = screenH - headerH - footerH; $(".ui-panel").css({ "top": headerH, "bottom": footerH, "min-height": panelH }); } $(document).ready(function() { $("[data-role='header'], [data-role='footer']").toolbar({ theme: "a", position: "fixed", tapToggle: false }); $("#nav-panel").panel({ theme: "b", display: "overlay", position: "left", positionFixed: true, swipeClose: false, dismissible: false }).enhanceWithin(); $("#nav-panel").on("panelbeforeopen", function(event, ui) { scalePanelToContent(); $(".ui-content").animate({ "margin-left": "17em" }, 300, "swing"); }); $("#nav-panel").on("panelbeforeclose", function(event, ui) { $(".ui-content").removeClass("panel-shrink").animate({ "margin-left": "0" }, 300, "swing", function() { $(this).removeAttr("style"); }); }); scalePanelToContent(); }); $(window).on("resize", function() { scalePanelToContent(); }); $(document).on("pagecontainerbeforeshow", function(e, ui) { var isPanelOpen = $("#nav-panel").hasClass("ui-panel-open"); $(".ui-content").toggleClass("panel-shrink", isPanelOpen); }); 

 .panel-shrink { margin-left: 17em !important; } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> </head> <body> <div data-role="header"> <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a> <h2>Header</h2> </div> <div data-role="footer"> <h2>Footer</h2> </div> <div data-role="page" id="page-1"> <div data-role="content"> <form> <fieldset data-role="controlgroup"> <legend>Vertical:</legend> <input name="checkbox-v-2a" id="checkbox-v-2a" type="checkbox"> <label for="checkbox-v-2a">One</label> <input name="checkbox-v-2b" id="checkbox-v-2b" type="checkbox"> <label for="checkbox-v-2b">Two</label> <input name="checkbox-v-2c" id="checkbox-v-2c" type="checkbox"> <label for="checkbox-v-2c">Three</label> </fieldset> </form> </div> </div> <div data-role="page" id="page-2"> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul> </div> </div> <div data-role="page" id="page-3"> <div data-role="content"> Page 3 </div> </div> <div data-role="panel" id="nav-panel"> <ul data-role="listview"> <li><a href="#page-1">Link #1</a> </li> <li><a href="#page-2">Link #2</a> </li> <li><a href="#page-3">Link #3</a> </li> </ul> </div> </body> </html> 

Just a last hint:

You can use the same stayAlwaysOpen flag inside your swipe events so that the panel will keep the same behavior in mobile devices and in desktop browsers also for smaller window sizes.