CODEWITHSUNDEEP
jquery-mobile
TreK
TreK

Reputation: 1174

JQuery Mobile Fixed Navigation Buttons not working when page having been scrolled

Here is another issue with JQuery Mobile and Fixed Navigation.

I currently have a fixed nav in my header:

<div data-role="header" data-position="fixed"> 
    <h1>Page Title</h1> 
    <div data-role="navbar">
        <ul>
            <li><a href="a.html" class="ui-btn-active ui-state-persist">One</a></li>
            <li><a href="b.html">Two</a></li>
        </ul>
   </div>
</div>

My issue although sometimes hard to reproduce seems to occur when a.html is the active page, and I have scrolled down to the bottom of the page and click the nav button for b.html. The unusual part is that it seems to behave correctly when I have not scrolled down on the page.

Additionally, the click seems to register in the css changing the button color, but the "loading" icon never appears, and the page never loads. Also, if I click the link (now already active as shown by it's new color) a second time the page will load.

Any ideas why this isn't working correctly? I am trying this on a T-Mobile Samsung Galaxy S2. With Android 2.3. And Jquery mobile 1.1.

Upvotes: 0

Views: 581

Answers (1)

Howard Mall
Howard Mall

Reputation: 21

Is it possible that it is related to this issue:
Mobile Safari bug on fixed positioned button after scrollTop programmatically changed...?
and/or
Mobile Webkit reflow issue ?

A variation on the fixes mentioned in those links worked for me:

Try:

<style>
.iosfix {
  height: 101%;
  width: 101%;
  overflow: hidden;
}
</style>

and when you scroll:

window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
  $('.iosfix').remove();
}, 0);

Upvotes: 2

Related Questions