jquery - phonegap page transition issue -
i making simple application in have image image map, , when click on image map page loads. using href property in tag navigate new page. of being done on single page.
when click on image map transition should smooth , second page should loaded (this natural behavior should be) getting page transition choppy , second page isn't loaded, nothing displayed on screen, , elements displayed after tap couple of times on screen.
i tried looking solution couldn't find anything.
the earlier application had built never ad such issue, , of sudden issue came in 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 © 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 © 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 © 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>
try debug application. error arises.like @gajotres have said.if second page not loading there might issues second page or can use jqm $.mobile.changepage('#secondpage',{transition:"none"});
method solve problem. have faced similar kind of issue. have removed transition application.its working fantastic.you can try it.
Comments
Post a Comment