title: JQuery mobile panel
body: <p>I'm fairly new to jquery and I'm wanting to use the panel feature, however my code isn't really working. I copied most of it from: <a href="http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/" rel="nofollow">http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/</a> just to test and the panel is taking over the whole screen and the close button isn't working and I can't figure out what I'm doing wrong. This is my code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="content"&gt;
          &lt;div data-role="page"&gt;
              &lt;div data-theme="a" data-role="header" data-position="fixed"&gt;
                  &lt;h3&gt;
                      Test
                  &lt;/h3&gt;
                  &lt;a href="#menu-panel"class="ui-btn-left" data-icon="bars"&gt;Menu&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-role="panel" data-position="left" data-theme="a" data-position-fixed="true" data-display="push" id="menu-panel"&gt;
              &lt;ul data-role="listview" data-theme="a" class="nav-search"&gt;
                  &lt;li data-icon="delete"&gt;&lt;a href="#" data-rel="close"&gt;Close menu&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Accordion&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;AJAX Navigation&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Autocomplete&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Buttons&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Checkboxes&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Collapsibles&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Controlgroup&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Dialogs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Fixed toolbars&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Flip switch toggle&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Footer toolbar&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Form elements&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Grids&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Header toolbar&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Icons&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Links&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Listviews&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Loader overlay&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Navbar&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Navbar, persistent&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Pages&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;New&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Popup&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Radio buttons&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Select&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Slider, single&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;New&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;New&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;New&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Text inputs &amp; textarea&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel-fixed-page2"&gt;Transitions&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- /panel --&gt;
      &lt;/div&gt;    
  &lt;/body&gt;
  </code></pre>
  
  <p>With script .js and .css calls in the head:</p>
  
  <pre><code>&lt;script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/&gt;
  &lt;link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"/&gt;
  &lt;link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"/&gt;
  </code></pre>
  
  <p>Any help would be appreciated! </p>