I am using cordova for mobile app development on android platform.
I have this html code in www/index.html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<script src="cordova-2.2.0.js" type="text/javascript"></script>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<script src="JS/main.js" type="text/javascript"></script>
<link rel="stylesheet" href="CSS/main.css"/>
</head>
<body id="body" class="body">
<div id="box" class="bodyBlack">
</div>
</body>
</html>
I don't know why but when I am running this app (also when just opening on pc browser) i am having this div appended at the bottom of the page:
<div ui-loader ui-corner-all ui-body-a ui-loader-default>
<span ui-loader ui-corner-all ui-body-a ui-loader-default></span>
<h1>loading</h1>
Here is the content of main.js:
$(document).ready(function(){
$('#box').click(function(){
if($(this).attr('class') == 'bodyBlack'){
$(this).removeClass('bodyBlack');
$(this).addClass('bodyWhite');
}
else{
$(this).removeClass('bodyWhite');
$(this).addClass('bodyBlack');
}
});
});
Why and from where dose it getting from? how I am preventing it to do so?
Thanks!!!
This seems to be a "Loading Message" generated by jQuery Mobile, see this answer. So jQuery Mobile is loading something (and cant't find it, perhaps). Please post the content of your main.js file if you're still having trouble!
Related
I'm trying to build this directory type of app and I'm using iframe to embed other sites into the app.I'd also like the links of the embedded sites to open within the parent window.
With the Progressive web app version, this works great and there are no redirections to external pages.
With the Native android version, the iframe links are redirected back to the original web site.
Here is the code.
var app = angular.module('bible', []);
app.controller('MainCtrl', function($scope, $element) {
});
app.directive('iframeDirective', ['$sce', function($sce) {
return {
restrict: 'E',
template: '<iframe src="{{ trustedUrl }}" frameborder="0" allowfullscreen></iframe>',
link: function(scope) {
scope.trustedUrl = $sce.trustAsResourceUrl("https://www.bible.com/bible/100/JHN.3");
}
}
}]);
*{margin:0;padding:0}
html, body {height:100%;width:100%;-webkit-overflow-scrolling:touch;position:fixed; overflow:auto;}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header {border-bottom:1px solid #000}
.content {height:100%}
<!DOCTYPE html>
<html ng-app="bible">
<head>
<meta charset="utf-8" />
<title>Bible app</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js" data-semver="1.2.0"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<iframe-directive></iframe-directive>
</body>
</html>
Any help is much appreciated. Thank you!
Finally got it to work for Android replacing iframe with object data:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<object data="https://www.bible.com/bible/100/JHN.3" width="100%" height="700" type="text/html">
Alternative Content
</object>
</body>
</html>
Fully functional in Android!
Downside is that it doesn't scroll in IOS yet!
I am trying to set focus to the input box and showing android keyboard using jquery mobile on pageshow.
I tried a lot of options from web. but none is working as expected in both emulator and mobile.
Here is the Code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
</head>
<body>
<div data-role="page" id="main">
<div data-role="header"><h3>Set Focus, Show Keyboard</h3></div>
<div data-role="content">
<label for="gotoPage"></label>
<input type="text" name="gotoPage" id="gotoPage" placeholder="Question No." data-mini="true" />
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).on('pageinit',"[data-role=page]", function() {
});
$(document).on('pagebeforeshow',"[data-role=page]", function() {
});
$(document).on('pageshow',"[data-role=page]", function() {
$('#gotoPage').focus().select();
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</body>
</html>
Find the Screen shots for reference
Kindly advice... Thanks in advance...
NOTE:
As per Omar comment it is working fine in ios....
anyone can suggest how we get work this in android?
The solution which works for me:
$("#main").on("pageshow" , function() {
$('#gotoPage').focus();
});
I have a problem with AJax/Json petitions with PhoneGap. I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cartelera</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="cordova-2.0.0.js">
</script>
<script src="js/jquery.min.js">
</script>
<script src="js/jquery.mobile.js">
</script>
<script src="my.js">
</script>
<script>
$(document).ready(function(){
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
//$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" > Prueba 1 </a></li>');
//$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" > Prueba 2 </a></li>');
$('#cargaDiv').html('<img src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/images/ajax-loader.gif" /> Cargando...'); // Loading message
$.getJSON("http://www.cinesimf.com/rss/JSONTorrevieja.php",
function(data){
for (i=0;i<data.length;i++)
{
$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" >'+data[i].titulo+'</a></li>');
}
$('#cargaDiv').html(''); //Remove Loading message
$("#ulCartelera").listview('refresh');
})
})
</script>
</head>
<body>
<div data-role="page" id="cartelerafinestrat">
<div data-role="header">
Atras
<h1>IMF Finestrat</h1>
</div>
<div id="cargaDiv">
</div>
<div id="cartelera">
<ul id="ulCartelera" data-role="listview" class="ui-listview" data-theme="d" data_dividertheme="b">
</ul>
</div>
</div>
</body>
</html>
</pre>
I have added in config.xml (/res/xml/) my domain ("http://www.cinesimf.com/*") in the phonegap whitelist.
If I try the code in a navigator in my pc, it works OK, but in Android aplication nevers load.
Your problem depends on a general webkit (and modern browsers) issue.
If you want to do a json request to a cross-domain server you have to modify your manifest file on Android or your plist file non Iphone, inserting the allowed domains where you want to get your data.
You could also do a jsonp request to avoid manifests updates:
$.getJSON("http://www.cinesimf.com/rss/JSONTorrevieja.php?callback=?",
function(data){
for (i=0;i<data.length;i++)
{
$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" >'+data[i].titulo+'</a></li>');
}
$('#cargaDiv').html(''); //Remove Loading message
$("#ulCartelera").listview('refresh');
})
You can have a good explanation about jsonp there: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
I am using JQM 1.1.0 and Cordova 1.5.0.
I have code like this
<!DOCTYPE HTML>
<html>
<head>
<title>Index Page</title>
<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Adding Phonegap scripts -->
<script type="text/javascript" charset="utf-8"
src="cordova/cordova-1.5.0.js"></script>
<!-- Adding jQuery mobile and jQuery scripts & CSS -->
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet"
href="jquerymobile/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript"
src="jquerymobile/jquery.mobile-1.1.0-rc.1.min.js"></script>
<link rel="stylesheet" href="css/colors.css">
<script type="text/javascript">
$("#page1").live("pageinit", function(e) {
console.log("pageinit1");
}
$("#page2").live("pageinit", function(e) {
console.log("pageinit2");
}
</script>
<body>
<div data-role="page" id="page1">
<div data-role="header">Page 1</div>
<div data-role="content"></div>
</div>
<div data-role="page" id="page2">
<div data-role="header">Page 2</div>
<div data-role="content"></div>
</div>
</body>
This code is working fine for Android. but in iOS,as soon as the page loads then the pageinit event of page1 doesnt get fired and later on if i changepage to page2 then everything is fine.. Why is this happening?
am not so sure about that but as i know live function has changed in JQ1.7.x and now you will have to use the on() function which has small changes to the way you code your code ..
I just need to write my javaScript functions after data-role="page" to make it working...
I created an app in HTML/CSS. It works fine in the iPhone. Now I'm porting it to Android using PhoneGap in Eclipse. I have used this page to get my starting point: phonegap / phonegap-android-eclipse-quickstart When I follow that tutorial and open it in my eLocity, it starts up correctly, opening the index.html as the home page.
My new index.html page, which replaces the one used in tutorial above, is full of normal HTML <a href="1000.html"> links within <li></li> lists which take you to HTML pages elsewhere in the same folder (www) or the next folder (Chapters/1000.html). But when I start it up in my eLocity tablet, the links won't fire. The <li> area just turns blue as they should, but the pages don't change.
Why would an ordinary HTML link not work? I'm not getting any error messages in Eclipse.
Here's the beginning of index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -->
<html>
<head>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="minimum-scale=1.0, width=device-width, user-scalable=no" name="viewport">
<link href="Chapters/hymns-style.css" rel="stylesheet" type="text/css">
<link href="Chapters/style.css" rel="stylesheet" type="text/css">
<title>Husting Pocket Hymnal</title>
</head>
<body style="background-color:#00aaff">
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<!-- <script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", function() {
alert('initialized');
}, true);
</script>
-->
<div id="content">
<span class="graytitle">Husting Pocket Hymnal</span>
<ul class="pageitem">
<li class="menu">
<span class="name">Hymns A</span>
</li>
<li class="menu">
<span class="name">Hymns B</span>
</li>
Here's the beginning of a page it goes to. ** All of these HTML links work: **
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport">
<link href="hymns-style.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Hymns A</title>
</head>
<body>
<div id="content">
<span class="graytitle">Hymns A</span>
<br>
<ul class="pageitem">
<li class="menu">
<span class="name"><a href="0300.html">
A debtor to mercy alone
<span class="detailbutton"></span></span></a>
</li>
<li class="menu">
<span class="name"><a href="0301.html">
A lamp in the night, a song in time of sorrow
<span class="detailbutton"></span></span></a>
</li>
Try ...
If that works then it could be a bug / edge case with how the URL handling works at this line: https://github.com/phonegap/phonegap-android/blob/master/framework/src/com/phonegap/DroidGap.java#L1028
I found the problem. I can tap on the text and go to the link, but tapping elsewhere on the cell did not work. This is because I had removed the arrow png that belongs at the far right. If the a href tag enclosed the text and that arrow, then the link worked across the entire cell.