CODEWITHSUNDEEP
jqueryiosjquery-mobilecordova
Elliott Bowles
Elliott Bowles

Reputation: 398

Phonegap + Jquery Mobile Slow Page Transition

Currently rebuilding a NimbleKit app with Phonegap + Jquery Mobile and running into the most basic of issues. I'm using the multi-page design style and am simply trying to get to transition between two pages of dummy content with a fixed tab bar below. However, when I touch either tab there is a decent lag before anything happens. I feel like I'm probably missing something really simple, could anyone take a look at the code below and let me know if they see anything I'm doing wrong?

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.0-rc.1.css" />

<title>Demo</title>
    </head>
    <body>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.0-rc.1.js"></script>

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

            <div data-role="header">
                <h1>Multi-page</h1>
            </div><!-- /header -->

            <div data-role="content" >
                <h2>One</h2>

                <p>This is page one</p>


            </div><!-- /content -->

            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#one" data-transition="none">One</a></li>
                        <li><a href="#two" data-transition="none">Two</a></li>
                    </ul>
                </div><!-- /navbar -->
            </div><!-- /footer -->
        </div><!-- /page one -->


        <!-- Start of second page: #two -->
        <div data-role="page" id="two">

            <div data-role="header">
                <h1>Two</h1>
            </div><!-- /header -->

            <div data-role="content" data-theme="a">
                <h2>Two</h2>
                <p>Page 2</p>
            </div><!-- /content -->

            <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#one" data-transition="none">One</a></li>
                    <li><a href="#two" data-transition="none">Two</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->        </div><!-- /page two -->




    </body>

Thanks!

Elliott

Upvotes: 1

Views: 1265

Answers (1)

Purus
Purus

Reputation: 5799

Usually there is a 300ms delay which is added by the mobile device OS, to distinguish between tap and double tap. It wait for 300ms to find if the user is again tapping to generate the double-tap event.

You can use some plugin like fastClick which removes this delay.

Also tweak the jQM settings.

$(document).bind("mobileinit", function() {
    $.mobile.allowCrossDomainPages = true;
    $.support.cors = true;
    $.mobile.buttonMarkup.hoverDelay = 50;
});

hoverDelay is the one that you should handle with care. It makes a decent improvement. But don't overuse it by making it 0 :P

Upvotes: 1

Related Questions