JQuery - Response Panel

Question

I want to show the panel on my page when the page loads. I got this already with a script.

But when the site loads, the panel shows the whole page → The other side of my page scrolls to the right, so I do not see all the content.

So, I added "class =" ui-responsive-panel "to my wrapper.

Now I have the same problem until I press the button that I linked to my panel. This button hides the panel on the first click, and secondly, it shows my panel, and the right content reduces the width (this is my goal).

What do I need to add that this is already done when the page loads?

thanks

EDIT: My code

<!-- Page --> <div data-role="page" id="page" class="ui-responsive-panel"> <!-- Panel --> <div data-role="panel" id="Panel" data-display="reveal" data-position-fixed="true" data-swipe-close="false" data-dismissible="false" data-theme="none"> Content here </div> <div data-role="header" data-theme="b" data-position="fixed"> <h1>Title</h1> </div> <div data-role="content"> Here my Content which I want to auto scale on page load <!-- Panel shown on page load --> <script>$(document).on('pagebeforeshow', '#Page', function(){ $( "#Panel" ).panel( "open"); });</script> </div> </div> 

Answer 1

You have many options here. Firstly, I suggest a look at twitter bootstrap . They make a lot of styles, so you don't need to.

In addition, you can set a specific percentage width for each div. Just use the width: 'value'% ;.

Another thing you can do is use the @media tag:

 @media (min-width 300 && max-width: 480px) { #panel { width: 96px; } } 

Answer 2

I know this is a little late, but just in case someone is still trying to find the answer to this question. I had the same problem and fixed it as follows:

  $(document).on("pagechange", function (event, data) { $('#Panel').panel("open"); }) 

Now the html code for the panel is as follows:

 <div id="Panel" data-role="panel" data-display="push" data-animate="false" data-dismissible="false" > <!-- /panel content --> </div> 

If data-dismissible = "false" is optional if you want the panel to be visible and data-animate = "false" is optional if you want to get rid of the animation when the page loads.