Develop Reference

Can't hide Intel XDK splash screen

I have created a small game and created build using Intel XDK. I installed it in device and can see the splash screen. I tried what is mentioned in other topics but unable to remove the splash screen.
function onDeviceReady(){
if( navigator.splashscreen && navigator.splashscreen.hide ) {
navigator.splashscreen.hide();
}
if( window.intel && intel.xdk && intel.xdk.device ) {
if( intel.xdk.device.hideSplashScreen ) {
intel.xdk.device.hideSplashScreen();
}
intel.xdk.device.setRotateOrientation("landscape");
intel.xdk.device.setAutoRotate(false);
intel.xdk.device.hideStatusBar();
}
}
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
This is how it looks initially when I launch the app.
I have this plugin added in the project
cordova-plugin-splashscreen
Please help me resolve this issue.

Received this answer on XDK forum
The purpose of the splashscreen is to hide the details of the
initialization process (even before your device ready fires). The
splashscreen you see is the default cordova splash screen, you can
replace it by your own graphics. You can upload custom splashscreen
through Launch Icons and Splash screens on Projects page. The
hidesplashscreen() method will hide the splashscreen that is displayed
at the initialization and the contents of your app will appear (which
happens when device is ready).

PhoneGap - Can't hide Android splash screen

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.

Enable back button when return from facebook.com, phonegap android

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);
//...
}
}

How to load css in phonegap before page display?

I am creating a Phonegap app. In my app am using different css for "Android" and "ios" so i have to load css only if it is android. The following code works perfectly but initially the page gets loaded without css and then after phonegap loads my css gets loaded which shows me a dancing page everytime when i display that page (i.e) css loads after the page displays.can anyone help to load the css before the page get displayed, but only if it is android platform.
<script type="text/javascript" >
var string;
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
function onDeviceReady()
{
check_img();
}
function check_img()
{
string = device.platform;
if(string=="Android")
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
//link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/style.css';
//link.media = 'all';
head.appendChild(link);
}
}
</script>

I found answer here.
http://simonmacdonald.blogspot.in/2012/04/phonegap-android-splashscreen-just-got.html
when you setup a splash screen you do the following in your mainactivity.java file
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html", 10000);
This would show your splash screen 10 seconds then your index.html page would be loaded. Notice I said then. Yup, that's right showing the splash screen is a blocking call. While the splash screen is being displayed your .html/.js/.css is not being loaded in the background. Well, that is all changing so that your splash screen is shown on one thread while your application loads underneath the splash screen in another thread. The best thing is you don't need to make any changes to your code. Just keep calling the splash screen like you normally would.

Load first page on splashscreen using phonegap on android

Hi i'm using phonegap in conjunction with Jquery mobile. I'm trying to immediately fetch the main page, while showing the user a splashscreen.
In PhoneGap for Android i'm using this
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html", 2000);
While this loads the splash, it also delays the loading of index.html. It it possible to start fetching it right away? Also, if not with phonegap, has anybody done this using JQM instead of phonegap?
UPDATE: After using it with a slower loading first page (doing a json request) it kinda looks like the splash screens shows for a longer period of time, so this appears to be the default behavior

As given here, you could kill the splashscreen once you have loaded all the assets and DOM elements have been loaded.
something like this:
Java:
super.setIntegerProperty("splashscreen",R.drawable.splashscreen);
super.loadUrl("file:///android_asset/www/index.html", 2000);
on your HTML, javascript section:
function onDeviceReady()
{
cordova.exec(null, null, "SplashScreen", "hide", []);
window.MacAddress = new MacAddress();
window.MacAddress.getMacAddress(function(result){
database._mac_address = result.mac;
}, function(){
database._mac_address = '01:02:03:04:05:06';
});
}

I've implement better solution.
You can set your custom splashscreen and hide it with JS call after page have been loaded
https://github.com/inetstd/phonegap-android-custom-splashscreen/wiki