I want to create my first phonegap mobile app but already have problems with jQuery Mobile. I've included the necessary files but the page transition does not work in mobile different.it works fine on the desktop after generating apk using (phonegap) it is not working in mobile.enter image description here UI is changed in the mobile.
<script id="popup-arrow-script">
$.mobile.document.on( "click", "#open-popupArrow", function( evt ) {
$( "#popupArrow" ).popup( "open", { x: evt.pageX, y: evt.pageY } );
evt.preventDefault();
});
</script> <style id="tooltip-btn">
.ui-btn.my-tooltip-btn,
.ui-btn.my-tooltip-btn:hover,
.ui-btn.my-tooltip-btn:active {
background: none;
border: 0;
}
<style id="popup-arrow-css">
.clickable-area {
display: block;
width: 100%;
height: 300px;
background-color: #ffefef;
}
.clickable-area:focus {
outline: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popup - jQuery Mobile Demos</title>
<!--<link rel="shortcut icon" href="../favicon.ico">-->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="demos/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="demos/_assets/css/jqm-demos.css">
<script src="demos/js/jquery.js"></script>
<script src="demos/_assets/js/index.js"></script>
<script src="demos/js/jquery.mobile-1.4.5.min.js"></script>
</head>
<div data-role = "page" id = "pageone">
<div data-role = "header" style="background-color: #3f51b5;color: white;">
<h1>Health care</h1>
</div>
<div data-role = "main" class = "ui-content">
<a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop" style="margin-left: 60%;background-color: #3f51b5;color: white;">Settings</a>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all" style="width: 120%;">
<form>
<div style="padding:10px 20px;">
<h3>Add/Update</h3>
<label for="un" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="un" value="" placeholder="Name" data-theme="a">
<label for="pw" class="ui-hidden-accessible">Password:</label>
<input type="text" name="pass" id="pw" value="" placeholder=" Phone-Number" data-theme="a">
<label for="textarea-1">Details</label>
<textarea name="textarea-1" id="textarea-1"></textarea>
<label for="pw" class="ui-hidden-accessible">Select type</label>
<select name="select-native-1" id="select-native-1">
<option value="1" data-theme="a">Choose type</option>
<option value="1">Doctor</option>
<option value="2">Neighbour</option>
<option value="3">Relative</option>
<option value="4">Ambulance</option>
</select>
<button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check" style="background-color: #3f51b5;color: white;">Add</button>
</div>
</form>
</div>
<div style=" margin-left: 41%;">
<a href = "#" class = "ui-btn ui-btn-inline" style="width: 20%"><span ><img src="images/calladoctor.png" alt="" style="width: 30%"/></span> </a><br>
<a href = "#" class = "ui-btn ui-btn-inline" style="width: 20%"><span ><img src="images/callambulance.jpg" alt="" style="width: 50%"/></span> </a><br>
<a href = "#" class = "ui-btn ui-btn-inline" style="width: 20%"><span ><img src="images/callneighbour.jpg" alt="" style="width: 40%"/></span> </a>
</div>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).bind('mobileinit',function(){
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
</script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>