Home/ Questions/Q 6593043
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T17:37:55+00:00

Using jquery mobile Im using persistant header and footer. The footer nav has tabs

  • 0

Using jquery mobile Im using persistant header and footer. The footer nav has tabs and when you click a tab it loads a page via ajax. The problem is the transition from one page to another, which is ajax loading a div with the specific id, is very slow. It takes 2-5 seconds for the page transition to happen. when I click a tab it highlights a different color but nothing happens, then a few seconds later the transition happens. Sometimes if you click to fast the layout breaks and the footer dissappears. Im doing this on an ipad with the latest version of jquery mobile. Is jquery mobile just really slow? Will waiting till ios5 make all the difference?

UPDATE

Here is a snippet of code:

<div data-role="page" id="page1">
  <div data-role="header" data-position="fixed">
    <h1>Page Title</h1>
    <a href="#dialog" data-transition="slidedown" data-icon="check">Add</a>
  </div>
  <div data-role="content">
    <ul data-role="listview">
      <li data-role="list-divider"><span class="ui-li-count">2</span></li>
      <li>
        <h3>Stephen Weber</h3>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
      </li>
</ul>
  <div data-role="footer" class="nav-glyphish-example" data-id="myfooter" data-position="fixed"> 
    <div data-role="navbar" class="nav-glyphish-example" data-grid="b">
      <ul>
        <li><a href="#page1" data-transition="reverse slide" id="chat" data-icon="custom" class="ui-btn-active ui-state-persist">Link 1</a></li>
        <li><a href="#page2" data-transition="slide" id="email" data-icon="custom">Link2</a></li>
        <li><a href="#page3" data-transition="slide" id="skull" data-icon="custom">Link 3</a></li>
      </ul>
    </div>
  </div>

<div data-role="page" id="page2">
  <div data-role="header" data-position="fixed">
    <h1>Page Title</h1>
    <a href="#dialog" data-transition="slidedown" data-icon="check">Add</a>
  </div>
  <div data-role="content">
    <ul data-role="listview">
      <li data-role="list-divider"><span class="ui-li-count">2</span></li>
      <li>
        <h3>Stephen Weber</h3>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
      </li>
</ul>
  <div data-role="footer" class="nav-glyphish-example" data-id="myfooter" data-position="fixed"> 
    <div data-role="navbar" class="nav-glyphish-example" data-grid="b">
      <ul>
        <li><a href="#page1" data-transition="reverse slide" id="chat" data-icon="custom" class="ui-btn-active ui-state-persist">Link 1</a></li>
        <li><a href="#page2" data-transition="slide" id="email" data-icon="custom">Link2</a></li>
        <li><a href="#page3" data-transition="slide" id="skull" data-icon="custom">Link 3</a></li>
      </ul>
    </div>
  </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sometimes if you click to fast the layout breaks and the footer
    dissappears:

    This is a problem is adressed already here, did not find a solution yet: https://stackoverflow.com/questions/7484522/jquerymobile-click-on-background-fires-event-header-footer-data-position-fixe

    About the loading time, it really is strange, try to focus the error with removing parts of your code and narrow down where and why the long loading time is occurring… hope this helps.

    • 0