JQuery Mobile Fixed Toolbar and Footer Bar disappears?

Question

I am using JQuery Mobile version 4.1a and using:

data-position="fixed"

on both header and footer.

When I scroll the content it disappears and then appears again.

Is there any way to make it stay in it's position and not disappear everytime I scroll the page?

Thanks

The footer disappearing is by design (note: arguably not /good/ design), it happens when you tap / click the page content. When looking to solve this issue for my application I came across a variety of forum topics with people struggling to disable the functionality. I still haven't got around to fixing it. I'm probably going to migrate my web app to AppML (based on jQTouch), it's just so much more mature. — Steve, Apr 23 '11 at 10:20
Thanks for the info. I hope there's another solution for this as I don't real want to have to migrate the whole project just to find out that there's a fix round the corner. Also, the project is almost finished :o/ — Satch3000, Apr 23 '11 at 10:29
Obviously, I'm migrating for more reasons than just the footer thing (it's just much closer to the look and feel of native apps and has better cross-device compatibility). Just thought I'd give you my two-pence :) hopefully there's a simple fix for your problem! — Steve, Apr 23 '11 at 10:32
No idea, haven't researched that deep; you'd be wanting to assess whether jQTouch has one, AppML simply wraps that. — Steve, Apr 23 '11 at 10:53
Found a solution..I have tested it and it works great and it's the same js the AppML use. — Satch3000, Apr 23 '11 at 10:55
JQM is still a bit buggy regarding the fixed header feature, hope it will soon be fixed. See issue on github: https://github.com/jquery/jquery-mobile/issues/2596 — Mathias Conradt, Oct 04 '11 at 08:59

score 113 · Answer 1 · edited Apr 17 '15 at 20:35

113

Add data-tap-toggle="false" to the element

or

Add this to Javascript

$("[data-role=header]").toolbar({ tapToggle: false });

Older versions of jQuery use .fixedtoolbar().

jQuery Mobile Docs - Events

edited Apr 17 '15 at 20:35

anon

4,578
3
35
54

answered Mar 23 '12 at 06:53

tarkeshwar

4,105
4
29
35

How do you do the opposite of this? I want to use `data-position="fixed"` because it sticks the footer to the bottom when there is not enough content, but I don't want it floating by default. Is there a way to toggle the hide automatically on page show and keep it from coming back? – jocull Feb 03 '13 at 22:25
1

After some digging through the source I came up with `data-visible-on-page-show="false"` to keep it from popping up by default but still staying at the bottom. – jocull Feb 04 '13 at 04:11

Kosh · Answer 2 · 2013-12-09T07:02:26.257

4

<div data-role="footer" data-tap-toggle="false"
     data-theme="c" id="footer" data-position="bottom" >
    <h4 align="center" >copyright 2012 @KoshWTF</h4>
    <p>&nbsp;</p>
</div>

P.S you can do that for the header as well if you got any problems with it as well. cheers

edited Dec 09 '13 at 07:02

answered Nov 16 '12 at 04:51

Kosh

6,140
3
36
67

Adding data-position="bottom" fixed it for me too ! – Alain Zelink Jun 23 '13 at 10:22

i8abug · Answer 3 · 2011-05-08T14:34:54.523

I had problems with jquery mobile iscroll in my project. Perhaps some of the libraries I was using were interfering with each other (I am using knockout and jquery.templates along with a bunch of other things). A solution that worked for me was the jquery mobile scrollview. Demos can be viewed here.

http://jquerymobile.com/test/experiments/scrollview/

And the code is here

https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/

you need to include

jquery.easing.1.3.js
jquery.mobile.scrollview.js
jquery.mobile.scrollview.css
scrollview.js

I've used this recently on a jquery mobile project and it works really well on iphone 3gs. On my old android HTC magi, it doesn't work that well but none of jquery mobile works well on that device. Note that the scrollview is under experiments and has not been added to the main jquery mobile project.

If you have no luck with iScroll or jquery mobile scrollview, the wink toolkit is another option.

http://www.winktoolkit.org/tutorials/119/

Like iScroll, I was not able to get this to work with my particular project but I don't think I really tried that hard.

Pretty jittery on my Nexus One. But I still like it a lot better than the bizarre built-in JQM fixed toolbars. Thanks. — Eli, Jun 07 '11 at 14:10
I'm actually in the process of switching from jqm to sencha touch. Jquery mobile is much more intuitive in terms of development but the performance just isn't there yet. It might be a year until they have a responsive interface on android phones. Even on iphone, there is a slight delay compared to sencha. The sencha scroll on HTC sense phones doesn't work but they are supposedly fixing that in the next release which is more than I have heard from jqm. The switch seems pretty easy for me but my app is small. — i8abug, Jun 08 '11 at 16:26

score 3 · Answer 4 · answered Jan 11 '12 at 14:16

3

        $(document).bind("mobileinit", function() {
             $.support.touchOverflow = true;

              $.mobile.touchOverflowEnabled = true;
              $.mobile.fixedToolbars.setTouchToggleEnabled(false);

        });

This works. Tested in Android 2.3

answered Jan 11 '12 at 14:16

nish1013

3,658
8
33
46

for me it works in Chrome and IE9, but it doesn't work in Android 2.3. The header and footer are fixed but I cannot scroll the page (on desktop browser I can do this with the scroller on the right of the browser), have you done anything else beside this? – axl g Feb 10 '12 at 14:18

score 2 · Answer 5 · answered Nov 18 '12 at 07:41

add to your footer class="FixedFooter" and make sure you remove data-position="fixed" from your footer.

add this to your <head>

<style type="text/css">
    .fixedFooter {
position: fixed !important;
left: 0px !important;
right: 0px !important;
bottom: 0px !important;
z-index: 999 !important;
}

cheers.

score 2 · Answer 6 · answered Jul 19 '11 at 11:41

2

I wanted to add a comment to Satch3000's answer, but I didn't have the option of doing that - not sure why. I tried https://github.com/yappo/javascript-jquery.mobile.iscroll, but unfortunately it doesn't work with the latest jquery mobile libs (http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js)

answered Jul 19 '11 at 11:41

user418775

698
1
12
20

Not working in the Beta version? Hmm interesting...Thanks for the info and I'll test it asap. – Satch3000 Jul 19 '11 at 20:03

score 1 · Answer 7 · answered Jul 04 '13 at 08:50

1

It's very simple.

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

It works for me.

answered Jul 04 '13 at 08:50

Kalai Selvan Ravi

2,846
2
16
28

score 1 · Answer 8 · answered Aug 12 '11 at 11:45

$.mobile.fixedToolbars.setTouchToggleEnabled(false) didn't work for me but editing the javascript-jquery.mobile.iscroll file as follows seems to solve the problem with the iscroll solution proposed by Satch3000 and queried by user418775.

changing the line (99) ...

if ($.mobile.activePage.data("iscroll") == "enable") {

to...

if (($.mobile.activePage) && ($.mobile.activePage.data("iscroll") == "enable")) {

score 1 · Answer 9 · answered Feb 29 '12 at 10:48

I'm french Sorry for my english;

I fix this probleme with this code but it's not perfect (must be adapted to your situation):

$("body").live('scrollstart', function (event, ui) {
    if ($(".divDel").length == 0) {
        //prevents the offset
        var taill = $("[data-role=header]").height();
        $("[data-role=header]").after("<div class='divDel' style='height:" + taill + "px;'></div>");
        $("[data-position=fixed]").css("display", "none");
    }
}).live('vmouseup scrollstop', function (event, ui) {
    $(".divDel").remove();
    $("[data-position=fixed]").css("display", "block");
});
$.mobile.fixedToolbars.setTouchToggleEnabled(false);

score 1 · Answer 10 · edited Mar 11 '12 at 13:10

This is what has worked for me:

Within the function ResizePageContentHeight() add an extra line:

$page.children('.ui-footer').css('position','fixed');

right before:

$content.height(wh - (hh + fh) - (pt + pb))

Full code: (Add this in your jquery.scrollview.js at the bottom)

function ResizePageContentHeight(page) {
   var $page = $.mobile.activePage,
    $content = $page.children( ".ui-content" ),
    hh = $page.children( ".ui-header" ).outerHeight() || 0,
    fh = $page.children( ".ui-footer" ).outerHeight() || 0,
    pt = parseFloat($content.css( "padding-top" )),
    pb = parseFloat($content.css( "padding-bottom" )),
    wh = window.innerHeight;

    $page.children('.ui-footer').css('position','fixed');

    $content.height(wh - (hh + fh) - (pt + pb));

}

$( ":jqmData(role='page')" ).live( "pageshow", function(event) {
    var $page = $( this );

    $page.find( ".ui-content" ).attr( "data-" + $.mobile.ns + "scroll", "y" );
    $page.find( ":jqmData(scroll):not(.ui-scrollview-clip)" ).each(function () {
      var $this = $( this );
      if ( $this.hasClass( "ui-scrolllistview" ) ) {
      $this.scrolllistview();
      } else {
      var st = $this.jqmData( "scroll" ) + "",
      paging = st && st.search(/^[xy]p$/) != -1,
      dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null,
      opts = {
      direction: dir || undefined,
      paging: paging || undefined,
      scrollMethod: $this.jqmData("scroll-method") || undefined
      };
      $this.scrollview( opts );
      }
      });
      ResizePageContentHeight( event.target );
      });
      $( window ).bind( "orientationchange", function( event ) {
      ResizePageContentHeight( $( ".ui-page" ) );
      });

score 0 · Answer 11 · answered May 25 '13 at 10:57

In case you've tried everything and you're still struggling trying to fix this issue (like I was), try to update your jQuery mobile version. In v1.3.1 data-position="fixed" works like it should out of the box. I saw this suggestion nowhere and it's the first thing to check before trying any code so I thought I'd mention it.

score 0 · Answer 12 · answered Sep 18 '14 at 22:52

I was having the same issue, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

#element {
    position: fixed;
    ...
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

score 0 · Answer 13 · answered Feb 17 '16 at 12:05

On JQM 1.3.2 here is my solution

Add data-tap-toggle="false" to the fixed header/footer
Add the CSS below to override the JQM CSS

.ui-header-fixed.ui-fixed-hidden,
.ui-footer-fixed.ui-fixed-hidden{
 position: fixed !important;
}

header.ui-panel-animate {
 -webkit-transition: none !important;
}

header.slidedown.out.reverse {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

header.slidedown.in.reverse {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

header.slidedown.out {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

header.slidedown.in {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

header.slideup.out.reverse {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

header.slideup.in.reverse {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

header.slideup.out {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

header.slideup.in {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

footer.ui-panel-animate {
 -webkit-transition: none !important;
}

footer.slidedown.out.reverse {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

footer.slidedown.in.reverse {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

footer.slidedown.out {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

footer.slidedown.in {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

footer.slideup.out.reverse {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

footer.slideup.in.reverse {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

footer.slideup.out {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

footer.slideup.in {
 -webkit-transform: none !important;
 -webkit-animation-name: none !important;
 -webkit-animation-duration: 0ms !important;
 transform: none !important;
 animation-name: none !important;
 animation-duration: 0ms !important;
}

score -2 · Answer 14 · answered Aug 09 '11 at 10:57

-2

$.mobile.fixedToolbars.setTouchToggleEnabled(false);

This will stop the toolbars from hiding when you click/touch the page.

answered Aug 09 '11 at 10:57

comonuirons

32
2

Doesn't work for me. Added it to the live('pageinit') section, but the header still disappears when scrolling. – Mathias Conradt Oct 04 '11 at 08:58
This did not work for me either. It does prevent a toolbar from disappearing when the device is touched, but not when scrolled. – adstro Feb 27 '12 at 02:18

JQuery Mobile Fixed Toolbar and Footer Bar disappears?

14 Answers14

Linked