CODEWITHSUNDEEP
javascriptcssjquery-mobile
jdelman
jdelman

Reputation: 733

JQuery Mobile slide transition works in reverse but not forward

I'm building a web app with the 'multi-page' paradigm, trying to transition between DIVs that are on the same page using the "slide" transition.

I have two functions that are triggered upon a swipe or keyboard left/right:

function navnext(next) {
  console.log('(next) navigating to ' + next);
  $( ":mobile-pagecontainer" ).pagecontainer( "change", "#" + next, {
    transition: "slide",
    allowSamePageTransition: true
  });
}

function navprev(prev) {
  console.log('(prev) navigating to ' + prev);
  $( ":mobile-pagecontainer" ).pagecontainer( "change", "#" + prev, {
    transition: "slide",
    reverse: true,
    allowSamePageTransition: true
  });
}

The reverse transition works properly. The current active page slides to the right as the previous page slides in from the left.

Using the forward transition, the current active page slides out, but a blank white page slides in. Once the white page slides in, the content flashes on. I'm not sure what I'm doing wrong or what could be causing this to only happen in one direction.

EDIT: After playing around, I was able to eliminate the issue by removing the header. I get the sense that I'm not using external headers correctly.

Here's my header code:

<div data-role="header" data-tap-toggle="false" data-theme="d">
  <div class="icon-up-arrow">
    <img src="/static/img/up-arrow-white.png">
  </div>
  <h1 id="header_text" class="smallcaps"></h1>
</div>

And the following JS runs at the end of the <body> tag:

$( "[data-role='header']" ).toolbar({ theme: "d" });
$( "[data-role='footer']" ).toolbar({ theme: "d" });

Upvotes: 0

Views: 579

Answers (1)

jdelman
jdelman

Reputation: 733

Adding data-position="fixed" to my header solved the problem. Thanks @ezanker.

Upvotes: 1

Related Questions