jQuery - Painel responsivo - jquery, html, jquery-mobile, painel

Eu quero revelar um painel na minha página no carregamento da página. Eu já peguei isso com um script.

Mas quando o site carrega, o painel revela a página inteira -> O outro lado da minha página está rolando para a direita para que eu não possa ver todo o conteúdo.

Então eu adicionei "class =" ui-responsive-panel "" no meu wrapper de página.

Agora tenho o mesmo problema até clicar em umbotão, que eu ligado ao meu painel. Este botão esconde o painel no primeiro clique e no segundo ele revela o meu painel e o conteúdo do lado direito está reduzindo sua largura (este é o meu objetivo).

O que devo acrescentar, que isso já está no carregamento da página?

obrigado

EDITAR: Meu código

<!-- 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>

Respostas:

0 para resposta № 1

Você tem muitas opções aqui. Primeiro, sugiro investigar bootstrap twitter. Eles fazem muito do estilo para que você não precise.

Além disso, você pode definir uma certa porcentagem de largura em cada div. Basta usar a largura: "valor"%;

Outra coisa que você pode fazer é usar a tag @media:

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

---

0 para resposta № 2

Eu sei que isso é um pouco tarde, mas apenas no caso de alguém ainda estar tentando encontrar uma resposta para essa pergunta. Eu tive o mesmo problema e consertei da seguinte maneira:

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

Agora o código html para o painel é o seguinte:

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

Onde data-dismissible = "false" é opcional no caso de você querer manter o painel visível e data-animate = "false" é opcional caso você queira se livrar da animação no carregamento da página.

---