0

I have a panel on my page that works the way I want it to work, just need to know before I continue using panels is it possible to 1.Have multi-panels open at the same time? (I want to open two or more panels and each time, when a new panel is opened, everything else is de-activated and the only active panel is the one open)

if not, can anyone recommend a good solution to the above problem.

  1. How can I de-activate the page when the panel is open

    <!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.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanelDefault"> 
<h2>Panel Header</h2>
<p>You can close the panel b:</p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a     ui-icon-delete ui-btn-icon-left">Close panel</a>
</div> 
<div data-role="panel" id="myPanelFixed" data-position-fixed="true"> 
<h2>Panel Header</h2>
<p>You can close the panel by clicking outside the panel, pressing the Esc key, by swiping, or by clicking the button below:</p>

    Close panel

    Page Header

    Open Panel

    Page Footer

Annie
  • 33
  • 6
  • "I have a panel on my page" Help us to help you: please share your relevant code. – Mooseman Sep 27 '14 at 17:26
  • I think it wont be that easy to do that with JQM panels although i remember seeing a demo on SO with multiple panels on one side opening one after the other upon click but i don't remember the link. You can also make your own using slide out boxes -- example -- http://stackoverflow.com/questions/26061191/jquery-mobile-panel-slide-from-top-instead-from-right-and-left/26068437#26068437 -- tutorial -- http://tympanus.net/codrops/2009/12/03/css-and-jquery-tutorial-overlay-with-slide-out-box/ – Tasos Sep 27 '14 at 19:22

1 Answers1

2

From the comment i left above, i created a demo for you to open 2 panels at the same time. I dont see why not you cant add as many as you want providing you set each panels position on the screen so they wont overlap. As for disabling them again that shouldn't be hard.

Demo enlarge the window of the demo a bit

http://jsfiddle.net/0mfgquv6/

Jquery

$('#box').animate({'left':'-100%'},0) 
$('#box2').animate({'left':'-100%'},0) 

$(function() {

    $('#openpanel').click(function(){

        $('#box').animate({'left':'0'},500);
        $('#box2').animate({'left':'60%'},500);

        });

    $('#close').click(function(){

        $('#box').animate({'left':'-100%'},500) 

    });

     $('#close2').click(function(){

        $('#box2').animate({'left':'-100%'},500)  
    });

});
Tasos
  • 5,321
  • 1
  • 15
  • 26
  • Oh my goodness, thank you so much for this, your a life saver. :) – Annie Sep 27 '14 at 19:59
  • I followed your example to the last detail, I didnt edit anything but for some reason am having a few issues when I try to close the the panels individually. My panel is positioned right, am not sure if that makes a difference. Here is my code [link](http://jsfiddle.net/Annie_Bunny/ur4cs7js/) – Annie Oct 01 '14 at 15:40
  • Your code is a bit different than my demo. your wrapped (box) inside (
    ). you dont need that as we are not using the JQM panels. we do our own panels. so delete that. and make sure your demos include the header and buttons to click to open the panel.
     – Tasos Oct 01 '14 at 16:55
  • Thank you so much for all your help, I really appreciate it. But, is there a way I can open your custom panel outside my JQM panel? Because am looking to have three panels open on the screen. I want to open the JQM(if possible), then click something in there that can open the second panel, click something in there and open the third panel. My jQM opens from a collapsed-menu. – Annie Oct 02 '14 at 09:32
  • 1
    No point to use jqm panel Annie. just add a click function to open the other 2 panels on each panel. p.s i taken out the animate to (-100) for the boxes at the beginning of the code we don't need them, they can go directly into the boxes css - http://jsfiddle.net/1yo43Lgf/ – Tasos Oct 02 '14 at 12:36
  • Thank you so much, I think your right, am going use your panels, they work so much better. Just have a final question, how can I make the panels come below the header, that way they are not overlaying ontop of the header(if possible). Thank you so much for all your input, you've been very, very helpful :) – Annie Oct 03 '14 at 11:58
  • 1
    You see in the css for each box has (top:0) that's the potion of the box at the top and zero pixels so change to (top:42px) and it comes down 42 pixels which is the height of the header. I made the box height to (height:80%) just incase you want it to go above the footer too, so if not change it to (90%) cause we sacrificed some pixels from the top and (100%) will go over the bottom. glad you liked my solution and using it, for the moment with this version of JQM you wont find a better one out there -- demo http://jsfiddle.net/6oz9LL5o/ – Tasos Oct 03 '14 at 13:36
  • you are heaven sent. Thank you so much for all your help. – Annie Oct 03 '14 at 15:20