We Keep Coding

Swiper slider add class to active slide when attribute in HTML is set

I want to add class to navbar when active slide has got attribute set for example "navbar-dark". I tried with class but my function doesn't work perfect. It is when I changed slide the class was adding to the second slide not to first slide.
$(document).ready(function () {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: false,
mousewheel: {
invert: false,
},
});
mySwiper.on('slideChange', function (realIndex) {
if ($('.swiper-slide.swiper-slide-active').hasClass('dark')) {
$('#navbar').addClass('darknav')
} else {
$('#navbar').removeClass('darknav');
}
});
});

I googled for "swiper jQuery plugin", opened the first suggested page and went to the API.
And there's the Events section, and there's the .on init method. Let's try it
jQuery(function($) {
function darkNav() {
//if ( $('.swiper-slide.swiper-slide-active').hasClass('dark') ) { // `this` rather?
if ( $(this).find('.swiper-slide-active').hasClass('dark') ) {
$('#navbar').addClass('darknav')
} else {
$('#navbar').removeClass('darknav');
}
}
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: false,
mousewheel: {
invert: false,
},
on: {
init: darkNav, // do also on init
slideChange: darkNav // is this needed?
}
});
});
Also, instead of $('.swiper-slide.swiper-slide-active').hasClass('dark') you could rather try with $(this).find('.swiper-slide-active').hasClass('dark')

Loading javascript after AJAX load

I have a woocommerce site that uses light-box products with AJAX filters.
To access the light box a quick-view button appears when you hover over the product.
When I load an AJAX filter the light-box quick-view button is no longer clickable.
I need to add the code to the button after the AJAX load.
Below is the function that the theme uses.
85: function(t, e) {
"use strict";
Flatsome.behavior("quick-view", {
attach: function(t) {
jQuery(".quick-view", t).each(function(t, e) {
jQuery(e).hasClass("quick-view-added") || (jQuery(e).click(function(t) {
if ("" != jQuery(this).attr("data-prod")) {
jQuery(this).parent().parent().addClass("processing");
var e = jQuery(this).attr("data-prod"),
i = {
action: "flatsome_quickview",
product: e
};
jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
jQuery(".processing").removeClass("processing"), jQuery.magnificPopup.open({
removalDelay: 300,
closeBtnInside: !0,
autoFocusLast: !1,
items: {
src: '<div class="product-lightbox lightbox-content">' + t + "</div>",
type: "inline"
}
}), setTimeout(function() {
jQuery(".product-lightbox").imagesLoaded(function() {
jQuery(".product-lightbox .slider").flickity({
cellAlign: "left",
wrapAround: !0,
autoPlay: !1,
prevNextButtons: !0,
adaptiveHeight: !0,
imagesLoaded: !0,
dragThreshold: 15
})
})
}, 300), jQuery(".product-lightbox form").hasClass("variations_form") && jQuery(".product-lightbox form.variations_form").wc_variation_form(), jQuery(".product-lightbox form.variations_form").on("show_variation", function(t, e) {
e.image.src ? (jQuery(".product-lightbox .product-gallery-slider .slide.first img").attr("src", e.image.src).attr("srcset", ""), jQuery(".product-lightbox .product-gallery-slider .slide.first a").attr("href", e.image_link), jQuery(".product-lightbox .product-gallery-slider").flickity("select", 0)) : e.image_src && (jQuery(".product-lightbox .product-gallery-slider .slide.first img").attr("src", e.image_src).attr("srcset", ""), jQuery(".product-lightbox .product-gallery-slider .slide.first a").attr("href", e.image_link), jQuery(".product-lightbox .product-gallery-slider").flickity("select", 0))
}), jQuery(".product-lightbox .quantity").addQty()
}), t.preventDefault()
}
}), jQuery(e).addClass("quick-view-added"))
})
}
})
}

If you can edit the theme, write the code directly into the success callback:
jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
// Code you want to run
// Other code. i.e. jQuery(".processing").removeClass ... etc.
});
Or define the function and call it inside your success() callback.
var myFunction = function() {
// Code to run after success
}
jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
myFunction();
// Other code
});

How to use events with bodymovin.js

Apologies in advance for my ignorance as I suspect this is a very easy question to answer, but I'm stuck.
I'm using bodymovin to play an svg animation on a website. I want to use the onComplete event to trigger a function when the animation completes, but I can't figure out how to code it.
I've tried
$("#bodymovin").on("onComplete", function(){
console.log('test completed');
});
And
document.getElementById("bodymovin").addEventListener("complete", doalert);
function doalert() {
console.log('test completed');
}
Bodymovin docs - https://github.com/bodymovin/bodymovin#events

I figured it out. Here is the entire code
var anim;
var animData = {
container: document.getElementById('bodymovin'),
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'thelogo.json'
};
anim = bodymovin.loadAnimation(animData);
anim.addEventListener('complete',doalert);
function doalert() {
console.log('test completed');
}

var animData = {
container: document.getElementById('bodymovin'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'folder_path/data.json'
};
var anim = bodymovin.loadAnimation(animData);
// function for DOM Loading
anim.addEventListener('DOMLoaded', function(e) {
console.log('DOM loaded');
});
// function for Completion of animation
anim.addEventListener('complete', test_complete);
function test_complete() {
console.log('test completed');
}
// function for certain frame
anim.addEventListener('enterFrame',enterframe);
function enterframe() {
console.log('In Frame');
}
//function for Mouse Enter for bodymovin
anim.addEventListener('DOMLoaded', function(e) {
var elem = document.getElementById('bodymovin');
elem.addEventListener('mouseover', mouseElem)
function mouseElem() {
anim.goToAndStop(1, true);
}
});

Fancyapps overlay not showing

We are loading fancybox css file dynamically after page load and try to open fancybox with overlay active and custom html content.
Sometimes overlay doesn't appear. If we try to open fancybox with a delay, probability of getting no overlay is decreasing, but it is not totally gone away.
I have already created an issue for this problem: https://github.com/fancyapps/fancyBox/issues/1126
That's how we initialize fancybox:
var fancyboxParams = {
minHeight: 10,
width: params.width || 'auto',
height: params.height || 'auto',
autoSize: false,
autoWidth: params.width ? false : true,
autoHeight: params.height ? false : true,
autoHide: params.autoHide,
topRatio: params.topRatio || topRatio,
leftRatio: params.leftRatio || leftRatio,
title: title,
helpers: {
title: (title && params.windowStyle !== 'seamless') ? {
type: 'inside',
position: 'top'
} : null,
overlay: (params.overlay != "false") ? {} : null
},
content: notificationBody,
fixed: false, // HADDITION - scroll with the page 16.10.2015
wrapCSS: (params.cssClass || "") + " " + "fancybox-" + (params.windowStyle || "seamless"),
beforeShow: function () {
cssCode && $('<style />').html(params.cssCode).prependTo(this.outer);
try {
javascriptCode && eval(javascriptCode);
beforeShow.call(this); // change context
}
catch (err) {
$.fancybox.close(true);
}
},
afterClose: function () {
$(".fancybox-segmentify").remove();
}
};
if (params.isModal == 'true') {
fancyboxParams.closeBtn = false;
fancyboxParams.closeClick = false;
fancyboxParams.keys = null;
if (fancyboxParams.helpers.overlay) {
fancyboxParams.helpers.overlay.closeClick = false;
}
}
$.fancybox(fancyboxParams);

Script that calls a jquery function before the library load

I have problems with a Jquery function.
I get the jquery library from google.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
First, I put the following the code on a .js
(function($){
jQuery.fn.jConfirmAction = function (options) {
var theOptions = jQuery.extend ({
question: "Are You Sure ?",
yesAnswer: "Yes",
cancelAnswer: "Cancel"
}, options);
return this.each (function () {
$(this).bind('click', function(e) {
var submitBtn = $(this);
if($(this).attr("jconfirmed")){
submitBtn.removeAttr("jconfirmed");
}else{
e.preventDefault();
thisHref = $(this).attr('href');
var btns = {};
btns[theOptions.yesAnswer]=function() {
$( this ).dialog( "close" );
if (thisHref!=null){
window.location = thisHref;
}else{
submitBtn.attr("jconfirmed", true);
submitBtn.click();
}
};
btns[theOptions.cancelAnswer]=function() {
$( this ).dialog( "close" );
submitBtn.removeAttr("jconfirmed");
};
var content='<p>'+theOptions.question+'</p>';
if(theOptions.checkboxText!=undefined){
content='<p>'+'<input type="checkbox" id="cbox">'+theOptions.checkboxText+'<br/><br/>'+theOptions.question+'</p>';
}
$('#dialog-confirm').html(content);
$('#cbox').click(function() {
/*
if($('#cbox').attr("checked")){
$('.ui-dialog-buttonset button:first-child').show();
}else{
$('.ui-dialog-buttonset button:first-child').hide();
}
*/
});
$('#dialog-confirm').dialog({
resizable: false,
modal: true,
buttons: btns,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
draggable: false,
dialogClass: 'main-dialog-class'
});
}
});
});
};
})(jQuery);
And, in a jsp file call the function.
<script type="text/javascript">
$(document).ready(function() {
$('.confirm').jConfirmAction();
});
</script>
But i have the following error in console:
Uncaught TypeError: Object [object Object] has no method 'jConfirmAction'
I tried to fix this by putting the function code in the same jsp, between <script type="text/javascript"></script>. That works for some pages, but in others pages have the same error. Is there a way to call the function only if jquery has been loaded?

Wrap your entire JS code with document.ready()
$(document).ready(function () {
(function ($) {
jQuery.fn.jConfirmAction = function (options) {
var theOptions = jQuery.extend({
question: "Are You Sure ?",
yesAnswer: "Yes",
cancelAnswer: "Cancel"
}, options);
return this.each(function () {
$(this).bind('click', function (e) {
var submitBtn = $(this);
if ($(this).attr("jconfirmed")) {
submitBtn.removeAttr("jconfirmed");
} else {
e.preventDefault();
thisHref = $(this).attr('href');
var btns = {};
btns[theOptions.yesAnswer] = function () {
$(this).dialog("close");
if (thisHref !== null) {
window.location = thisHref;
} else {
submitBtn.attr("jconfirmed", true);
submitBtn.click();
}
};
btns[theOptions.cancelAnswer] = function () {
$(this).dialog("close");
submitBtn.removeAttr("jconfirmed");
};
var content = '<p>' + theOptions.question + '</p>';
if (theOptions.checkboxText !== undefined) {
content = '<p>' + '<input type="checkbox" id="cbox">' + theOptions.checkboxText + '<br/><br/>' + theOptions.question + '</p>';
}
$('#dialog-confirm').html(content);
$('#cbox').click(function () {
/*
if($('#cbox').attr("checked")){
$('.ui-dialog-buttonset button:first-child').show();
}else{
$('.ui-dialog-buttonset button:first-child').hide();
}
*/
});
$('#dialog-confirm').dialog({
resizable: false,
modal: true,
buttons: btns,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
draggable: false,
dialogClass: 'main-dialog-class'
});
}
});
});
};
})(jQuery);
});
Include all your JS files at the end of the file and try again, and one side note ? use '!==' to compare variables with 'null' and 'undefined'