Search jQuery

jQuery Forum

JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

in jQuery Mobile • 10 years ago

I've been trying to get an app to display a fixed header (with a navbar included) and a fixed footer that are both persistent. I've assigned the following to the footer and to the header (changing the id to "top")-- data-position="fixed" data-id="bottom" data-tap-toggle="false". My transitions are set to none unless they are dialogs. However, when I scroll one of the pages in this JQM app which includes a listview, the header and footer, though they stay in place, are not persistent -- meaning they disappear and reapear as the user scrolls on an Android 2.3.5 phone.

I thought I was doing something wrong, and perhaps I am, however the same behavior occurs when I browse the Persistent toolbards doc on the JQM docs while using the Android. Can anyone point me to a publicly available JQM app that uses version 1.1 where scrolling works for Android phones?

Replies(6)

mspisars

Re: JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

10 years ago

I am on HTC Thunderbolt (2.3.4) I have both fixed footers and headers and both work great on android... (I am using standard browser)
I am using jQuery 1.7.2 (not 1.7.1 even though it is not listed as supported, I have not had any issues.)
jQm 1.1 final.

The header looks like this:

    <div class="userBar" data-theme="a"
                         data-role="header"
                         data-position="fixed"
                         data-tap-toggle="false">
        Text here...
    </div>

The footer looks like this:

    <div data-role="footer" data-theme="a" data-position="fixed" data-tap-toggle="false">
        <div data-role="navbar" data-iconpos="left" data-theme="c">
            <ul>
                <li>
                    <a href="#mainSearch" data-icon="home" class="ui-btn-active ui-state-persist">
                        Home
                    </a>
                </li>
                <li>
                    <a href="#userSetup" data-icon="gear">
                        Setup
                    </a>
                </li>
                <li>
                    <a href="#myCart" data-icon="star">
                        My List
                    </a>
                </li>
            </ul>
        </div>
        Footer Text....
    </div>

mspisars

Re: JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

10 years ago

one more note about docs...
When I go to the following demo: http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed.html
in the 1.1.0 docs on my (2.3.4 Android) the fixed header/footer are working just like my site.
They just don't have data-tap-toggle="false" so every time you tap the screen the bars hide then show up again..

Also, please read the known issues with 2.2/2.3 android at the bottom of that doc under:

Known issues in Android 2.2/2.3

mspisars

Re: Re: JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

10 years ago

It seems that data-tap-toggle is not fully documented but rather just mentioned on this page http://jquerymobile.com/demos/1.1.0/docs/toolbars/docs-bars.html

When tap-toggling is enabled, tapping the screen will toggle the visibility of the fixed toolbars. Tapping the page when the toolbars aren't visible brings them into view. Tapping again hides them until you tap again. This gives users the option to hide the toolbars until needed to maximize screen real estate. One caveat is that fixed toolbars never truly hide, but toggle between fixed and static positioning. This means that if you're at the top of a page, you can't tap-toggle a header toolbar out of view, as it instead toggles into its spot in the document flow at the top of the page. The same goes for fixed footers when scrolled to the very bottom of a document.

dcarrith

Re: JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

10 years ago

The persistent toolbar in the docs for 1.1 works fine for me on Android 2.3.7.

lirons

Re: JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

10 years ago

@mspisars @dcarrith

Thanks for the responses. I'm just trying to figure out how to make my application work with 1.1 as smoothly as possible across devices. I'm very reluctant to take it to native apps because it makes things feel like 1996 again, at least in development terms. I'm in the middle of a beta test with the application using 1.0 and have not received any complaints about the interface, but I thought moving up to 1.1 might improve it.

I did read the issues related to Android, that is why it occurred to me that I ought to ckeck out how things appeared on the docs website. I figured that would be the best test case to tell whether it was my coding causing the problem with my own application.

I am also using the standard browser with the Android Glaxy S smartphone. In addition, using a Galaxy tablet running 2.3.5 I get the same behavior on the docs website. To be exact, the toolbars initially scroll with the content and then reappear when scrolling stops. After the first scroll the toolbars appear to stay in place but disappear and then reappear on subsequent scrolls.

Just tested my own application with an iPhone 4 and the scrolling works as it should. The docs site works fine on it as well.

mspisars

Re: JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

10 years ago

Can you provide the code for the footer/header that you are using?
again, the demo in the docs is not setting data-tap-toggle="false" so the disappearing/reappearing makes sense - especially if you are ever calling preventDefault each scroll would then probably trigger a tap event as well (not sure if you are trying to work around the 300 ms click delay).
But code would help. you can create a JSFiddle of the issue you would like...

Top Reply

Response title

Attachments

jQuery Forum

JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

Replies(6)

Re: JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

Re: JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

Known issues in Android 2.2/2.3

Re: Re: JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

Re: JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

Re: JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

Re: JQM 1.1 Docs example for Persistent toolbar doesn't work on Android 2.3.5

Statistics

Tags

Actions