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

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 :)

Related

Disable JS Popup Script On Specific Page

[!Newbie alert!] I'm using a ecommerce platform that doesn't allow me to edit the source code. I can only add new codes (html, js or css) to try to do the modifications I want. And what I want to do is to find a way to disable the script of a newsletter popup on only one specific page. The only way I thought of doing it is adding an extra JS script limiting the action of the previous script that I am not allowed to edit. Is it possible to do?
The original script for de Newsletter Popup is this:
<script type="text/javascript">
$(function() {
iniciarModalNews();
});
function iniciarModalNews() {
if (!$.cookie('showModalNews')) {
showModalNews();
};
}
function showModalNews() {
$.fancybox.open({
type: 'html',
minWidth: 270,
maxWidth: 350,
content: $('#modalNewsletter'),
beforeClose: function() {
$.cookie('showModalNews', 'hide', {
expires: 1,
path: '/'
});
}
});
}
</script>
It runs on all pages of the website and I want to exclude just one page. Is there a way to do this?
Thanks
Full Disclosure: This suggestion would not be considered a best practice but if its a one-off scenario where you don't have access to the source code it'll work.
If you only need to disable this on one page and have access to insert a block of script below the declaration of showModalNews() { ... } you can override the showModalNews() function by writing a new function with the same name. The method that calls the showModalNews method is inside an closure via IIFE (https://developer.mozilla.org/en-US/docs/Glossary/IIFE) but the method showModalNews() is NOT wrapped in a closure which would give you access to override it.
Example of the overridden method
function showModalNews() { ; }

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.

Link to leanModal.js works fine in rendered by HTML link but not within React

I am using Lean Modal: http://leanmodal.finelysliced.com.au/ in a Rails app with a React front-end.
When I put the link to the modal in application.html.erb it works fine but when loaded through a React link using the same code, nothing happens.
I have jQuery loaded and checked 10 times if the code is the same. What could cause such an issue?
Here is the link code in React:
<a rel="leanModal" name="login" href="#login">
The template file (html.erb) script:
<script type="text/javascript">
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
});
And I am loading the modal JS from my application.js file in Rails.
Thanks for any help!
You should wrap things that interact with DOM (e.g. jQuery plugins) in a component.
var LeanModal = React.createClass({
componentDidMount: function(){
$(this.getDOMNode()).leanModal({
top: this.props.top || 200
});
},
render: function(){
return <div>{this.props.children}</div>;
}
});
Note that you also need to provide a componentWillUnmount to handle clean up, and that the plugin can't do things like add/remove elements. Plugins that don't allow cleanup or make destructive changes are incompatible with react.
Sometimes implementing it with just the existing CSS and using react components instead of the jQuery plugin can be very simple and end up with a better result.

remove jqueryui from dependencies

In my current project I'm using simple preloader for my report:
function hideLoading() {
var selectedEffect = "scale";
var options = { percent: 0 };
$("div#loading").hide(selectedEffect, options, 1000, function () {
$("div#fullsize").show();
});
}
$(window).load(function () {
setTimeout(hideLoading, 1000);
});
This gives me nice hiding effect, but because of this I must add jQueryUI.
Normally it's OK, but in this project I'm not using anything from jQueryUI.
I would like to remove it and have nice looking hide effect.
I was trying to use jquery.easing (http://gsgd.co.uk/sandbox/jquery/easing/) but without any luck.
This is sample to work with: http://jsbin.com/ukicac/1/
Not sure why you'd want to use JQueryUI for this. This can be done with JQuery easily.
Check the code here - http://jsbin.com/ukicac/8/
You can use this link for reference -http://api.jquery.com/category/effects/fading/
Hope this helps. Cheers !

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>

Categories

Resources