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

Question

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 above url, if u clicked inside the page. The header and footer will hide). I don't want like this

score 86 · Accepted Answer · answered May 23 '12 at 02:42

86

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

answered May 23 '12 at 02:42

ahren

16,803
5
50
70

2

Works like a charm and the app seems more "buggy less" with no flickering, thanks! – Anders Aug 29 '12 at 06:09
2

maybe it should be the default – Benjamin Mar 28 '13 at 13:44
Worked great. Toggling a checkbox was hiding header/footer, this worked like a charm. Also seemed to cancel out the click delay as well. – Gary Feb 28 '14 at 01:29
funny thing this is included in the 1.2 documentation but completely omitted in the 1.4.5 demos documentation. jQuery Mobile documentation really needs a rewrite, at least for latest version. Thanks so much, you saved my day – Juan Carlos Alpizar Chinchilla Nov 06 '15 at 21:42

score 16 · Answer 2 · answered Jan 03 '14 at 21:58

16

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

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

answered Jan 03 '14 at 21:58

fjsj

10,995
11
41
57

4

Works perfectly for me. Other solutions have failed. Thx – sjosen Jan 17 '15 at 11:21

score 5 · Answer 3 · edited Dec 07 '12 at 03:06

5

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

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

edited Dec 07 '12 at 03:06

karthikr

97,368
26
197
188

answered Dec 07 '12 at 02:45

Foo JH

51
1
1

1

that's the same answer as [this one](http://stackoverflow.com/a/10712780/1545993) ...??? – Taifun Dec 07 '12 at 22:00

LeftyX · Answer 4 · 2012-07-06T17:21:01.363

5

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

edited Jul 06 '12 at 17:21

answered Aug 03 '11 at 11:16

LeftyX

35,328
21
132
193

thanks LeftyX... I commented "$.fixedToolbars.toggle(stateBefore);" statement in jquery.mobile-1.0a4.1.min.js. Its also working... But your answers is safe for me. thanks – sadeesh kumar Aug 03 '11 at 12:17

score 1 · Answer 5 · answered Jan 05 '13 at 12:42

1

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

answered Jan 05 '13 at 12:42

Stancho Stanchev

889
7
3

score 1 · Answer 6 · answered May 20 '13 at 16:05

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.

You could try `data-hide-during-focus=""`. See: http://api.jquerymobile.com/toolbar/#option-hideDuringFocus — fjsj, Jan 03 '14 at 21:56

score 0 · Answer 7 · edited Jun 24 '17 at 04:51

0

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>

edited Jun 24 '17 at 04:51

msd

591
7
23

answered Mar 20 '17 at 18:58

M'hammad M'ssabeh

13
7

score -1 · Answer 8 · edited Dec 16 '14 at 22:08

-1

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

edited Dec 16 '14 at 22:08

Mangesh

3,987
2
31
52

answered Dec 16 '14 at 21:31

Tripex

41
2

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

8 Answers8

Linked