Is there a way to track mouse double click event in dc.js like mouseover, mouseup, click, mouseout etc..
volumeChart.on('postRender', function() {
chart.select('text.pie-slice').on("dbclick", function() {
console.log('dbclick')
caught('dbclick');;
});
});
Let me know the feasibility in dc js using postrender.
Thanks,
Yash
Related
I'm trying to listen to mousemove or drag events when dragging a sortable item. I need to know the mouse position while dragging. Here is an example.
JSfiddle
document.addEventListener('drag', (e) => {
console.log(e);
});
Any help would be appreciated!
I want to remove stream style (state ? ("Stream", "Stacked" and "Expanded")) on stacked area chart and use this code :
d3.selectAll("g.nv-series")
.filter(function() {
return d3.select(this).select("text").text() == "Stream";
})
.remove();
But it works only the first time.
I tryed to handle events on chart because i want to refresh rendering of chart but it didn't work for the styles click. It works only for the legend click.
chart.legend.dispatch.on('legendClick', function(e){
console.log('legend was clicked', 'no namespace.');
});
How i can i handle click on style event ?
setter
chart.style('stream');
getter
chart.dispatch.on('stateChange', function(e) {
console.log(e); //e.style holds the current style
});
List of available styles can be found here https://github.com/novus/nvd3/blob/master/src/models/stackedArea.js#L299-L318
I also had hard time with this issue so I hope this would help you.
Cheers!
I am using CKEditor 4.4.3 and trying to listen to an editor's click event:
editor.on('click', function (e) {
console.log('click event from attaching to the editor');
});
For some reason, the click event never fires. However, if I listen to the doubleclick event, it fires when the editor is double clicked.
I was previously listening to the click event on editor.editable, but it doesn't appear to work for editors that are not inlined. Why is the click event not working?
Some further investigations:
Attaching the event handler on editor.document fires for every click, including clicks outside the editor.
Attaching the event handler to editor.container fires for clicks on the container including the toolbars.
Fiddle: http://jsfiddle.net/295PE/
Correct way of attaching listeners to the editable element in CKEditor:
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable, 'click', function() {
// ...
} );
} );
Read more about the reasons why contentDom event has to be used instead of e.g. instanceReady in editable.attachListener documentation.
Use attach the event handler to the editor's editable. This needs to be done after the editor is ready:
editor.on('instanceReady', function (e) {
editor.editable().on('click', function (event) {
console.log('clicked');
});
});
Fiddle: http://jsfiddle.net/8fZpz/
When click on datepicker (http://www.eyecon.ro/bootstrap-datepicker/), his SHOW event fires, but the modal's SHOW.BS.MODAL fires too. Whhere is a problem?
$(document).ready(function() {
$('#ArrDate')
.datepicker()
.on("show", function(event){
alert("Q");
});
$("#dlg3000to3100")
.on('show.bs.modal', function (event) {
alert("W");
});
$("#dlg3000to3100")
.modal("show");
});
exampleExample
Thanks
It seems to be a bug (or feature?) of the datepicker. What you can do is to prevent the show.bs.modal event reaching the dialog.
$('#ArrDate').on('show.bs.modal', function (event) {
event.stopPropagation();
});
This will detect the event at the datepicker level and stop the event propagation, so show.bs.modal will not 'bubble up' to the dialog.
Another work around is to swap the show.bs.modal with shown.bs.modal on modal event.
modal.on('shown.bs.modal', function (event) {
// Do something
});
however if it is not possible to swap show with shown or hide with hidden use the namespace check
modal.on('show.bs.modal', function(e) {
if (e.namespace === 'bs.modal') {
// Do something
}
});
Had a similar issue, caused by the datepicker watching for a show event.
One option is to use the shown event on the modal but this is not ideal in all cases
$('#dlg3000to3100').on('shown.bs.modal', function (event) {
// modal code in here
});
A more elegant solution is to check the namespace of the event
$('#dlg3000to3100').on('show.bs.modal', function (event) {
if(event.namespace !== 'bs.modal') return;
// modal code in here
});
https://jsfiddle.net/bzh75tww/
i´ve got a question about mootools eventhandling.
I wanna delay a mouseenter event for a dropdown navigation. After 1 second the drowdown list will be shown by "setStyle('display', 'block')...this is what i´ve got so far, and it´s working:
$('main-nav').getElements('li.level-1 ul.quick-nav').setStyle('display', 'none');
$('main-nav').getElements('li.level-1').each(function(elem){
var list = elem.getElement('.quick-nav');
elem.addEvents({
'mouseenter' : function(event){
(function() {
elem.getElement('.quick-nav').setStyle('display', 'block');
}).delay(1000)},
'mouseleave' : function(event){
elem.getElement('.quick-nav').setStyle('display', 'none');
}
});
});
I´ve delayed the mouseenter event with the delay function...the problem i got and still can´t solve is that the mouseenter event will although happen when i already left my navigation item. I enter the item, leave the item immediately, and after one second the subitem still appears. I therefore need some kind of check within the mouseleave event, wheather my menuitem is already displayed or not. Then i could stop the mouseenter event, if the menuitem is still not visible... I don´t know how i can respond the mousenter event from the function of the mouseleave event...hope anybody understood this...
Thanks in advance.
use a timer and clearTimeout on mouseleave (also $clear(timer) in older versions of mootools).
$('main-nav').getElements('li.level-1 ul.quick-nav').setStyle('display', 'none');
$('main-nav').getElements('li.level-1').each(function(elem) {
var list = elem.getElement('.quick-nav');
var timer;
elem.addEvents({
'mouseenter': function(event) {
timer = (function() {
elem.getElement('.quick-nav').setStyle('display', 'block');
}).delay(1000)
},
'mouseleave': function(event) {
clearTimeout(timer);
elem.getElement('.quick-nav').setStyle('display', 'none');
}
});
});