Develop Reference

the event deviceready isn't triggered on my apps

I'm trying to load a cordova plugin using vue.js, and vue-cordova.
I'm using vue-cordova, with the plugin open-native-settings to access to the settings of the device (ios or android).
This works just fine with the demo app provided by the vue-cordova plugin on github, but when i add it to my apps (the same way) the event seems to never trigger.
So i tried to wait for the event using
Vue.cordova.on('deviceready', () => {
// here check for your variable
})
or with
document.addEventListener('deviceready', deviceReady, false);
but since the event never trigger they are doing nothing.
I'm kinda lost on the way to get this event to be triggered, so i can load my plugin properly.
I'm a beginner using this so i might be missing something.
UPDATE
I'm loading vue-cordova in my main.js this way:
import VueCordova from 'vue-cordova'
Vue.use(VueCordova, {
optionTestKey: 'optionTestValue'
})
after that, i try to load the plugins in another view this way:
import Vue from 'vue'
//some code here
mounted: function() {
this.cloudyConnection();
this.lastUpdateDate = this.getLastUpdateDate();
if (this.cordova.deviceready === true) {
this.onDeviceReady()
}
},
I also tried to do it out of the mounted function and with the function listed above.
I also added the <script src="cordova.js"></script> in www/index.html as indicated by a--m but this doesn't do anything
I thank you all for the time you take to help me !

Reading from http://kartsims.github.io/vue-cordova/ troubleshooting section:
“My events don’t seem to be fired”
Cordova documentation isn’t obvious about it but you need to include the following script tag in your www/index.html.
<script src="cordova.js"></script>
Ensure that cordova.js is loaded before your scripts and vue-cordova since the last depends on that.

JS plug-in breaks other scripts when not required on page

I'm using a plug-in for my responsive navigation (http://responsive-nav.com). The plug-in works great, the problem I'm having is there is not navigation on every page. When this is the case I've noticed other javascript doesn't load and I get an error in reference to "responsive-nav.js":
Uncaught Error: The nav element you are trying to select doesn't exist
Here's how I load the script in the main.js file.
$(function(){
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
});;
The file is called on each page (/js/responsive-nav.js) but removing it doesn't resolve the issue, commenting out the code I've typed above does - so I'm guessing it's something to do with that?
Hope someone can help, cheers!

After speaking with the author of the plug-in he advised I just wrap the script in an 'if statement'.
Here's what we ending up using:
$(function(){
if ($(".site-nav__list").length) {
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
}
});
Simple. Works like a charm :)

Exit Intent function is working, but no modal is popping up as expected

I'm putting an exit intent feature on my wordpress website and am having an unusual problem.
After loading in the script via wp_enqueue_script in functions.php, I then put the below function in my scripts file. It pulled in just fine.
After I access inspect element in chrome the console is indeed printing 'ouibounce fired'. However, nothing afterwards is working and no modals are popping up.
Also, just to eliminate another possibility,styles for the below ouibounce have been loaded into my styles file.
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
timer: 1,
callback: function() {
console.log('ouibounce fired!');
}
});
body.on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});
Thanks for your help in advance!

Well I figured it out.
My filewatcher on my styles file was not compiling due to a sass-cache file. I restarted my editor and it worked just fine.

How to use Phonegap SoftKeyboard Plugin for Android?

I am developing an Android application using Phonegap. I need to make the softkeyboard appear programatically. I am using the SoftKeyboard plugin which is found here. Can anyone tell me how to properly include this plugin & make it work? I have tried the tutorial found on the Phonegap Wiki, but the plugin is not working.
[Update] I have added the plugin to the path
com/zenexity/SoftKeyBoardPlugin/SoftKeyBoard.java
Updated plugins.xml and included
<plugin name="SoftKeyBoard" value="com.zenexity.SoftKeyBoardPlugin.SoftKeyBoard"/>
Then in the www folder added softkeyboard.js, and the following in index.html
plugins.SoftKeyBoard.show(function () {
// success
},function () {
// fail
});
But nothing happens, the keyboard is not displaying..

This is how I got SoftKeyBoard working in my application.
DroidGap Side
create /src/com/phonegap/plugins/SoftKeyboard with provided file SoftKeyBoard.java inside
add to /res/xml/plugins.xml:
< plugin name="SoftKeyBoard" value="com.phonegap.plugins.SoftKeyboard.SoftKeyBoard" />
/assets/www Side
add provided file softkeyboard.js to /assets/www/js
add to index.html in the head where your other javascripts are included after you have included the phonegap javascript:
< script type="text/javascript" charset="utf-8" src="js/softkeyboard.js"></script>
You can then call the following if you are on device or using something like Ripple:
window.plugins.SoftKeyBoard.show(function () {
// success
},function () {
// fail
});
or something like this if you want to make sure the namespace is available, which will prevent undefined problems:
((((window || {}).plugins || {}).SoftKeyBoard || {}).show || function(){})();
I think maybe where you went wrong was not including the js/softkeyboard.js in your head of index.html.
Hope this helps you

For the latest version of PhoneGap (Apache Cordova 2.1.0) I had to do the following:
Installed these plugin sources which reflected the project name change:
https://github.com/originalgremlin/phonegap-plugins/tree/master/Android/SoftKeyboard
Copy softkeyboard.js to your javascript library directory.
Copy SoftKeyBoard.java to src/org/apache/cordova/plugins/SoftKeyBoard.java
Put this in your HTML file, after including the cordova.js file:
<script src="/path/to/javascripts/softkeyboard.js"></script>
Add this to the bottom of the res/xml/config.xml plugins section:
<plugin name="SoftKeyBoard" value="org.apache.cordova.plugins.SoftKeyBoard" />
Now, assuming this HTML:
<button id="keyboard">Toggle Keyboard</button>
This jQuery should do something useful:
var softkeyboard = window.cordova.plugins.SoftKeyBoard;
$('#keyboard').toggle(softkeyboard.show, softkeyboard.hide);

Try it like this:
SoftKeyBoard.show(function () {
// success
},function () {
// fail
});
The code in the JS file does not put it in the "plugins" namespace.
Orjust use the PhoneGap plugins full namespace:
window.plugins.SoftKeyBoard.show(function () {
// success
},function () {
// fail
});

Cordova 3.0 + JQM 1.3.2: Changing "fullscreen" to "false" in config.xml fixed the "adjustPan" and prevented my inputs from being covered when the keyboard displayed. However, blur() would not close the keyboard and this plugin worked wonderfully.
For the almost latest version of phonegap:
Add SoftKeyBoard.java to your app package in src
Add softkeyboard.js to assets/www
Update config.xml with:
<feature name="SoftKeyBoard"><param name="android-package" value="com.yourAppPackage" /></feature>
Call your plugin: plugins.SoftKeyBoard.hide(function() {//success }, function() {//fail });

go through the link. here is the full project:--
SoftKeyboardPlugin by Simon McDonald

How to determine when fancybox is open?

I need to know that fancybox has been open up that to allow or deny another function to start.
Build-in functions Fancybox like 'onStart' or 'onClosed' not work.
I'm talking about version 1.3.0 RC2

$.fancybox.isOpen (bool) indicates, whether fancybox is open.

The version your using apparently doesn't match the documentation; I looked at the source and saw the names of the options were different the the online docs. I just tested the following with 1.3RC2:
$(document).ready(function() {
function myStartFunction() { alert('fancy box opened'); }
$("a#inline").fancybox({
'onStart': myStartFunction
});
});
The option you're looking for is 'onStart' - the alert in myStartFunction goes off every time I open a box. I'm not sure when they changed the option but you can look at the source of any version you use at the bottom, and see what the option should be called.
EDIT
I just double checked on v1.2.5 - the version I use - and the callbacks are indeed named different. callbackOnStart works with 1.25 but, as I said, not 1.3

Try to use methods
beforeLoad, // Before loading
afterLoad, // After loading
beforeShow, // Before changing in current item
afterShow, // After opening
This code work fine
$(".fancybox").fancybox({beforeShow:function(){alert('blah');}});

If you're looking for a way to determine whether fancybox is open or not (instead of an event that is fired upon opening fancybox) then as of fancybox v2 you can use the $.fancybox.isOpen property. It's not documented (at least I didn't find any reference) but it works.
Example:
if(!$.fancybox.isOpen) {
$.fancybox.open({
href: '#newsletter-campaign-popup',
height: 385,
width: 510,
type: 'inline'
});
}
The example above prevents opening a second fancybox if one is already open.

I'm not sure what you mean by built-in functions. Fancybox has callbacks which call user-defined functions (that you must make yourself).
Like:
function myClose()
{
alert('close');
}
function myStart()
{
alert('start');
}
$("a#single_image").fancybox({
'callbackOnClose': myClose,
'callbackOnStart': myStart
// etc, etc..
});
Alternatively you could check the fancy_content div to see if it has anything inside.
(if it has, then fancybox is open).
if ( $('#fancy_content:empty').length > 0 )
{
// Is empty
}

this seems to work for me:
isLoaded : function(){
return $('#fancybox-content').html()!='';
}

If you have multiple div's that you are using for fancybox, following code might be better and more universal solution:
if ($('.fancybox-opened').length == 0) {
//there is no fancybox opened at all
}
Note also that fancybox content might not be always empty, even if fancybox is closed.

Answer for 2018 December.
if ($('.fancybox-content').length == 0) {
//there is no fancybox opened at all
}
Details:
function checkf()
{
if ($('.fancybox-content').length == 0) {
alert('there is no fancybox opened at all.');
}
else
{
alert('there is a fancybox opened.');
}
}
$("#ffbox").click(function()
{
setTimeout(checkf,1000);
});
checkf();
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/#fancyapps/fancybox#3.5.2/dist/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/#fancyapps/fancybox#3.5.2/dist/jquery.fancybox.min.js"></script>
</head>
<body>
<a data-fancybox data-options='{"iframe" : {"css" : {"width" : "80%", "height" : "80%"}}}' href="https://www.google.com/maps/search/?api=1&query=China" class="btn btn-primary" id="ffbox">Display Google Map</a>
</body>