Hi I have made a hello world type of application in PhoneGap. I have index.html in www directory but it is displaying something default home page of phonegap. Please see attached screenshot that it is displaying always.
index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<form>
Select your favourite color: <input type="color" name="favcolor">
<br/>
<input type="button" value="SUBMIT" />
</form>
</body>
</html>
But when I run the app in android phone it always display this. I have done 3-4 rebuild complete project but still same.
I am not sure what is going wrong or missing.
Thanks in advance.
I think you are making changes to www folder present inside the platforms added.
Try to make changes in the www folder which is present in the root folder of your project and then take a build and it will definitely work.
Check This:
Related
I am newbie in hybrid app development using ionic 1 with angularJs.
I have deployed the app to my samsung device (android). I found out that when I touch any elements (eg: button) it doesn't have any sounds effect.
How to enable the touch sound like the native app?
I also visited this article http://gonehybrid.com/how-to-add-sound-effects-to-your-ionic-app-with-native-audio/ , but this is not I want to achieve. It teach on how to enable and load audio in the app. However, I want to have the native touch sound of the phone
I apologize if this similar question exist in somewhere else, I have searched through a lot of sites and I couldn't find an answer
I also tried https://github.com/MatiMenich/cordova-plugin-nativeClickSound and no luck.. Please find the code below for my index.html and controller.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
controller.js
.controller('SoundController', function($ionicPlatform, $scope, $timeout){
var clickyClasses = ['sound-click', 'button'];
nativeclick.watch(clickyClasses);
$scope.click = function() {
nativeclick.trigger();
};
})
You can try https://github.com/MatiMenich/cordova-plugin-nativeClickSound. It's under MIT License. Hope it'll help you
This will applied native sound to all button and an "a" tag with href when clicking it.
var clickyClasses = ['button', 'a'];
nativeclick.watch(clickyClasses);
install plugin 'cordova plugin add cordova-plugin-nativeclicksound'
use this code in app.js
.controller('MyController',function($scope,
$cordovaNativeAudio) {
$scope.sound = function() {
nativeclick.trigger();
};
});
you can use sound() function where ever you want native sound, for example button
<button ng-click="sound()">native sound</button>
test it in device, web browser through error.
Hi I have made a hello world type of application in PhoneGap. I have index.html in www directory but it is displaying something default home page of phonegap. Please see attached screenshot that it is displaying always.
index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<form>
Select your favourite color: <input type="color" name="favcolor">
<br/>
<input type="button" value="SUBMIT" />
</form>
</body>
</html>
But when I run the app in android phone it always display this. I have done 3-4 rebuild complete project but still same.
I am not sure what is going wrong or missing.
Thanks in advance.
I think you are making changes to www folder present inside the platforms added.
Try to make changes in the www folder which is present in the root folder of your project and then take a build and it will definitely work.
Check This:
I've made some differents Apps with PhoneGap, and ALWAYS when running the App (on the AVD emulator and the Android Phone itself) when the App is starting, it's like someone press the "Android Context Menu Button" that opens a Context Menu...
I've been searching a lot, but I have not found a solution. Anyone knows why this is happening to me?
(It doesn't happen with the "Hello World" App that comes by default)
The only plugin I have in the Plugin Folder it's android.json (which is the platform plugin I believe)
And here's the part of the App with the definitions...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-density dpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="msapplication-tap-highlight" content="no" />
<title>Ctrl</title>
<script src="js/debug.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<link href="js/jquery.mobile-1.4.4.min.css" rel="stylesheet" />
<script src="cordova.js"></script>
Thanks
I use Cordova.jar 2.9.0.
Here is the code:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#BtnNavigation").click(function () {
alert("dfgdfgh");
window.location.assign("guidance-drive://v2.0/navigate/destination/?latlon='25.245789','75.254789'&title=Hello World");
});
});
</script>
</head>
<body>
"http://example.com"
<button id="BtnNavigation" name="Map" style="padding: 50px 100px;">Map</button>
</body>
</html>
Button click shows error:
The Protocol Not Supported(guidance-drive://v2.0/navigate/destination/?latlon='25.245789','75.254789'&title=Hello World)
some text to get rid of "it looks like your post is mostly code; please add some more details"
The Url Scheme used with Windows Phone 8 devices is not implemented with Nokia X devices, and thus you can not use it with Nokia X devices. Also as far as I know, there is no public offering for HERE Drive usage implemented with Nokia X, thus I could not even suggest any alternative API to use.
Is it possible to use Google Maps API V3 for mobile app development when using PhoneGap/Cordova? My index page has a link to a map page that has the following in it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Map Page</title>
</head>
<body>
<div class="app">
<div id="map-canvas"></div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
$('#map-canvas').gmap({'center': '57.7973333,12.0502107', 'zoom': 10, 'disableDefaultUI':false, 'callback': function() {}});
</script>
</body>
</html>
I'm including the Google Maps jQuery plugin and the other necessary files. When I test the app in my desktop browser, Ripple, and (mysteriously) on my old Samsung Galaxy S the map loads up just fine. When I try it in the Android emulator or on an Galaxy S4 the map does not load and I am left with an empty white page. Is there a different/better way I could be using Google Maps on and Android app or is there something I need to change in my above code? Thanks.
Change your script tag to:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false" />
I believe the one you are using is for v2 as stated here
In my case the google apis couldn't be loaded because the app didn't had permission to access the internet.
So dont' forget to add internet access permission to your app in your AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
And for other features (location, camera,...) make sure the corresponding permission has been set for this app and device