JQuery Mobile Fixed Toolbar and Footer Bar disappears?

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

jQuery mobile fixed footer not hiding

Check this jsfiddle The footer is set with data-position=fixed but tapping the screen will not hide the footer element as shown here in the jquery mobile fixed toolbars example. Anyone knows why? Th

Why is jQuery Mobile fixed toolbar not fixed in Mobile Safari?

I’m having a problem with a jQuery Mobile site. There’s a toolbar that’s fixed to the bottom of the screen using <footer data-role=footer data-position=fixed data-tap-toggle=false> Howeve

JQuery Mobile Windows phone 8 fixed footer

I have a phonegap windows phone 8 app with jquery mobile for styling. I am using the fixed footer for navigation. The footer however floats a few pixels above from the bottom of the phone. Ive comple

jQuery mobile fixed toolbar workaround for BlackBerry?

I’m building a webworks application using jquery mobile. I want to use the jQuery mobile fixed toolbar but it doesn’t seem to be supported in BB7. Does anyone know of a work around to get a similar

jQuery Mobile and a fixed footer

I’ve got a jQuery mobile app wrapped in PhoneGap. I’m trying to use a fixed footer and header and having some trouble with the footer. If I have content with X length and then after a click the conten

Fixed footer for a jquery mobile Panel

I am trying to place a fixed footer on a panel in jquery mobile. I have tried a couple of things but nothing seems to work. Tried a a div with data-role footer but that moves to the main page. Then I

jQuery Mobile Footer above keyboard

Using jQuery Mobile 1.3.2 I have a footer toolbar that is setup like this: <div data-role=’footer’ data-position=’fixed’>……</div> The content contains a textarea. When the user clicks

Jquery Mobile – Programatically set footer to fixed

I’ve been hacking about with jquery mobile, and I’ve finally got the dialogs to work how I want them to (as an overlay, NOT as a separate page). The problem I have is if I have the footer set to fixed

jQuery Mobile 1.2.0 any page onClick hides fixed footer

After fixing a footer in jQuery Mobile 1.2.0, any time i click anywhere on the page the page footer slides down. Upon inspection I found that the ui-fixed-hidden class was being applied to the footer,

how to keep jquery mobile header and footer fixed?

I am making a website using jQuery Mobile. How to keep jquery mobile header and footer fixed? I just want only the content to scroll(just like it happens in iPhone applications), and keep the headers

Answers

I found a solution. I have tested it on my project and it works like a charm.

Here is the URL: https://github.com/yappo/javascript-jquery.mobile.iscroll

It’s the same JS solution used by: AppML.

Also, here is a demo:

http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

p.s: It works better on my project than on their actual demo so it’s worth a try.

Enjoy :o)

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.

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)

$.mobile.fixedToolbars.setTouchToggleEnabled(false);

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

$.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”)) {

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

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

        });

This works. Tested in Android 2.3

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);

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" ) );
      });

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

or

Add this to Javascript

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

jQuery Mobile Docs – Events

<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

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.

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.

It’s very simple.

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

It works for me.

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);
}

On JQM 1.3.2 here is my solution

  1. Add data-tap-toggle=”false” to the fixed header/footer
  2. 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;
}