android - jQuery Mobile Transition not working -
i'm trying build simple mobile app , it's first time using jquery mobile followed tutorials online , can't find what's wrong code :\
i'm trying create 3 different pages slide transition. sliding works without transition.
when view loads, looks have 'loading circle' stuck in middle of screen can't find causing me errors , eclipse's console empty
<!doctype html> <html> <head> <meta charset="utf-8"> <title>my first app omg</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="jquery/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="jquery/jquery-2.1.1.js"></script> <script type="text/javascript" src="jquery/jquery.mobile-1.4.5.min.js"></script> <link href="stylesheet.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="functions.js"></script> </head> <body> <!-- homepage menu , content --> <div data-role="page" id="homepage"> <div data-role="header"> <div data-role="navbar"> <ul> <li><a href="#homepage" data-transition="slide" data-icon="home">home</a></li> <li><a href="#trending" data-transition="slide" data-icon="star">trending</a></li> <li><a href="#bycategory" data-transition="slide" data-icon="bullets">categories</a></li> </ul> </div> <h1>latest feeds</h1> </div> <div data-role="main" class="ui-content"> <p>content of 'home'..</p> </div> </div> <!-- trending posts menu , content --> <div data-role="page" id="trending"> <div data-role="header"> <div data-role="navbar"> <ul> <li><a href="#homepage" data-transition="slide" data-icon="home">home</a></li> <li><a href="#trending" data-transition="slide" data-icon="star">trending</a></li> <li><a href="#bycategory" data-transition="slide" data-icon="bullets">categories</a></li> </ul> </div> <h1>most visited</h1> </div> <div data-role="main" class="ui-content"> <p>content of 'trending'..</p> </div> </div> <!-- category filter menu , content --> <div data-role="page" id="bycategory"> <div data-role="header"> <div data-role="navbar"> <ul> <li><a href="#homepage" data-transition="slide" data-icon="home">home</a></li> <li><a href="#trending" data-transition="slide" data-icon="star">trending</a></li> <li><a href="#bycategory" data-transition="slide" data-icon="bullets">categories</a></li> </ul> </div> <h1>categories</h1> </div> <div data-role="main" class="ui-content"> <p>content of 'categories'..</p> </div> </div> </body> </html> and here scripts-
$(document).ready(function() { // set first page load #homepage window.location.hash = 'homepage'; $.mobile.initializepage(); }); $(document).on('swipeleft swiperight', function (event) { if(event.type == 'swiperight') { var prevpage = '#' + $.mobile.activepage.prev('div[data-role="page"]')[0].id; $.mobile.changepage(prevpage, { transition: 'slide', reverse: true }); } if(event.type == 'swipeleft') { var nextpage = '#' + $.mobile.activepage.next('div[data-role="page"]')[0].id; $.mobile.changepage(nextpage, { transition: 'slide', reverse: false }); } });
solved removing first 'document.ready' function hash
android eclipse jquery-mobile cordova
No comments:
Post a Comment