0

I have a page with a fixed footer

<div data-role="page" id="next_collection" data-theme="d">
    <div data-role="header" data-theme="elw">
        Title
    </div>
    <div data-role="content" style="min-height: 246px;">
        Some content
    </div>
    <div data-role="footer" data-id="footer_nav" data-position="fixed">
        <a href="#business_hours"><img src="images/icon.png" /></a>
    </div>
</div>

This works on Android and iPod, but on iPhone 4s it toggles (hide/show) the footer if you touch the screen. I tried to fix it like in this old question but this does not work anymore. For $.mobile.fixedToolbars.setTouchToggleEnabled() i get:

$.mobile.fixedToolbars is undefined

How to stop the footer from toggle in the newer versions?

Community
  • 1
  • 1
PiTheNumber
  • 22,828
  • 17
  • 107
  • 180

1 Answers1

1

As @commadelimited says, the toggle has been a new feature not available in prior versions.

The meta data to add to your header or footer to remove that toggle feature is:

data-tap-toggle="false"

so, in your case, the footer should looks like:

<div data-role="footer" data-id="footer_nav" data-position="fixed" data-tap-toggle="false">
    <a href="#business_hours"><img src="images/icon.png" /></a>
</div>

And here should be some kind of reference from their site: link to google search

spuas
  • 1,683
  • 1
  • 16
  • 26