I am trying to make a battery app that animates the battery level from 0% to the current level as an animation with Jquery.
It is working, BUT.. when my app is loaded, after the splash screen is done, and cordova has loaded aswell, the animation is almost finished. The only reason that i know this is because i set the animation to 5 seconds.
I want to make it so that, the animtion starts when the app is loaded.
I am not sure if this "state" im refering to has a direct event name or so. So i am sorry if i am unable to describe it with the real words. :-)
Consider the following piece of code:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.addEventListener("batterystatus", onBatteryStatus, false);
}
function onBatteryStatus(info) {
$("div#status").animate({ width: bat + "%" }, 5000);
}
You might want to consider using the PhoneGap Splashscreen functionality :
PhoneGap Splash Screen API Doc
You should call your splash screen on the Java side of things (DroidGap) and let PhoneGap do it's own job in the background while the Splash screen is being displayed. This blogpost which includes relevant code should help you with your problem :
Splash Screens in PhoneGap
What should now happen is PhoneGap will load and then your splash screen will be displayed in full. Hope this fixes your problem!!
It looks like you are going in the right directions from what i can see. Here's how my base Cordova project is uaully setup.
Javascript
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// `load`, `deviceready`, `offline`, and `online`.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of `this` is the event. In order to call the `receivedEvent`
// function, we must explicity call `app.receivedEvent(...);`
onDeviceReady: function() {
// Get battery status HERE
}
};
And then in my "index.html" i initialize my app class like so:
<script type="text/javascript">
app.initialize();
</script>
You could try cordova-jquerymobile-boilerplate. You should start your work with a boilerplate, it will make you go fast and safe.
Related
I'm trying to load Admob interstitials programmatically in a Phonegap app.
I'm using a plugin that I found on Github:
https://github.com/admob-google/admob-phonegap
I built a test app with the example html provided in the repo. The only problem is that I want to be able to cache the interstitial and load it programmatically. The example uses buttons to trigger the Javascript.
I did get the ads to work in the app, but only by pressing the buttons. I would like to trigger the interstitial on Game Over in a HTML 5 game. No user interaction required.
This is what I've tried:
function onLoad(){
admob.cacheInterstitial();
document.addEventListener('deviceready',onDeviceReady, false);
}
function onDeviceReady() {
showInterstitial();
}
<body onload="onLoad();">
However, it doesn't work. I admit Javascript isn't my strong point and have a much easier time with Objective-C and Swift.
Maybe someone better at Javascript than me can point me in the right direction on how to trigger these functions admob.cacheInterstitial(); and showInterstitial(); programmatically.
Here is the full example HTML I am using:
https://github.com/admob-google/admob-phonegap/blob/master/Example/index.html
Consider use this plugin: https://github.com/appfeel/admob-google-cordova
The use is very simple! I actually use in my game and it works perfectly!
You just need to include the follow code:
function onDeviceReady() {
document.removeEventListener('deviceready', onDeviceReady, false);
// Set AdMobAds options:
admob.setOptions({
publisherId: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB", // Required
interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII", // Optional
tappxShare: 0.5, // Optional
autoShowInterstitial: false
});
// Request interstitial (will present automatically when autoShowInterstitial is set to true, that's why we set to false! so we can call when we want!)
admob.requestInterstitialAd();
}
document.addEventListener("deviceready", onDeviceReady, false);
And inside your gameOver function, you just use the follow code to call the interstitial ad
admob.showInterstitialAd();
*UPD: Using your plugin, try to use a bool and show this function, maybe like this:
function onDeviceReady() {
if(boolGameOver){
showInterstitial();
boolGameOver = false;
}
}
And in your gameOverFunction, call onDeviceReady function, after you set boolGameOver to true!
The plugin de.appplant.cordova.plugin.background-mode (which can be found on github at: https://github.com/katzer/cordova-plugin-background-mode) is not activating correctly inside of my application. Here is the code I am running in my index.js:
document.addEventListener('deviceready', function () {
// Android customization
cordova.plugins.backgroundMode.setDefaults({ text:'Doing heavy tasks.'});
// Enable background mode
cordova.plugins.backgroundMode.enable();
// Called when background mode has been activated
cordova.plugins.backgroundMode.onactivate = function () {
setTimeout(function () {
alert('activated')
// Modify the currently displayed notification
cordova.plugins.backgroundMode.configure({
text:'Running in background for more than 5s now.'
});
}, 5000);
}
}, false);
cordova.plugins.backgroundMode.enable();
However, when I run it, the alert('activated') does not trigger. How can I fix this? I have my code up on github # https://github.com/acquainting/Cordova-Test.
Thanks!
#Rob,
it appears you are new to programming, or phonegap, or both. Your statements in your original message are conflicting. The statements conflict with each other. I suggest, in future, you use a linear time-line for explanation.
I do NOT use Phonegap CLI. However, after looking at your source code, you need to add a phonegap verion.
EXAMPLE:
<preference name="phonegap-version" value="3.5.0" />
Best of Luck,
Jesse
I have Cordova and Ionic based mobile application. On the default page which is loaded after the start of the application is need to work with SQLLite plugin.
https://github.com/brodysoft/Cordova-SQLitePlugin
Problem is that view contains
ng-init="setData()"
Which is calling the controller method where is worked with SQL Lite plugin. And because of the the method is called before the deviceready event is not initialized (plugin can be initialized only after deviceready event).
So I tried this workaround:
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
db = window.sqlitePlugin.openDatabase({name:"callplanner"});
}
But this not working for me.
So i tried second solution:
.factory('cordova', function () {
return {
test: function(){
document.addEventListener("deviceready", this.ready, false);
},
ready: function(){
alert("Ready");
db = window.sqlitePlugin.openDatabase({name:"callplanner"});
}
}
})
and in controller init i tried:
cordova.test();
But this is not working to (devicereadfy is fired after ng-init).
After that i found this article:
http://java.dzone.com/articles/ionic-and-cordovas-deviceready
But i did not understand how to put "splash screen" before app is ready and how to set timeout.
Have somebody idea how can I solve this problem?
Many Thanks for any advice or help.
You need to invert this, first you handle the cordova "deviceready" event and then you start the angularjs app. Like this:
First remove the the ng-app attribute from the html/body tag
Start the angular app after the devireready:
<script>
document.addEventListener('deviceready', function() {
angular.bootstrap(document, ['YourAppName']);
}, false);
var YourAppName = angular.module('YourAppName', []);
</script>
Similar questions:
Cordova + Angularjs + Device Ready
Initialize my angularJs App after Phonegap deviceready
I couldn't make it work with the #t4deu solution, because my ng-app tag was in the body, so I leave a little change in case that it helps to someone.
<script>
document.addEventListener('deviceready', function() {
angular.bootstrap(document.querySelector('body'), ['starter']);
}, false);
</script>
I was recently trying my best to create a Kik app that dynamically loaded some content -- messages -- into a textbox when the app launched. document.onload wasn't doing it for me. I tried JQuery's $(document).ready and $(window).load to no avail.
Simple code snippets like this were failing, and I couldn't understand why. They would refuse to function until I attempted to interact with another UI element, resized the screen by rotating my phone, etc...
$(document).ready(function() {
kik.getUser(function(user) {
$('#myDiv').html(user.username);
});
}
This was pretty infuriating... why could I not get Kik to do both in-getUser functions and regular onLoad ones?
Don't ask me why, but this works. I'm just going to assume that you CANNOT wrap kik.getUser in a $(document).ready statement!
But who cares -- if kik.getUser works, then you already have access to the DOM. Cheers!
// Kik user-specific JS
if(kik.utils.platform.browser.kik) {
kik.getUser(function (user) { if ( user ) {
$('#message').html("I work now.");
}});
});
// Kik-agnostic JS
$(document).ready(function() {
$('#version').html("I work now too.");
});
I'm developing a JQM theme using single pages. I also have a side bar / panel that is built as a seperate html file. This panel is imported into the JQM page using the following JS;
/* Creates the functionality to open the left side panel with a swipe */
$(document).one("pagebeforecreate", function () {
$.get('left-panel.html', function(data){
$.mobile.pageContainer.prepend(data);
$("[data-role=panel]").panel().enhanceWithin(); // initialize panel
}, "html");
});
Ive got this script in a js file that is loaded at the foot of every page, since users of the 'mobile site' could enter via any page.
Ive noticed via Firebug that an instance of the panel seems to be added with every page I navigate to. So if I visit 3 pages, the panel will be loaded 3 times, 4pages = 4 panels, etc.
It's fair to say I'm fairly novice at JQ & JQM, but I was under the impression that the use of
$(document).one
meant the event only occurred once per page, and would therefore prevent the issue I have.
IF you can help me work out how I can prevent this issue, I'd really appreciate it.
The pagebeforecreate event will emit on each and every page, but only ONCE. If you have 5 pages in one HTML file (Multi-Page Model), that event will fire 5 times before creating/showing the target page.
This event can't be delegated to a specific page, e.g. the below code won't work.
$(document).on("pagebeforecreate", "#pageX", function (event) {
/* do something to pageX */
});
unlike pagecreate which can be delegated to a specific page.
$(document).on("pagecreate", "#pageX", function (event) {
/* use it to add listeners */
});
However, you can obtain an object of that page which is being created.
$(document).on("pagebeforecreate", function (event) {
var page = event.target.id;
if ( page == "pageX") {
/* do something to pageX */
}
});
Why .one()?
Since pagebeforecreate can't be delegated and it fires on each page, using .one() will run code once only. However, if you repeat the same code using .one() that code will be executed it again.
Altenative approaches:
Check whether panel is added before adding it.
$(document).one('pagebeforecreate', function () {
var panelDOM = $("[data-role=panel]").length;
if (panelDOM === 0) {
/* add panel */
} else {
/* nothing */
}
});
Demo
Use mobileinit as it fires once per document/framework. This event fires before loading jQM, so you will need to enhance/_initialize_ panel after loading jQM.
<script src="jquery-1.9.1.min.js"></script>
<script>
/* inject panel */
$(document).on("mobileinit", function() {
var panel = '<div>panel</div>';
$("body").prepend(panel);
});
</script>
<script src="jquery.mobile-1.4.2.min.js"></script>
<script>
/* initialize it */
$(function() {
$("[data-role=panel]").panel().enhanceWithin();
});
</script>
Demo