I am developing an android application. In that, I am trying to get the image in the javascript, but its not loading. Can someone help me to get the image in the javascript in the phone gap android app...
Code:
<img src="img/nextIcon.png" /></span>'
why the end span tag ?
Basically your file should look something like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Something</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
}
</script>
</head>
<body onload="onLoad()">
<img src="img/nextIcon.png" />
</body>
</html>
And then of course you should have included the image in a folder called img which is in you www folder
Related
i am very new to this mobile dev field and i have a question that have been bothering me for days. i have look up the reference from here. below are the code that he/she used. but unfortunately, when i applied it to mine, the code doesnt work. is it because i access it wrong or there is anything else i missed.
function close_window() {
if (confirm("Exit?")) {
navigator.app.exitApp();
}
}
here is my html to acccess the script
<div>
<ul>
<li><a data-role="button" data-icon="delete" onclick="close_window();">Exit</a></li>
<ul>
</div>
hopefully my problem can be solved.thank you
Try this one, but i haven't test it, the source is from here
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad()
{
document.addEventListener("deviceready", onDeviceReady, true);
}
function exitFromApp()
{
navigator.app.exitApp();
}
</script>
</head>
<body onload="onLoad();">
<button name="buttonClick" onclick="exitFromApp()">Click Me!</button>
</body>
</html>
In a nutshell, I've built an app using HTML/CSS/JS and Phonegap. It's still in testing phase. I have all my app's images saved in Google Cloud Storage (GCS). I have image tags (divs) within my app that needs to pull those images from GCS to the specific div. However, this method of just adding the direct URL only seems to work on iOS devices. What I need to know is, what is the correct method of pulling those images from GCS to my app so that it works on all platforms (iOS, Android, BlackBerry etc)? Do I need to add a line of code in the head of my index.html or does it have something to do with the config.xml? I've been looking for answers on the net, but nothing could give me clear-cut results that works across all platforms.
I'm still fairly new to the whole "app building game", please be gentle.
Here is some code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1"/>
<title>App Name</title>
<link href="simple-flat.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile-1.3.1 /jquery.mobile.structure-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link href="General.css" rel="stylesheet" type="text/css"/>
<link href="owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="maps.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/raleway:n1:default.js" type="text/javascript></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("offline", onOffline, false);
}
function onOffline() {
navigator.notification.alert('Please check your internet connection', function()
{ },'Connection Failure','OK');
window.location = "index.html#offline";
}
</script>
</head>
<body onload="onLoad()">
<div id="cultures" data-role="page" data-theme="a" >
<div data-role="header" id="header" data-theme="a" data-position="fixed">
<h1>Headline</h1>
<div id="image" data-theme="c">
<img src="http://commondatastorage.googleapis.com/about_namibia%2FHimba.jpg" width="100%"/></div>
<div class="headline_bar"><h3>Cultures</h3></div>
</div>
<div data-role="content">
<p>Some copy goes here.</p>
</div>
<div data-role="footer" id="footer" class="ui-bar" data-position="fixed">
</div>
</div>
</body>
</html>
I am trying to make basic app with angularjs and phonegap in android. But it doesn't seem to be working. Below are my source code files:
index.html
<!DOCTYPE html>
<html ng-app="main-app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
</head>
<body>
<div class="body-content" ng-controller="MainCtrl">
<div class="loader-ajax" ng-show="isViewLoading"></div>
<div ng-view></div>
</div>
<script src="js/angular.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
main.js
var mobileApp = angular.module("main-app", []);
mobileApp.config(function ($routeProvider,$compileProvider) {
$routeProvider
.when("/",
{
templateUrl: "partial/home.html",
controller: "homeController"
})
.when("/home",
{
templateUrl: "partial/home.html",
controller: "homeController"
});
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
mobileApp.controller("MainCtrl",function($scope){
alert('Coming here');
$scope.isViewLoading=true;
});
mobileApp.controller("homeController",function($scope){
alert('Home Coming here');
});
index.js
var app = {
initialize: function() {
this.bind();
},
bind: function() {
document.addEventListener('deviceready', this.deviceready, false);
},
deviceready: function() {
// note that this is an event handler so the scope is that of the event
// so we need to call app.report(), and not this.report()
app.report('deviceready');
angular.bootstrap(document, ['main-app']);
},
report: function(id) {
console.log("report:" + id);
}
};
When the app is getting load, router doesn't seem to work as its not getting into Homecontroller.
From what I have ready everywhere else, this code should work. Any help would be greatly appreciated.
I had the same problem, which I just found a solution to. Take a look at Angular ng-view/routing not working in PhoneGap
Move app.initialize(); to PhoneGap's deviceready event
I had this problem - I was stuck on it for 3 evenings - eventually I compared the template names in the routing to the actual file names - make sure the case matches.
I am new to PhoneGap.
My application has to 2 pages. The first is loading fine. First page contains one buttons, which when clicked should move to the second page. How to load the second page? Should I prepare one more activity extending DriodGap?
I have one more problem: how to catch back button events?
Code to navigate to another html page.
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad()
{
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady()
{
// navigator.notification.alert("PhoneGap is working");
}
function callAnothePage()
{
window.location = "test.html";
}
</script>
</head>
<body onload="onLoad();">
<h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
<button name="buttonClick" onclick="callAnothePage()">Click Me!</button>
</body>
Code for back Event.
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, true);
function onDeviceReady()
{
document.addEventListener("backbutton", BackKeyDown, true);
}
function BackKeyDown()
{
navigator.notification.alert();
//navigator.app.exitApp(); // For Exit Application
}
</script>
You need to redirect from Javascript like this:
HTML Code:
<a id="loginLnk" href="javascript:(void)">Login</a>
Javascript code:
document.getElementById("loginLnk").addEventListener("click", function(){window.location = "/test.html";});
I've tried to setup Phonegap on Android and deviceready won't fire. The reason is that DeviceInfo.uuid is always null/undefined.
It seems like the non-javascript parts of phonegap isn't loaded correctly, but I can't see exactly what. For everything outside the www directory I'm using the code provided in the sample directory of the phonegap download.
Anyone know what may be causing this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="javascripts/phonegap-1.0.0.js"></script>
<script src="http://debug.phonegap.com/target/target-script-min.js#something"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
var initialize = function() {
window.console.log("deviceready||resume");
};
document.addEventListener("deviceready", initialize);
document.addEventListener("resume", initialize);
window.console.log("onBodyLoad!");
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Herro World</h1>
</body>
</html>
In case someone else stumble on this problem.
I hadn't realized that phonegap-1.0.0.js is different for the iPhone and Android version. It has the same name, but the content is different. Thus, one must load the correct file. I solved it like this:
<script type="text/javascript">
// Atrocious way of loading two diffent phonegap scripts, but other loading methods won't work.
// also there shouldn't be two scripts to begin with -- so much for cross-platform.
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.match(/android/)) {
document.write("<script type='text/javascript' src='javascripts\/phonegap-android-1.0.0.js'><\/script>");
} else {
document.write("<script type='text/javascript' src='javascripts\/phonegap-iphone-1.0.0.js'><\/script>");
}
</script>
If you want some function to execute when the device is ready do something like this
document.addEventListener("deviceready", onDeviceReady, true);
// PhoneGap is now ready
function onDeviceReady() {
// Write your code here
}
I am not sure why your code is not working.Try placing the document.addEventListener outside the scope of the function.