JQuery Mobile Fixed Toolbar and Footer Bar disappears?

前端未结

关注

 14  1123

I am using JQuery Mobile version 4.1a and using:

data-position=\"fixed\"

on both header and footer.

When I scroll the content it di

相关标签:

14条回答

庸人自扰

2020-12-07 10:27

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

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

        });

This works. Tested in Android 2.3

0 讨论(0)

春和景丽

2020-12-07 10:27
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
遥遥无期

2020-12-07 10:29
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

小鲜肉

2020-12-07 10:32

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

0 讨论(0)

粉色の甜心

2020-12-07 10:33
```
$.mobile.fixedToolbars.setTouchToggleEnabled(false);
```
This will stop the toolbars from hiding when you click/touch the page.
0 讨论(0)
发布评论:

提交评论
- 加载中...
爱一瞬间的悲伤

2020-12-07 10:34

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)

0 讨论(0)
发布评论:

提交评论
- 加载中...