I'm able to display a splash screen in Android using PhoneGap 3.3.0 and it works when I set it to automatically time out at 10 seconds. But when I use navigator.splashscreen.hide() to hide the splash screen in my javascript (according to the docs) it throws a uncaught type error: splashscreen is not defined.
I just upgraded to PhoneGap 3.3.0. I verified that I do have the splashscreen installed and is reflected in my res/xml/config.xml. I am building locally.
$('#mainPage').bind('pageinit', onDeviceReady);
function onDeviceReady() {
mainInit();
optimizeSpeed();
adjustScale();
displayLastFeeding();
navigator.splashscreen.hide();
console.log("device ready");
}
This is taken straight from the docs, so not sure what is going on here...
EDIT:
Modifying the above code to use the deviceready event still has the same error (navigator.splashscreen not defined).
$(document).ready(function() {
document.addEventListener("deviceready", onDeviceReady, false);
});
I include phonegap.js and cordova.js in my index.html file.
Related
I want to open page in Cordova WebView and add some styles. I have
function setSize() {
alert('Trying to load styles'); //works
app.insertCSS({code: 'body{width: 100% !important;height: 100% !important;background-color: red !important;}'}, function(){
alert('Styles are loaded!');
});
}
function onDeviceReady() {
var app= window.open('http://example.com','_self','location=no');
app.addEventListener('loadstart', setSize());
}
But it doesn't work. Is there any mistake ?
inAppBrowser is not a page from your application its a web page displays within browser of your app so to apply css into your browser elements you have to load CSS file into page of browser,
So here is an answer I have given in stack overflow before, which is working fine for that OP so try it, may be you will get success in what you wants to do.
I have a sencha app and launch in Android with phonegap. In my controller config.js I do window.open() when the user push a button and I add the Event Listener for 'loadstop' but I don't receive the event never.
onDeviceReady: function(){
var manual = window.open('resources/manual/manual.html', '_blank', 'location=no');
manual.addEventListener('loadstop', function() { alert('start'); });
},
goToManual: function () {
document.addEventListener("deviceready", this.onDeviceReady, false);
}
thanks for the help and sorry for my English
I guess that you are using the default JS method window.open. Since sencha mixes up things
in that case, I don't think you can add listeners or make changes if you are working on a mobile device.
So use this instead to make sure your call uses Cordova plugin:
var manual = null;
Cordova.exec(manual = window.open('resources/manual/manual.html', '_blank', 'location=no'));
The app crashes for me a few seconds after opening the page though.
I am having problem with Android's back button in my phonegap application.
Each time i press back it closes the whole application. Below is the codes that I have written. I refered to Phonegap API documentation for 2.2.0 here : http://docs.phonegap.com/en/2.2.0/cordova_events_events.md.html#backbutton
In the JS file:
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
alert("back button");
}
HTML File:
<body onload="onLoad()">
All of the other functions are working except for the android physical back button. When I press back, it does not prompt me with an alert of "back button" but it just exits the whole application.
What am I doing wrong or did I miss something out?
Thank you.
Regards,
Amanda
Are you certain that the onDeciveryReady() is invoked? Try adding a console.log(""); and check in logcat that you actually get to the onDeviceReady.
I had no problem overriding the back button with your example.
Make sure your javascript file import is correct and that you are using the cordova.js file for Android and not some other platform.
As a side note, overriding certain buttons, like the Back button may be confusing for the user, if you plan to add some sort of "Exit Confirm?" dialog that should be fine but making it to something completely different than what is usually does is not recommended.
Do this.
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
document.addEventListener("backbutton", function(ev){
ev.preventDefault();
ev.stopPropagation(); // ev is event
}, false);
}
I am developing a phonegap android app, where I have initially disabled the back button of device using this, its working
document.addEventListener("backbutton", onBackKey, false);
function onBackKey(){
}
But, when I click on a button in my app to goto facebook login page, I want the back button to be enabled. I tried to remove event listener but it didn't work
funtion f_click(url, width, height){
document.removeEventListener("backbutton", onBackKey, false);
//some link to start facebook
}
I also used
document.removeEventListener("backbutton", function(e) { e.preventDefault(); }, false);
But I am getting this error every time, cordova is not defined. Why?
Don't forget to call the "deviceready" event.
From phonegap doc :
This is a very important event that every Cordova application should
use.
Cordova consists of two code bases: native and JavaScript. While the
native code is loading, a custom loading image is displayed. However,
JavaScript is only loaded once the DOM loads. This means your web
application could, potentially, call a Cordova JavaScript function
before it is loaded.
The Cordova deviceready event fires once Cordova has fully loaded.
After the device has fired, you can safely make calls to Cordova
function.
Try something like this :
var deviceReady = false;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
deviceReady = true;
}
function f_click(url, width, height)
{
if(deviceReady)
{
document.removeEventListener("backbutton", onBackKey, false);
//...
}
}
I have added a splash screen for an Android app. It displays, but it shows a black screen for two seconds after showing the splash screen.
How can I fix this?
Based on your tags I assumed that you are facing issue for Android Phonegap app.
You have to close splash screen on device ready instead of giving specific time in loadUrl method.
Code Snippet:
super.setIntegerProperty("splashscreen", R.drawable.splash); // Display splash screen for android
this.setIntegerProperty("loadUrlTimeoutValue", 70000);
super.loadUrl("file:///android_asset/www/index.html",10000);// Give max time here
Hide splash screen in Phonegap onDeviceReady method :
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
cordova.exec(null, null, "SplashScreen", "hide", [])
}