Plugin not triggered in cordova/phonegap application - javascript

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

Related

Why shake event not working in phonegap?

I added shake gesture plugin for my project.
This is my code:
<button onclick="myFunc()" id="round">Gesture Call</buttom>
<script>
function myFunction()
{
window.open("emcall.html");
navigator.vibrate([2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000]);
navigator.notification.beep(10);
}
function myFunc()
{
alert('shake working');
function onShake()
{
alert("shake success");
window.open("emcall.html");
}
function onError()
{
alert("errorq");
}
shake.startWatch(onShake,30,onError);
}
</script>
Some thing wrong in mycode help me to over come this.
Include cordova.js file in your HTML file and register deviceready event in your script. Then, invoke shake plugin related code inside deviceready event listener function. It should work.
Also ensure to test it on device after adding and building platform as i dont see this shake plugin supported in browser.
->Plugin not supporting in phonegap.app,who are all testing the app using you ip address on phonegap app.
->just add platform through cli.
->And build or run it and test .

View won't load JS in Rails 4 application on page change

Bear with me as I'm rather new to Rails and have very little experience with JS.
I purchased a Bootstrap theme for my rails app and I'm running into an issue with the JS written. It's not loading various scripts due to turbolinks but I have no idea on how to resolve this. Here's the JS file that came with the theme.
Theme.JS file:
(function ($) {
"use strict";
$(window).load(function () {
// ----------------------------------------------------------------------------------------------------------------------->
// SITE LOADER ||-----------
// ----------------------------------------------------------------------------------------------------------------------->
$('#loader').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
$('body').delay(350).css({ 'overflow': 'visible' });
})
// ---------------------------------------------------------------------------------------------------------------------------->
// GENERAL SCRIPTS FOR ALL PAGES ||-----------
// ---------------------------------------------------------------------------------------------------------------------------->
$(document).ready(function () {
openSite();
});
function openSite() {
fullScreenSlider();
header();
scroll();
winResize();
pushmenu();
pluginElement();
sliderHero();
sliderAll();
containerGridMasonry();
scrollCallbackEle();
shortcodeElements();
};
// ---------------------------------------------------------------------------------------------------------------------------->
// RESIZE FUNCTIONS ||-----------
// ---------------------------------------------------------------------------------------------------------------------------->
function winResize() {
$(window).resize(function () {
})
};
})(jQuery);
I've messed around with
$(document).on('ready page:change', function(){
fullScreenSlider();
header();
scroll();
winResize();
pushmenu();
pluginElement();
sliderHero();
sliderAll();
containerGridMasonry();
scrollCallbackEle();
shortcodeElements();
});`
As well as just running page:load around the OpenSite function around just the Jquery part, around all the functions. I'm really at a loss here, not sure what I'm doing wrong. I've used the turbolinks Gem and I thought that had it fixed but after a page reload only a couple things work on the page.
Here's a list of functions that seem to work after clicking a link that changes the view.
header()
sliderAll()
skillsProgressBar()
accordion()
accordion() is intermittent and I have no idea why it works when nothing else is working. It never really worked but started working when everything else broke.
Any ideas would be most appreciated. I'm probably doing plenty wrong here but, like I said, I'm new and taking a class on this but we are almost at the end of the semester and haven't even covered Gems.
PS. I know I need to have the functions run off of a page change rather than document.ready but I have been trying to figure it out for almost a week to no avail.
There's also a jquery rails gem that fixes some of the things. But the easiest solution is to probably just remove turbolinks.

GSAP TweenLite not animating basic quickstart example

I'm trying to get started with GSAP, but can't seem to get anything working yet. I've included TweenLite, the Easing and CSS plugins, and have very basic code, but I can't seem to get anything running. Here is my main javascript:
window.onLoad = function(){
var logo = document.getElementById("logo");
TweenLite.to(logo, 1, {
left: "632px",
onComplete: function(){
console.log("completed anim");
}
});
}
You can see a running example at deconfigured.com (at the time of this post, it's on a personal server. I'll transfer it over to a jsfiddle after I make sure that my server software isn't the cause of the issue).
The console log never appears on my browser (latest firefox).
Is it just a silly error? Any help would be tremendous.
Try window.onload, without caps: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload

Toastr doesn't fire when using options

I'm trying to use toastr js library.
I included toastr.js, toastr.css and toastr-responsive.css
This works:
toastr.info("Hello world");
But this doesn't work. And I don't get any error in browser console:
toastr.options.positionClass = "toast-top-full-width";
toastr.info("Hello world");
What would be the cause?
Create a fiddle and show me what you are doing.
UPDATE:
You should not link to the raw css and javascript in github. Those are not CDNs, so they are not set up to serve the code. You should pull the code down for your project or use NuGet in Visual Studio.
For example, this works fine if you copy the CSS into the JsFiddle CSS window like this:
http://jsfiddle.net/7Ucj9/10/
And to be complete, here is the minor code change I made ... but it had nothing to do with it
$(function () {
toastr.info("Are you the 6 fingered man?");
$("#foo1").click(function () {
alert("test");
});
$("#foo2").click(function () {
toastr.info("Are you the 6 fingered man?");
console.log("hello");
});
});

Phonegap when app is loaded completly

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.

Categories