JQuery Mobile Fixed Toolbar and Footer Bar disappears?

Jquery Mobile

Jquery Mobile Problem Overview

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 Solutions

Solution 1 - Jquery Mobile

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

Solution 2 - Jquery Mobile

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.

Solution 3 - Jquery Mobile

<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

Solution 4 - Jquery Mobile

		$(document).bind("mobileinit", function() {
			 $.support.touchOverflow = true;
			 
			  $.mobile.touchOverflowEnabled = true;
			  $.mobile.fixedToolbars.setTouchToggleEnabled(false);
		
		});

This works. Tested in Android 2.3

Solution 5 - Jquery Mobile

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)

Solution 6 - Jquery Mobile

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.

Solution 7 - Jquery Mobile

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

Solution 8 - Jquery Mobile

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

Solution 9 - Jquery Mobile

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

Solution 10 - Jquery Mobile

It's very simple.

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

It works for me.

Solution 11 - Jquery Mobile

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.

Solution 12 - Jquery Mobile

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

Solution 13 - Jquery Mobile

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

Solution 14 - Jquery Mobile

$.mobile.fixedToolbars.setTouchToggleEnabled(false);

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

Categories
Recommended Jquery Mobile Solutions

Previous Solution:

Is there an interactive graphing library for python

PythonGraphInteractive

Next Solution:

Android Raw folders - creation and reference

AndroidAndroid Resources

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSatch3000View Question on Stackoverflow
Solution 1 - Jquery MobiletarkeshwarView Answer on Stackoverflow
Solution 2 - Jquery Mobilei8abugView Answer on Stackoverflow
Solution 3 - Jquery MobileKoshView Answer on Stackoverflow
Solution 4 - Jquery Mobilenish1013View Answer on Stackoverflow
Solution 5 - Jquery Mobileuser418775View Answer on Stackoverflow
Solution 6 - Jquery MobileKoshView Answer on Stackoverflow
Solution 7 - Jquery MobileSteve GardnerView Answer on Stackoverflow
Solution 8 - Jquery MobileyakuzayangView Answer on Stackoverflow
Solution 9 - Jquery MobilePeter SasburgView Answer on Stackoverflow
Solution 10 - Jquery MobileKalai Selvan RaviView Answer on Stackoverflow
Solution 11 - Jquery Mobileuser347284View Answer on Stackoverflow
Solution 12 - Jquery MobileNeoView Answer on Stackoverflow
Solution 13 - Jquery MobileWei ZhangView Answer on Stackoverflow
Solution 14 - Jquery MobilecomonuironsView Answer on Stackoverflow