CODEWITHSUNDEEP
jquerycordovajquery-mobilephonegap-build
Rahul Jain
Rahul Jain

Reputation: 45

phonegap page transition issue

I am making a simple application in which I have an image with an image map, and when I click on the image map another page loads. I am using the href property in the tag to navigate to the new page. All of this is being done on a single page.

When I click on the image map the transition should be smooth and the second page should get loaded (this is what the natural behavior should be) but what I am getting is that the page transition is choppy and also the second page isn't loaded, nothing is displayed on the screen, and the elements are displayed only after I tap a couple of times on the screen.

I tried looking for a solution but couldn't find anything.

The earlier application that I had built never ad such an issue, and all of a sudden this issue came up in the second application.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>India Stats</title>
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="listPage" data-role="page">
        <div data-role="header" data-position="fixed">
            Geo-spatial Analysis of Election Results in India
        </div>
        <div data-role="content">
            <div>
                <img id="Image-Maps_8201304300944558" src="img/indiamap.png" usemap="#Image-Maps_8201304300944558" />
                <map id="_Image-Maps_8201304300944558" name="Image-Maps_8201304300944558">
                <area shape="poly" coords="60,255,78,258,94,262,106,281,120,294,124,301,117,304,117,313,110,317,108,325,108,334,106,343,99,343,97,351,87,347,88,338,86,329,85,319,85,311,81,305,79,315,78,324,68,329,54,337,46,337,43,333,33,325,29,316,21,310,20,303,17,299,28,298,36,296,43,293,43,288,34,288,25,290,17,285,14,279,14,272,14,265,23,258,36,262,45,262,50,258,58,263," href="#gujarat" />
                </map>
            </div>
        </div>
        <div data-role="footer" data-position="fixed">
            Datanet Analytics &copy; Datanet India Pvt. Ltd.
        </div>
    </div>
    <div id="gujarat" data-role="page">
        <div data-role="header" data-position="fixed">
            Geo-spatial Analysis of Election Results in Gujarat
        </div>
        <div data-role="content">
            <div>
                <img id="ImageMap" src="img/gujarat.png" usemap="#ImageMaps"/>
                <map id="ImageMaps" name="ImageMaps">
                  <area shape="poly" coords="225,348,224,337,219,332,219,328,212,324,204,319,197,317,191,314,193,310,201,306,199,300,202,295,198,291,194,287,196,283,195,277,187,275,182,275,177,275,165,274,158,274,158,278,158,285,163,297,169,309,171,317,158,316,150,313,145,313,139,313,134,316,134,320,141,328,149,336,156,342,165,345,178,352,187,356,195,356,206,354,212,354,223,351" href="#junagadh">
                </map>
          </div>
        </div>
        <div data-role="footer" data-position="fixed">
            Datanet Analytics &copy; Datanet India Pvt. Ltd.
        </div>
    </div>
    <div id="junagadh" data-role="page">
        <div data-role="header" data-position="fixed">
            Geo-spatial Analysis of Election Results in Junagadh PC 2009 & ACs 2012
        </div>
        <div data-role="content">
        <img src="img/junagadh.png" />
        </div>
        <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
        <ul>
        <li style="font-size:30px"><a href="election.html">Analysis of Election Results</a></li>
        <li style="font-size:30px"><a href="cr.html">Constituencies Result of Previous Years</a></li>
        </ul>
        </div>
            Datanet Analytics &copy; Datanet India Pvt. Ltd.
        </div>
    </div>
</body>
<script src="cordova-2.7.0.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.0.js" type="text/javascript"></script>
</html>

Upvotes: 0

Views: 756

Answers (2)

mpatel
mpatel

Reputation: 486

Try to Debug the Application. where error arises.Like @Gajotres have said.If your second page is not loading then there are might be some issues into the second Page or You can use jQM $.mobile.changePage('#secondPage',{transition:"none"}); method to solve this problem. I have faced similar kind of issue. but i have removed all the transition from the application.Its working fantastic.You can try it.

Upvotes: 0

Porwal
Porwal

Reputation: 330

<script src="cordova-2.7.0.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.0.js" type="text/javascript"></script>

Please add these lines before body load i.e. in '< head >' tag and remove them from bottom of the page, then try to load your page again. JS files should be loaded before body load so that functions can be applied. :)

Upvotes: 1

Related Questions