Develop Reference

Cordova inAppBrowser InsertCSS doesn't works

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.

javascript suspends until webview closes?

I am writing some web app that runs inside android WebView. The WebView is inside some simple Activity class that I open from the app's main menu. The html file and js files are local files. I'm testing on Asus Transformer TF300, OS 4.1.1.
The WebView loads the html file and a second later calls loadUrl('javascript:start()'); which performs:
console.log("hello");
setTimeout("console.log('world');", 1000);
When I run it, only "hello" shows up in logcat.
When I close the activity (it has a close button), I suddenly can see "world" in logcat.
It is as if the js suspended itself until I caused the WebView to close...
Any idea why this happens and how to get the code to run?
Note I tried all kinds of stuff like changing the js code to:
var func = function() { console.log("world"); };
setTimeout(myfunc, 1000);
or:
setTimeout(function() { console.log("world"); }, 1000);
But it didn't help..
thanks.

how to disable the page in jquery mobile

Hi I am using jquery mobile in my android phonegap application.I am showing the loader in the onload using jquery mobile and when loader is running,i can able to type in the textbox in the html page.But my need is when loader is running i should not able to type in the textbox.How to solve this problem
Here is my code:
$(document).ready(function ()
{
$.mobile.loading('show', {
text: 'Loading',
textVisible: true,
theme: 'a',
html:""
});
});
Please Kindly help me.Thanks in Advance.

you could display a splash page first during loading and then switch to your main page...
and: don't use $(document).ready(), see here
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.

Black screen for Android app

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", [])
}

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.