1

I'm trying to do a slide transition but all I see is a fade. Slide works on a Chrome browser but it does not work when loaded onto the phone.

<body onload="onLoad()">
    <div data-role="page" id="index">

        <div class="fixed-top-bar" data-role="header">Title1</div>

<div class="body-container" data-role="content">
<div class="container">
  <ul>
    <li><a href="#second" data-transition="slide">page</a></li>
    <li>World</li>
    <li>This</li>
    <li>Is A</li>
    <li>List</li>
  </ul>
</div>
</div>

<div data-role="footer"></div>
</div>

<div data-role="page" id="second">

    <div class="fixed-top-bar" data-role="header">Title2</div>

    <div class="body-container" data-role="content">
    <div class="container">
    <ul>
        <li><a href="#index" data-transition="slide">page</a></li>
        <li>World</li>
        <li>This</li>
        <li>Is A</li>
    </ul>
</div>
</div>

<div data-role="footer"></div>
</div>
</body>

There is the body of my html. currently do not have any custom js. Anyone know why I'm not seeing a slide transition?

Edit: I am having this problem on an Android 2.3.6 device. Motorola Atrix 4G to be exact.

Edit: I tried playing around with other transitions other than slide. None of them seem to work. It only gives me a fade.

Edit: I tested my code on iOS and it seems to work just fine. Not sure why it isn't working on Android.

Farzad A
  • 578
  • 1
  • 5
  • 15
  • I suppose from the Android tag your problem is with an Android device. A similar question got answered [there](http://stackoverflow.com/questions/8095889/phonegap-jquery-mobile-slide-transition-not-workign-properly-on-first-call), check it out. – chrisben Jun 12 '12 at 10:02
  • Yes, it is on Android. I should have specified sorry. I have already looked at that question. Unfortunately it did not help me solve my problem. – Farzad A Jun 12 '12 at 13:29
  • By the way, which version of JQM are you using? – chrisben Jun 12 '12 at 15:46
  • Test the transitions on [this page](http://jquerymobile.com/test/docs/pages/page-transitions.html) with your android browser (no need to package it in an application with phonegap) and see if it works there. – chrisben Jun 12 '12 at 15:47
  • 1
    Ah, I missed an important note on the transitions page... Android 2.X does not support 3d transforms, which all the transitions use except for fade... edit: I tried the link and it is all fade animations... – Farzad A Jun 12 '12 at 16:22

1 Answers1

6

I missed out one very important piece of information on the JQuery Mobile website.

To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).

That pretty much answers the question...

Farzad A
  • 578
  • 1
  • 5
  • 15