html5 - Hide header in jQuery Mobile -

html5 - Hide header in jQuery Mobile -

in jquery mobile app (mvc4 template) need hide header on particular page (it has map on want fill screen). in order believe header needs data-fullscreen attribute setting "true".

i managed accomplish above extent next advice given in question:-

how set header total screen mode in jquery mobile?

however works if header has data-fullscreen attribute set "true" initially, not desired because causes header 'jump' when goes fullscreen fixed when loading each page , because want header fullscreen\hiding on 1 page, on rest of pages header needs remain fixed.

here desired effect (with data-fullscreen set true in header):-

http://jsfiddle.net/gajotres/hccue/

and here can see doesnt work if dont have data-fullscreen="true"

http://jsfiddle.net/sidd92/qcgmz/

here own code far:-

_layout.cshtml

class="lang-html prettyprint-override"><div id="index" data-role="page"> <div data-role="header" data-theme="b" data-position="fixed" data-fullscreen="true" id="dvheader"> <div id="logo"></div> </div> <div data-role="header" data-theme="a"> <a id="btnglobalback" data-role="button" data-icon="back" style="display:none;">back</a> <h1>@viewbag.title</h1> </div> <div id="maincontent" data-role="content" page_name="test"> @renderbody() @rendersection("bodyscriptssection", required: false) </div> <div data-role="footer" data-position="fixed" data-tap-toggle="false"> @rendersection("footer") </div><!-- /footer --> </div>

script.js

class="lang-js prettyprint-override"> $(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'); });

this code seems work fine. i've tested in chrome mind you.

<div data-role="page" id="home"> <div data-role="header" data-fullscreen="true"> </div><!-- /header --> <div data-role="content" class="infobox"> <p>i'm first in source order i'm shown page.</p> <p>view internal page called <a href="#bar">bar</a></p> </div><!-- /content --> </div><!-- /page -->

so seek removing fixed attribute on particular page , create sure data-role="header" div empty.

jquery html5 jquery-mobile asp.net-mvc-4