1

I have a navigation menu that is a listview inside a collapsible inside a popup. On my page content, I also have regular links open the same page as in the menu. I want some of these links to open in panels. This works fine for the page content, the panels open up ok.

But when you use the link in the navigation menu, the panel opens up under the menu. Is there a way to force the panel to open over the navigation, or to have the navigation close when the panel opens?

Here's what I have:

<!--NAVIGATION -->
<a href="#navigation" data-rel="popup"">Menu</a>
<div data-role="popup" id="navigation">
 <div data-role="collapsible-set">
  <div data-role="collapsible">
   <h2>Category 1</h2>
   <ul data-role="listview">
    <li><a href="#panel1">Open Panel 1</a></li>
   </ul>
  </div><!-- /collapsible -->

  <div data-role="collapsible">
   <h2>Category 2</h2>
   <ul data-role="listview">
    <li><a href="#panel2">Open Panel 2</a></li>
   </ul>
  </div><!-- /collapsible -->
 </div><!-- /collapsible set -->
</div><!-- /popup -->
<!-- /NAVIGATION -->

<!-- CONTENT -->
<ul data-role="listview">
<li><a href="#panel1">Open Panel 1</a></li>
</ul>
<!-- /CONTENT -->

<!-- PANEL -->
<div data-role="panel" id="panel1" data-position="right" data-display="overlay" data-position-fixed="true">
 <p>content</p>
</div><!-- /panel1-->
<!-- /PANEL -->
Gajotres
  • 57,309
  • 16
  • 102
  • 130
Rafael
  • 25
  • 6

1 Answers1

1

It can be done programaticaly with javascript. Remove href from navigation li element. Bind a click event to it that will trigger panel open and popup close state.

Working example: http://jsfiddle.net/Gajotres/2Hv5f/

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">

            <!-- CONTENT -->
            <ul data-role="listview">
            <!--NAVIGATION -->
            <a href="#navigation" data-rel="popup">Menu</a>
            <div data-role="popup" id="navigation">
                <div data-role="collapsible-set">
                    <div data-role="collapsible">
                        <h2>Category 1</h2>
                        <ul data-role="listview">
                            <li><a href="#" id="popup-panel1">Open Panel 1</a></li>
                        </ul>
                    </div><!-- /collapsible -->
                </div><!-- /collapsible set -->
            </div><!-- /popup -->
            <!-- /NAVIGATION -->                
                <li><a href="#panel1">Open Panel 1</a></li>
            </ul>
            <!-- /CONTENT -->

            <!-- PANEL -->
            <div data-role="panel" id="panel1" data-position="left" data-display="overlay" data-position-fixed="true">
                <p>content</p>
            </div><!-- /panel1-->
            <!-- /PANEL -->
        </div>    
    </body>
</html>

Javascript : 

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#popup-panel1', function(){
        $('#panel1').panel('open');
        $('#navigation').popup('close');
    });    
});
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Actually, if I may ask a follow-up... I have multiple pages (#index, #contact, #locations, etc) I'm wondering how to edit $(document).on('pagebeforeshow', '#index', function() to work with all the other hashtags and not only #index – Rafael May 17 '13 at 20:00
  • Thanks, that is something I tried as well, but it only works on the homepage. Once I navigate to another page it doesn't work – Rafael May 17 '13 at 20:18
  • Then try: $(document).on('pagebeforeshow', '[data-role="page"]',function() { – Gajotres May 17 '13 at 20:20
  • No luck. It actually works on real individual pages, but not on the multipage set-up. ie: #index, #contact, #locations are all segments on one page, and then I have other real php pages. That fix works when I'm on the real pages, but not inside a multipage. I just turned everything into real pages for now till I figure it out. Thanks for your help – Rafael May 17 '13 at 20:41