We Keep Coding

I am having trouble understanding the Leader-Line js documentation

I am trying to create code that will draw a line from point a to point b using the leaderline library. https://github.com/anseki/leader-line
It looks like the section I need to reference is under Methods
self = line.show([showEffectName[, animOptions]])
where showEffectName: 'draw' and animOptions: {duration: 500, timing: [0.58, 0, 0.42, 1]}
Here is an example shown using a button to show/hide the line
var line = new LeaderLine(startElement, endElement, {hide: true});
showButton.addEventListener('click', function() { line.show(); }, false);
hideButton.addEventListener('click', function() { line.hide(); }, false);
How do I implement the self= code into the button? I'm not even sure what self= is supposed to mean. The below code does not work
var line = new LeaderLine(startElement, endElement, {hide: true});
line.show() = line.show({showEffectName:'draw'}, {animOptions: {duration: 3000, timing: 'linear'}});
startElement.addEventListener('click', function() { line.show(); });

Here is what you are looking for
line.show('draw', {
animOptions: {
duration: 3000,
timing: [0.5, 0, 1, 0.42]
}
})
And now you can call this in any function
button.addEventListener('click', function() {
line.show('draw', {
animOptions: {
duration: 3000,
timing: [0.5, 0, 1, 0.42]
}
})
});

Your code does not work because you have to put only value like below.
var line = new LeaderLine(startElement, endElement, {hide: true});
startElement.addEventListener("click", function () {
line.show("draw", {duration: 3000, timing: 'linear'});
});

Uncaught TypeError: l(...).mCustomScrollbar is not a function

Any idea what's wrong with the following function? I tried placing the jQuery before the function but it doesn't work. Thanks!
! function(l) {
l(window).load(function() {
l(".scrolling").mCustomScrollbar({
theme: "mini-dark",
scrollButtons: {
enable: !0
},
callbacks: {
onTotalScroll: function() {
addContent(this)
},
onTotalScrollOffset: 100,
alwaysTriggerOffsets: !1
}
})
})
}(jQuery);

Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'

I saw this question been asked several times but those answers are not helping me out. I want to remove an element for which I'm using the following function:
removeCriteria: function(criteria) {
criteria.el.slideOut('t', {
easing: 'eastOutStrong',
duration: 0.15,
remove: true,
callback: function() {
this.criteria.remove(criteria);
this.remove(criteria);
this.doLayout();
Ext.each(this.criteria, function(c) {
c.updateTitle(); });
this.getCriteriaMenuItemByType(criteria).show();
this.fireEvent('criteriaremove', this, criteria);
},
scope: this
});
},
addCriteria: function(type) {
var criteria = this.createCriteria(type);
this.criteria.push(criteria);
this.add(criteria);
if (!this.collapsed) {
this.doLayout();
var self = this;
criteria.el.slideIn('t', {
easing: 'easeOut',
duration: 0.2,
callback: function() {
this.fireEvent('criteriaadd', this, criteria);
},
scope: this
});
} else {
this.fireEvent('criteriaadd', this, criteria);
}
return criteria;
},
where Criteria and type in the above code is an object:
at this this.doLayout(); it throws an error, i tried debugging it through extjs but in vain.
I'm able to remove the object successfully, however when I try to add back the same object, I get this error:
any ideas???
Please let me know for more info
Thanks!

Function not firing correctly

currently I have the JS below. I'm trying to run the slideout.close(); event with smoothstate onStart. My code is below and i'm currently getting an error in the console. Could someone please help me out.
Thanks.
$(document).ready(function() {
slideout();
});
function slideout() {
var slideout = new Slideout({
'panel': document.getElementById('slideout-content'),
'menu': document.getElementById('slideout-nav'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});
$('.mobile-nav__icon').on('click', function() {
slideout.toggle();
});
}
$(function(){
'use strict';
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 860,
render: function ($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
slideout.close();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function() {
slideout();
}
},
smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});

You've created a global function called slideout, within which you have a local variable called slideout that is the one that refers to a Slideout object - you can't access that local variable from other functions. When you try to use slideout.close() that is looking for a .close() method on the function.
One fix would be to change the name of the variable or function and make the variable global too, so that you can access it anywhere. But adding more globals is messy.
I think it should be fine to combine all of your code into a single document ready handler, so that everything is in the same scope without needing any globals (you would still need to use a different name for the variable).
I can't test the following because I don't have whatever Slideout is, but:
$(document).ready(function() {
'use strict';
var slideout; // variable that is local to the doc ready handler function
// and accessible to all code within that handler
function initSlideout() { // function renamed
slideout = new Slideout({ // assign to variable declared above
'panel': document.getElementById('slideout-content'),
'menu': document.getElementById('slideout-nav'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});
}
initSlideout();
$('.mobile-nav__icon').on('click', function() {
slideout.toggle();
});
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 860,
render: function ($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
slideout.close();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function() {
initSlideout();
}
},
smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});

jquery masterpage custom function

Jquery custom function on masterpage not working
I have a custom function like as follows :
(function ($) {
$.fn.scrollingCarousel = function (options, i) {
...something something
};
jQuery.fn.scrollingCarousel.defaults = {
autoScroll: false,
autoScrollDirection: 'left',
autoScrollSpeed: 10000,
looped: false,
scrollerAlignment: 'horizontal',
scrollerOffset: 0,
scrollSpeed: 'fast',
beforeCreateFunction: null,
afterCreateFunction: null
};
})(jQuery);
i am using it in a page which has a masterpage.
i am using it in a page as follows.
<script type="text/javascript">
$(document).ready(function () {
$(this).('#carousel-demo1').scrollingCarousel();
});
</script>
i get an error as scrollingCarousel is not recognized.
If i dont use the masterpage the code works fine.

As mentioned , the way you are calling your function is not correct
example usage:
$(document).ready(function(){
var a = $("#carousel-demo1").scrollingCarousel();
});
(function ($) {
$.fn.scrollingCarousel = function (options, i) {
alert('something')
};
jQuery.fn.scrollingCarousel.defaults = {
autoScroll: false,
autoScrollDirection: 'left',
autoScrollSpeed: 10000,
looped: false,
scrollerAlignment: 'horizontal',
scrollerOffset: 0,
scrollSpeed: 'fast',
beforeCreateFunction: null,
afterCreateFunction: null
};
})(jQuery);