Develop Reference

FullCalendar tooltip bug when dragging event in Resource timeline

I'm using JavaScript FullCalendar library to build my calendar. Now updating my codes to work with FullCalendar V4. When Dragging event in resource timeline view, the tooltip does not work as expected (duplicate tooltips show when dragging). This issue only happens in resource timeline view, not in dayGrid view. I've attached two codepen codes. Daygrid view works fine, but Resource timeline view does not.
https://codepen.io/nmwangxin/pen/WNeRQaX
https://codepen.io/nmwangxin/pen/qBWROKz
eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
title: 'test',
placement: 'top',
trigger: 'hover',
container: 'body'
});
},

When dragging the event it gets re-rendered each time, so basically you are recreating a new tooltip each time thus creating multiple instances which in turn loose their reference to the element that gets destroyed hence it's odd placement.
I would suggest to hook into "eventMouseEnter" and "eventMouseLeave" callbacks and create and destroy a single tooltip object there.
Here is an example:
var tooltip = null;
eventMouseEnter: function(info) {
tooltip = new Tooltip(info.el, {
title: info.event.title,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
eventMouseLeave: function(info) {
if (tooltip) {
tooltip.dispose();
}
}
https://codepen.io/alex-hazanov/pen/rNBjPyL

Or use bootstrap's tooltip like this :
eventMouseEnter: function (info) {
$(info.el).tooltip({
title: info.event.title + '<br />' + info.event._instance.range.start,
html: true,
placement: 'top',
trigger: 'hover',
container: 'body',
});
}

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!

Mobiscroll onBeforeShow, set Value

How do I call the onBeforeShow event with mobiscroll?
$('#starttime').mobiscroll('setValue', value).time({
theme: 'jqm',
display: 'modal',
mode: 'clickpick',
stepMinute: 10,
onBeforeShow:
});
I need to set the time right before it shows. If I try to do it on document ready the input field isn't ready yet with the value...
Edit
I tried:
$('#starttime').mobiscroll('setValue', value).time({
theme: 'jqm',
display: 'modal',
mode: 'clickpick',
stepMinute: 10,
onBeforeShow: function(html, inst) {
start = $('#starttime').val();
var a = moment();
var value = a.format('h:mm A');
}
});
but then I'm getting the error: 'value is not defined'...

You have to provide a callback function.
$('#starttime').mobiscroll('setValue', value).time({
theme: 'jqm',
display: 'modal',
mode: 'clickpick',
stepMinute: 10,
onBeforeShow: function (html, inst) {
//Gets called before the scroller appears. The function receives the jQuery object containing the generated html and the scroller instance as parameters
}
});
http://docs.mobiscroll.com/23/mobiscroll-core

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.

Get element that called qTip?

I would like to get the element that called the qtip popup. In the documentation here it lets you set the position. I want to set the position using a jquery selector like $(this).find('.icon'). The problem is that this isn't the element that called the qtip (I think it's window).
Does anyone know how I can get the handle that called it (like it would if I set target to false)?
Thanks.
In the qtip source code I found this:
if(config.position.target === false) config.position.target = $(this);

Here's the solution I came up with and it seems to work. There probably is a better way to do it if I modified the qtip script but I want to leave that alone.
$(".report-error").qtip(
{
content: 'test content',
position:
{
adjust:
{
screen: true
},
target: false, //it is changed in the 'beforeRender' part in api section. by leaving it as false here in the qtip it will set it as the position I need using $(this)
corner:
{
target: 'bottomMiddle',
tooltip: 'topRight'
}
},
show:
{
when:
{
event: 'click'
}
},
style:
{
name: 'cream',
tip:
{
corner: 'topRight'
},
padding: 0,
width: 400,
border:
{
radius: 5,
width: 0
}
},
hide:
{
when:
{
event: 'unfocus'
}
},
api:
{
beforeRender: function() { //get the position that qtip found with $(this) in it's script and change it using that as the start position
this.options.position.target = $(this.elements.target).find('.icon');
this.elements.target = this.options.position.target; //update this as well. I don't actually know what it's use is
}
}
});
It's working on the site now at http://wncba.co.uk/results/