title: Hide header in jQuery Mobile
body: <p>In my jQuery Mobile app (MVC4 template) I need to completely hide the header on a particular page (it has a map on it which I want to fill the screen). In order to do this I believe the header needs the data-fullscreen attribute setting to "true". </p>
  
  <p>I managed to achieve the above to a certain extent by following the advice given in this question:-</p>
  
  <p><a href="https://stackoverflow.com/questions/14732482/how-to-set-header-to-full-screen-mode-in-jquery-mobile">How to set header to full screen mode in jQuery Mobile?</a></p>
  
  <p>However it only works if the header has the data-fullscreen attribute is set to "true" initially, this is not desired because it causes the header to 'jump' when it goes from fullscreen to fixed when loading each page and also because I only want the header fullscreen\hiding on one page, on the rest of the pages the header just needs to remain fixed.</p>
  
  <p>Here is the desired effect (with data-fullscreen set to true in header):-</p>
  
  <p><a href="http://jsfiddle.net/Gajotres/HCcUe/" rel="nofollow noreferrer">http://jsfiddle.net/Gajotres/HCcUe/</a></p>
  
  <p>And here you can see it doesnt work if you dont have data-fullscreen="true"</p>
  
  <p><a href="http://jsfiddle.net/sidd92/QcgMZ/" rel="nofollow noreferrer">http://jsfiddle.net/sidd92/QcgMZ/</a></p>
  
  <p>Here is my own code so far:-</p>
  
  <p><strong>_layout.cshtml</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="Index" data-role="page"&gt;                          
      &lt;div data-role="header" data-theme="b" data-position="fixed" data-fullscreen="true" id="dvHeader"&gt; 
          &lt;div id="logo"&gt;&lt;/div&gt;                                         
      &lt;/div&gt;          
      &lt;div data-role="header" data-theme="a"&gt;
          &lt;a id="btnGlobalBack" data-role="button" data-icon="back" style="display:none;"&gt;Back&lt;/a&gt;
          &lt;h1&gt;@ViewBag.Title&lt;/h1&gt; 
      &lt;/div&gt;  
  
      &lt;div id="mainContent" data-role="content" page_name="test"&gt;                                         
          @RenderBody()  
          @RenderSection("BodyScriptsSection", required: false)           
      &lt;/div&gt;               
      &lt;div data-role="footer" data-position="fixed" data-tap-toggle="false"&gt;
          @RenderSection("Footer")                
      &lt;/div&gt;&lt;!-- /footer --&gt;                                  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>script.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>    $(document).on("click", "#btnEnableFullscreenAndHide", function () {
          $("#dvHeader").attr({ 'data-fullscreen': 'true', 'data-position': 'fixed' })
          .removeAttr('out')
          .addClass('ui-header-fixed')
          .removeAttr('reverse')
          .addClass('ui-header-fullscreen')
          .addClass('slidedown')
          .addClass('out')
          .addClass('reverse');   
      });
  
      $(document).on("click", "#btnBackToFixed", function () {   
          $("#dvHeader").removeAttr('data-fullscreen')
          .removeClass('ui-header-fullscreen')
          .removeClass('ui-header-fixed')
          .removeClass('slidedown')
          .addClass('out')
          .addClass('reverse');  
      });
  </code></pre>