Develop Reference

What is the difference between Lottie Events and Lottie EventListeners and How to use?

The documentation has both Events and EventListeners. I can get the EventListeners to fire but the Events do not have adequate documentation for me to get going. What is the difference and how do you use? Thank you.
https://github.com/airbnb/lottie-web#events
Events (Do not work, how to use?)
// From the Documentation
onComplete
onLoopComplete
onEnterFrame
onSegmentStart
you can also use addEventListener with the following events:
complete
loopComplete
enterFrame
segmentStart
config_ready (when initial config is done)
data_ready (when all parts of the animation have been loaded)
data_failed (when part of the animation can not be loaded)
loaded_images (when all image loads have either succeeded or errored)
DOMLoaded (when elements have been added to the DOM)
destroy
// End Documentation
From the standard addEventListener usage, this works...
birbSequence.addEventListener('loopComplete', (e) => {
console.log(e);
});
although 'complete' does not fire.
But to try out the stuff in Events like onEnterFrame?
var birbSequence = lottie.loadAnimation({
container: bodyMovinContainer1,
loop: true,
renderer: 'svg',
path: 'Birb Sequence 1.json',
onEnterFrame: function(e) { console.log(e); }
});
I am really new to using Lottie though so could use some help.
Just want a way to see how to use Events

Let's say we have our lottie animation:
const anim = lottie.loadAnimation({
container: '#container',
renderer: 'svg',
loop: true,
autoplay: true,
...
})
With Events:
anim.onComplete = function() {
console.log('complete')
}
anim.onLoopComplete = function() {
console.log('loopComplete')
}
With addEventListener:
anim.addEventListener('complete', function() {
console.log('complete')
})
anim.addEventListener('loopComplete', function() {
console.log('loopComplete')
})

You can use the addEventListener method to listen to all the events instead of the on* series of event hooks.
const options = {
container: '#container',
loop: false,
autoplay: false,
renderer: 'svg',
rendererSettings: {
scaleMode: 'noScale',
clearCanvas: false,
progressiveLoad: true,
hideOnTransparent: true,
},
};
try {
const anim = lottie.loadAnimation({ ...options, path: 'URL_TO_JSON' });
anim.addEventListener('complete', () => { console.log('complete'); });
anim.addEventListener('loopComplete', () => { console.log('loopComplete'); });
anim.addEventListener('data_ready ', () => { console.log('data_ready'); });
anim.addEventListener('data_failed', () => { console.log('data_failed'); });
anim.addEventListener('enterFrame', () => {
console.log('enterFrame', anim.currentFrame);
});
// etc ...
} catch (error)
console.log('error loading anim');
}
Hope that helps!

Fancytree activateKey setting focus then scrolling to top dependant on key

I am finding that activateKey is not setting focus correctly depending on the key/node used. It is first setting focus but then scrolling back up to the top of the tree with the active/selected node not in view.
The fiddle below works as expected:
http://jsfiddle.net/op5ga0zf/2/
This fiddle scrolls back up to the top of the tree, the only difference is the key value being used in activateKey:
http://jsfiddle.net/op5ga0zf/3/
I get the same behaviour in all browsers, am I doing something wrong or is this a bug?
$(function() {
var $orgtree = $('#orgtree');
$orgtree.fancytree({
autoScroll: true,
activate: function(event, data) {
data.node.setSelected(!data.node.isSelected())
},
checkbox: true,
extensions: ['filter'],
filter: {
autoExpand: true,
counter: false,
mode: "hide"
},
icon: false,
init: function(event, data) {
var key = $('#OrganisationID').val();
if (key !== '') {
data.tree.activateKey(key);
}
},
select: function(event, data) {
if (data.node.isSelected()) {
$('#OrganisationID').val(data.node.key);
} else {
$('#OrganisationID').val("");
}
},
selectMode: 1,
source: treeData,
tabindex: ""
});
$('#filter-orgtree').keyup(function() {
$orgtree.fancytree("getTree").filterNodes($(this).val());
});
});

This was a bug and will be fixed with release 2.30.

Click event not firing correctly

I am attempting to fire a click event when the page loads but only once on each page load. What is happening is that in localhost it works fine, but when I upload to server it dosen't fire at all.
The idea was to set a counter to 0 when the page loads then inc the counter by 1 to disable further clicks. Obviously, there is an error somewhere but I cannot solve it.
I am using jqwidgets jqxgrid to display the data and getting the class as a variable. I am also using jquery 1.11.1
I would be grateful if someone could help me solve this as I seem to have tried many combinations, but ok on localhost but nothing on server. I am using php v5.3.13 wamp and 5.4 on server. Many thanks
var counter = 0;
window.onload = function() {
var calendaricons = document.getElementsByClassName('jqx-icon-calendar');
for (var i = 0; i < calendaricons.length; i++) {
calendaricons[i].addEventListener('click', function() {
if (counter === 0) {
notif({
type: "info",
msg: "Test Message",
width: 650,
height: 99,
multiline: true,
position: "center",
fade: true,
//timeout: 3000,
autohide: false,
clickable: true
});
counter++;
} else {
return false;
}
});
}
}

If you are using jQuery, which it seems the case, you can use the one function that allows your handler to be runt only once.
Here is your code with the use of the one function:
$(window).load(function() {
$('.jqx-icon-calendar').each(function(index, item) {
$(this).one("click", function() {
notif({
type: "info",
msg: "Test Message",
width: 650,
height: 99,
multiline: true,
position: "center",
fade: true,
//timeout: 3000,
autohide: false,
clickable: true
});
});
});
});

Initializing bootstrap-markdown with JavaScript and customizing the options

I'm trying to use bootstrap-markdown and everything works fine except I can't call the plugin via JavaScript. For instance:
$("#content").markdownEditor({
autofocus: false,
savable: false,
iconlibrary: 'fa',
resize: 'vertical',
additionalButtons: custom_buttons, // an array defining custom commands
onPreview: function (e) {
var content = e.getContent();
console.log('content', content);
}
});
Does anyone has any ideas what might be the case? Couldn't find anything useful on the web or repo's github page. And yes I've already included markdown.js and to-markdown.js which weren't mentioned in the docs at all but it was quick find anyway.
All I need now is to call the editor, add a couple of custom toolbar buttons (image upload, code block insert etc.) and be done with it.
Code snippets, links & live fiddles are much appreciated :)

For some reason, changing the order of script references fixed this.
Here's the order now:
lib/markdown.js
lib/bootstrap-markdown.js ,
lib/to-markdown.js
And here's my initialization:
$(function () {
var custom_buttons = [[
{
name: "insertCode",
data: [{
name: "cmdInsertCode",
toggle: "toggle",
title: "Insert Code",
icon: "fa fa-fire",
callback: function (e) {
var selected = e.getSelection(),
content = e.getContent();
// e.replaceSelection(chunk);
// var cursor = selected.start;
//e.setSelection(cursor, cursor + chunk.length);
console.log('cmdInsertCode clicked');
}
}]
}
]];
$("#content").markdown({
autofocus: false,
savable: false,
iconlibrary: 'glyph',
resize: 'vertical',
additionalButtons: custom_buttons,
onShow: function (e) {
console.warn('e:editor shown');
}
});
});
Kudos :godmode:

How to "reset" click event (with qtip2)?

I have a little question about the click event and qtip2.
After the first click on element $j('a[href^="/i/"]'), when I move again over it, the bubble appears. I would like that the bubble appears everytime I click on the element.
My code:
$j('a[href^="/i/"]').click(function(event) {
event.preventDefault();
$j(this).qtip({
content: {
title: {
text: title_qtip,
button: true,
},
text: text_qtip,
},
show: {
// event: false, <-- doesn't work
solo: true,
ready: true
},
hide: false,
});
// $j('a[href^="/i/"]').unbind('click'); <-- doesn't work
// $j('a[href^="/i/"]').unbind('onmouseover').unbind('onmouseout'); <-- doesn't work
});

First of all, don't declare your qTip2 function inside of an event handler. You don't want to declare a new qTip every time the object is clicked. All you have to do is change the event line in the show function. It should be:
$j(document).ready(function(){
$j('//selector').qtip({
content: {
title: {
text: title_qtip,
button: true,
},
text: text_qtip,
},
show: {
event: 'click',
solo: true,
ready: true
},
hide: false,
});
}
This will trigger the tool tip when the selector ($j(//your selector)) is clicked on.
Here is an updated fiddle: http://jsfiddle.net/LJwLh/1101/
It seem that your problem is the use of an a tag. There is no reason to use that tag if you are not going to link to anything.