In Jquery mobile, Header and footers are always hiding, when clicking inside the page?

I need, header and footer always fixed position.

I don't want like the below url page. What will i do?. Help me........ http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fullscreen.html

(In the abo开发者_如何学运维ve url, if u clicked inside the page. The header and footer will hide). I don't want like this

If anyone still finds this question and realises the above no longer works, like I did, the correct way to do it (which is correct today, 23/May/2012) is now:

<div data-role="footer" data-position="fixed" data-tap-toggle="false">

Use data-tap-toggle="false" AND data-hide-during-focus="".

The second one will prevent fixed toolbars from hiding when you click an input.

I managed to do it using a fixed footer:

<div data-role="footer" data-position="fixed"> 
    <div data-role="navbar"> 
        <ul> 
            <li></li> 
            <li></li> 
            <li></li> 
        </ul> 
    </div> 
</div>

and some javascript:

<script type="text/javascript">
    $('#containerPage').live('pagecreate', function (event) {

        $.fixedToolbars.setTouchToggleEnabled(false);

    });
</script>

where #containerPage is my main page:

<div data-role="page" id="containerPage" data-fullscreen="true">
..
</div>

I've tried and tested this solution with jQuery Mobile v1.0rc1. downloaded October, 13th 2011

data-tap-toggle="false" saved me the same headache!

It's a good feature. I'm surprised I missed it in the docs.

data-tap-toggle="false" works ok with jQueryMobile 1.1.0 and PhoneGap 2.2.0

I realize this question is dated, however it didn't help me 100%. Below is the solution I came to after some refined googling, decided to post it here as this was my first result.

My problem was that the header and footer would hide when tapping an input, regardless of whether the default behaviour was used. I was using the amazing DateBox.

Manually updating the DOM header/footer with data-tap-toggle='false' didn't do anything, but this would have saved me some time:

$("[data-role=header]").fixedtoolbar({ tapToggleBlacklist: "input[data-role=datebox]" });
$("[data-role=footer]").fixedtoolbar({ tapToggleBlacklist: "input[data-role=datebox]" });

For whatever reason, disabling tap toggles this way solved my issue as well as showing me a short-hand for disabling it across a large number of pages.

data-hide-during-focus="" is only for the input type which need focus,if you click anywhere in the page and the problem happen then you need to use data-tap-toggle="false". put this only in the fixed position div

<div data-role="footer" data-position="fixed" 
   data-tap-toggle="false" data-hide-during-focus="" data-theme="b"></div>

I'm using data-hide-during-focus="", It's working now!