CODEWITHSUNDEEP
androidhtmljquery-mobilecordova
Farzad A
Farzad A

Reputation: 578

PhoneGap JQuery mobile data-transition slide giving me fade

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.

Upvotes: 1

Views: 2582

Answers (1)

Farzad A
Farzad A

Reputation: 578

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...

Upvotes: 6

Related Questions