jQuery Mobile: Position of external panel / always visible?

Question

Since I do want to use the same panel on every page in a jQuery multipage html file, I'm interested in using the same code for every page.

This should work with external panels. However, I do have a problem with the positioning: As far as I can see, an external panel always opens on the full page height. What I want to have is instead the same behavior as the panel in the jQuery mobile demo page :

• always visible on big screens (eg desktop browser) and,
• when always visible, "inside" the page (eg below the header).

All in all: I wan't to create an external panel with the exact behavior of the (internal) panel on the demo page.

My first thought was to include an external html file on every page, so I can at least only edit this single file to save it everywhere. This looks great at first, but doesn't work at all because then the elements would have the same id (eg using forms in the panel).

Is there a clean solution for this problem?

Answer 1

The exact CSS and HTML from the JQM Demo Page is (see below). The JQM Demo page shows the panel below the header if the browser window is larger than 60em --- 960px and in my demo i set it 40em

External Panels go at end of data role page(s).

Demo expand the window to reveal the panel

https://jsfiddle.net/jag6ose3/

Html

<div data-role="page">
    <div data-role="header">
            <h1>External panels</h1>
    <a href="#" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-bars opanel">Opanel</a>

    </div>
    <div role="main" class="ui-content my-content">
            <h1>Content Area</h1>

    </div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
    <br>
    <ul data-role="listview">
        <li>The Panel</li>
        <li>option A</li>
        <li>option B</li>
        <li>option C</li>
        <li>option D</li>
    </ul>
</div>

Css

@media (min-width: 40em) {
    #my-panel {
        visibility: visible;
        position: relative;
        left: 0;
        clip: initial;
        float: left;
        width: 25%;
        background: none;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        transition: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        transform: none !important;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .my-content {
        width: 67%;
        padding-top: 2em;
        padding-left: 5%;
        padding-right: 3%;
        float: right;
    }
.opanel {
 visibility:hidden;   
}
}

Code

$(function () {
    $("body>[data-role='panel']").panel(); //initialize the external panel

    $(document).on("click", ".opanel", function () {
        $("#my-panel").panel("open")
    });
});

Answer 2

There is a more complex example. Width of panel is 300px and window is less then 900px, icon .opanel will be displayed.

 <script id="panel-init"> function resizeP() { var cw = $("body").prop("clientWidth"); var padding2x = 32; if (cw > 900) { $(".my-content").width(cw - 300 - padding2x); } else $(".my-content").width(cw - padding2x); } $(function () { $("body>[data-role='panel']").panel(); //initialize the external panel $(document).on("click", ".opanel", function () { $("#my-panel").panel("open"); }); }); $(document).ready(function () { resizeP(); }); $(window).resize(function () { resizeP(); }); </script> 

 <style> @@media screen and (min-width: 900px) { #my-panel { visibility: visible; position: relative; left: 0; clip: initial; float: left; width: 300px; background: none; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; -webkit-transform: none !important; -moz-transform: none !important; transform: none !important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .my-content { width: 300px; /*padding-top: 2em; padding-left: 5%; padding-right: 3%;*/ float: right; } .opanel { visibility: hidden; } } .ui-content { padding: 16px; } .countBubl { float: left; margin-top: -30px; margin-left: 35px; background: #ed1d24; color: #fff; padding: 2px; } .ui-li-static.ui-collapsible > .ui-collapsible-heading { margin: 0; } .ui-li-static.ui-collapsible { padding: 0; } .ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn { border-top-width: 0; } .ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn, .ui-li-static.ui-collapsible > .ui-collapsible-content { border-bottom-width: 0; } </style> 

 <div data-role="page"> <div data-role="header"> <h1>External panels</h1> <a href="#" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-bars opanel">Opanel</a> </div> <div role="main" class="ui-content my-content"> <h1>Content Area</h1> <button>dds</button> <p>A paragraph with a tooltip. <a href="#popupInfo" data-rel="popup" data-transition="pop" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Learn more">Learn more</a></p> <div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;"> <p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p> </div> <ul data-role="listview" data-inset="true" data-divider-theme="a"> <li data-role="list-divider">Mail</li> <li><a href="#">Inbox</a></li> <li><a href="#">Outbox</a></li> <li data-role="list-divider">Contacts</li> <li><a href="#">Friends</a></li> <li><a href="#">Work</a></li> </ul> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="grid">Summary <span class="ui-li-count ui-btn-corner-all countBubl">12</span></a></li> <li><a href="#" data-icon="star" id="btn2" class="ui-btn-active">Favs</a></li> <li><a href="index2.html" data-icon="gear">Setup</a></li> </ul> </div><!-- /navbar --> </div> </div> <div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a"> <div data-role="collapsibleset" data-theme="a" data-inset="false"> <div data-role="collapsible"> <h2>Mailbox</h2> <ul data-role="listview"> <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li> <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li> <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li> <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li> <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li> </ul> </div> <div data-role="collapsible"> <h2>Calendar</h2> <ul data-role="listview" data-theme="a" data-divider-theme="b"> <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li> <li> <a href="index.html"> <h3>Stephen Weber</h3> <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p> <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> <p class="ui-li-aside"><strong>6:24</strong>PM</p> </a> </li> <li> <a href="index.html"> <h3>jQuery Team</h3> <p><strong>Boston Conference Planning</strong></p> <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p> <p class="ui-li-aside"><strong>9:18</strong>AM</p> </a> </li> <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li> <li> <a href="index.html"> <h3>Avery Walker</h3> <p><strong>Re: Dinner Tonight</strong></p> <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p> <p class="ui-li-aside"><strong>4:48</strong>PM</p> </a> </li> <li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li> <li> <a href="index.html"> <h3>Amazon.com</h3> <p><strong>4-for-3 Books for Kids</strong></p> <p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p> <p class="ui-li-aside"><strong>12:47</strong>PM</p> </a> </li> </ul> </div> <div data-role="collapsible"> <h2>Contacts</h2> <ul data-role="listview" data-autodividers="true" data-theme="a" data-divider-theme="b"> <li><a href="index.html">Adam Kinkaid</a></li> <li><a href="index.html">Alex Wickerham</a></li> <li><a href="index.html">Avery Johnson</a></li> <li><a href="index.html">Bob Cabot</a></li> <li><a href="index.html">Caleb Booth</a></li> <li><a href="index.html">Christopher Adams</a></li> <li><a href="index.html">Culver James</a></li> </ul> </div> </div> @*<br> <ul data-role="listview"> <li>The Panel</li> <li>option A</li> <li>option B</li> <li>option C</li> <li>option D</li> </ul>*@ </div> </div>