Develop Reference

Why is this line of JavaScript showing in the wrong spot?

I am building a website that has some parallax on the site. Below is what the console says is in the javascript file. I keep getting cannot read data destroy property, because the program has nothing to delete. The picture at the bottom is what I wrote vs what showed up? This is bootstrap studio and I was wondering if anyone has had this problem before?
window.addEventListener("resize", colReset);
let col = document.querySelectorAll(".col-xxl-6");
function colReset() {
window.matchMedia("(min-width: 992px)").matches ? VanillaTilt.init(col, {
max: 15,
speed: 400,
perspective: 750,
scale: 1.005
}) : col.vanillaTilt.destroy()
}
VanillaTilt.init(col, {
max: 15,
speed: 400,
perspective: 750,
scale: 1.005
});

Noty example with velocity - velocity() undefined

I am trying to use this example from Noty's site: http://ned.im/noty/animations.bouncejs.html
I have installed noty.js and its CSS counter part. And I also have downloaded velocity.js and have it linked properly in my site. I know it is linked properly because I can use JQuery to select an element and perform a function on it that is provided by velocity:
$("table").velocity("fadeOut", {
duration: 3500
});
The example that is provided on the noty site though uses a call formatted like this:
new Noty({
text: 'NOTY - animating with velocity!',
animation: {
open: function () {
var n = this;
Velocity(n.barDom, {
left: 450,
scaleY: 2
}, {
duration: 0
});
Velocity(n.barDom, {
left: 0,
scaleY: 1
}, {
easing: [ 8, 8 ]
});
},
It calls it by using Velocity(... when I put this code into my page it errors and using the chrome F12 it says it is undefined. What am I missing from the example? The example for bounce works but I don't like the movement as much.

With the help of the developer we found an issue with the declaration on his site. Velocity doesn't work the way it is called in the question. It needs to be declared with $.Velocity with the current version of NOTY & Velocity
new Noty({
text: 'NOTY - animating with velocity!',
animation: {
open: function () {
var n = this;
$.Velocity(n.barDom, {
left: 450,
scaleY: 2
}, {
duration: 0
});
$.Velocity(n.barDom, {
left: 0,
scaleY: 1
}, {
easing: [ 8, 8 ]
});
},

Change object value in javascript from another file

I am using this code
$.fn.lightbox.defaults = {
adminBarHeight:28,
overlayOpacity: 0.8,
borderSize: 10,
imageArray: new Array,
activeImage: null,
inprogress: false, //this is an internal state variable. don't touch.
widthCurrent: 250,
heightCurrent: 250,
xScale: 1,
yScale: 1,
displayTitle: true,
disableNavbarLinks: true,
loopImages: true,
imageClickClose: true,
jsonData: null,
jsonDataParser: null,
followScroll: false,
isIE8: false //toyNN:internal value only
};
When I adjust borderSize I get the effect I want however I need to be able to adjust this from another script rather than just changing the value above because I need to leave the code above unchanged as it may be overwritten during updates. How can I do this
I tried
$.fn.lightbox.defaults[borderSize] = 0;
but it had no effect.
The code is from WP Lightbox 2.

It's:
$.fn.lightbox.defaults['borderSize']

$.fn.lightbox.defaults['borderSize'] = 0;
or
$.fn.lightbox.defaults.borderSize = 0;
And ensure that this script is loaded after

Reverse direction of Kendo UI Linear Gauge

Using a Kendo UI Datawiz component (Linear gauge) in my project. It's supposed to be an indicator for depth, where surface is at 0 (top) and bottom should be at x (bottom). Currently I have not figured out how to 'reverse' the direction of the gauge, causing it to start at 0, and move downwards towards x at bottom.
Does anyone know how to achieve this?
Here's my gauge:
function createGauges() {
var value = $("#depthBar").val();
$("#depthBar").kendoLinearGauge({
pointer: {
value: 28,
shape: "arrow"
},
scale: {
majorUnit: 20,
minorUnit: 2,
min: -40,
max: 60,
vertical: true,
directions:
}
});
}
$(document).ready(function() {
createGauges();
});

Aaand, I've found the answer. Actually missed a tiny piece of code in the docs;
...
scale: {
majorUnit: 1000,
minorUnit: 500,
min: 0,
max: 12000,
vertical: true,
reverse: true
}
...

Adding An Active Class To A Mootools Accordion Element

With the rise of CSS3, I'd like to control the animation used by the mootools accordion class via css transitions, and I figure the best way to do that is to assign an active class to both the toggler and element parts of the accordion.
I've been able to do that for the toggler element, but after many attempts, I can't figure out how to give the element an active class.
The mootools code I've got so far is:
var myAccordion = new Fx.Accordion($$('.toggler'), $$('.services-element'), {
display: 1,
fps: 24,
duration: 400,
onActive: function(toggler) { toggler.addClass('active-accordion'); },
onBackground: function(toggler) { toggler.removeClass('active-accordion'); },
show: 0,
height: false,
width: false,
opacity: 0.3,
fixedHeight: 320,
fixedWidth: null,
alwaysHide: true,
initialDisplayFx: false
});
If anyone can help with this, I'd be most appreciative.

Thanks to the info provided by Johan, I've amended the onActive and onBackground rules as follows:
onActive: function(toggler, element) { toggler.addClass('active-accordion'), element.addClass('active-accordion') ; },
onBackground: function(toggler, element) { toggler.removeClass('active-accordion'), element.removeClass('active-accordion'); },
This gives me what I need.