CODEWITHSUNDEEP
javascriptandroidhtmlcordova
Klaasvaak
Klaasvaak

Reputation: 5644

page transition for app using jquery mobile and phonegap

I'm building an app in html/css/javascript and using phonegap to build.

So, I first wanted to have to simple page to page navigation. I tryed this:

index: 

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">
        <a rel="external" data-role="button" href="test.html" data-transition="slide">click me</a>
    </div>

</body>

</html>

test.html:

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">
        New page!
    </div>

</body>

</html>

Result: when I click on the button the test.html page loads very slow and the data-transition="slide" seems to be ignored.

I found an article about dynamic page loading: https://www.ibm.com/developerworks/mydeveloperworks/blogs/94e7fded-7162-445e-8ceb-97a2140866a9/entry/dynamic_page_loading_for_phonegap1?lang=en

Which I really don't get. Aren't the HTML files stored locally? So why do a XMLHtppRequest?

My question is: How do I get a good page transition (fast and with effects)?

Upvotes: 0

Views: 3688

Answers (2)

Per Quested Aronsson
Per Quested Aronsson

Reputation: 12140

Try this solution by Piotr Walczyszyn. Highly recommended for anyone using Jquery mobile and Phonegap together.

Upvotes: 1

Littm
Littm

Reputation: 4947

You should remove rel="external" from your <a> link.

The attribute rel="external" disables the Ajax navigation, skipping the transition effect, and refreshes your page test.html.

Try your code after removing it.

index.html:

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">

        <!-- REMOVE THE ATTRIBUTE REL="EXTERNAL" FROM THE LINK -->
        <a data-role="button" href="test.html" data-transition="slide">click me</a>
    </div>

</body>

</html>


test.html:

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">
        New page!
    </div>

</body>

</html>

Let me know about your results.

Upvotes: 3

Related Questions