I have a div and when I point the mouse on it I want to fire an event.
But I want to fire it only if the cursor was on the event for some amount of time.
Any suggestions how to do this?
Add a mouseover event that sets a timer.
Add a mouseout event that cancels the timer.
When the timer elapses, do the stuff you want to do.
Here is an example:
$('#yourElement').on({
mouseenter: function (){
clearTimeout(testTimeout); // [1]
testTimeout = setTimeout(function(){ // [2]
...
}, numberOfMiliseconds);
},
mouseleave: function () { //[3]
clearTimeout(testTimeout);
}
}, '.whereIsYourElement');
[1] when mouse is entering the element, it removes the previous timeout and raise it [2] one more time. When the mouse is leaving the area [3] it also deletes timeout.
This gives the desirable effect, that the timeout executes only if the mouse entered and stayed in the element for some time.
Related
For example, if I trigger onDidChangeTextDocument events consecutively, with an interval of at maximum 1 second, then I would like to avoid this event's associated logic.
However, if 1 second has passed since the lastest onDidChangeTextDocument has been triggered, I would like for it to proceed with its logic.
This approach is known as "coalescing events". A typical approach is to start a timer when an event appears with the required interval. Every new event restarts the timer, so it never triggers unless there are no new events within the timer value. The triggered timer then calls any further code, handling the coalesced events. This might cause some problems if you have to process all data sent by each event. In that case you have to collect that data on each invocation of your event handler.
Here's code to handle changes per file in a VS Code extension:
private changeTimers = new Map<string, ReturnType<typeof setTimeout>>(); // Keyed by file name.
workspace.onDidChangeTextDocument((event: TextDocumentChangeEvent) => {
if (event.contentChanges.length > 0) {
const fileName = event.document.fileName;
const timer = this.changeTimers.get(fileName);
if (timer) {
clearTimeout(timer);
}
this.changeTimers.set(fileName, setTimeout(() => {
this.changeTimers.delete(fileName);
... your processing here
}, 1000));
}
});
I am trying to trigger an onClick event when click on next or previous buttons in data tables. I checked the IDs of the buttons and they are auto generated. couldn't use those IDs. Is this possible ?
You have a page.dt event, fired each time the paging is updated :
table.on('page.dt', function() {
var info = table.page.info();
console.log('Showing page: '+info.page+' of '+info.pages);
});
If you want to target click on the previous / next buttons you can easily do that. To my experience dataTables seems to "eat" the click event simply by updating the view immediately - but you can stay upfront in the chain by listening on the mousedown event instead :
$('.dataTables_wrapper').on('mousedown', '.previous', function() {
console.log('previous clicked')
})
$('.dataTables_wrapper').on('mousedown', '.next', function() {
console.log('next clicked')
})
You need to use a delegated event handler because the dataTable controls is recreated each time the dataTable is redrawn. .dataTables_wrapper, .next and .previous is common for all dataTables.
demo -> http://jsfiddle.net/6jpbyvd4/
I'm having trouble with a click event on a sprite in CreateJS. The event isn't firing as expected. I've tried:
button.addEventListener("click", function() { alert('test'); });
and
button.on("click", function() { alert('test'); });
Neither of them fire on click event. Any ideas?
I found my problem. I forgot to enable the mouse on the stage.
e.g.
var stage = new createjs.Stage("canvasId");
//Children of container can dispatch mouse events
stage.mouseChildren = true;
//EaselJS checks 10 times per second what's under mouse pointer
stage.enableMouseOver(10);
CreateJS mouse events tutorial
I'm using the Tooltip() from Twitter-Bootstrap. When hovered over an element, a tooltip shows up. But it stays there unless you move your mouse away from it.
How can I make it dissapear after a few seconds it popped up, in stead of waiting until mouse moves away from the element?
Bootstrap provides methods for manipulating tooltips such as $('#element').tooltip('hide')
If you add the data-trigger='manual' attribute to your elements, you can control how the tooltip is shown or hidden.
$('.bstooltip').mouseenter(function(){
var that = $(this)
that.tooltip('show');
setTimeout(function(){
that.tooltip('hide');
}, 2000);
});
$('.bstooltip').mouseleave(function(){
$(this).tooltip('hide');
});
Fiddle
If multiple mouseEnter and mouseleave event happen within delay time 'hide' is called multiple times and may be the tooltip closes earlier than expected. Older calls must be discarded.
$('.bstooltip').on('shown.bs.tooltip', function () {
var that = $(this);
var element = that[0];
if(element.myShowTooltipEventNum == null){
element.myShowTooltipEventNum = 0;
}else{
element.myShowTooltipEventNum++;
}
var eventNum = element.myShowTooltipEventNum;
setTimeout(function(){
if(element.myShowTooltipEventNum == eventNum){
that.tooltip('hide');
}
// else skip timeout event
}, 2000);
});
Fiddle
setTimeout would only work once for the first tooltip, we need to use setInterval instead.
This works for me perfectly fine with Bootstrap 4 Tooltips
$(document).ready( function () {
$('[data-toggle="tooltip"]').tooltip();
setInterval(function () {
$('[data-toggle="tooltip"]').tooltip('hide');
}, 2000);
});
The tooltip would appear and disappear after 2 seconds.
Here is simple Answer
$(selector).tooltip({title:"somthing~", trigger:"hover", delay:{hide:800}, placement:"top"});
only give hide parameter in delay option.
it work fine also focus event not click event(I don't know why..)
How do you make a fireEvent itemclick after the store loads.
I have this but it doesn't work:
pcfstore.on('load', function(){
//auto select first row;
Ext.getCmp('pcf_grid').getSelectionModel().select(0); // this works
//fire itemclick event
var grid= Ext.getCmp('pcf_grid');
grid.fireEvent('itemclick', grid, 0); //this doesnt work
});
Here is my itemclick event in grid view:
viewConfig: {
listeners: {
itemclick: function(dv, record, item, index, e) {
alert(record.data.code);
}
}
}
Basically when the grid loads, it should fire the alert window of the selected first row
of the grid.
itemclick is event of View but not of Grid. Try to use:
grid.getview().fireEvent('itemclick', grid, 0);
And by the way why not use selectionchange instead.
UPDATE
If you have both itemcontextmenu and selectionchange handlers it can be a little bit confusing. In this case I recommend back to square one and use itemclick event.
But your code need to have some modifications:
Assign itemclick event to grid, NOT to it's view.
When firing itemclick pass actual record, NOT an index
like this:
grid.getSelectionModel().select(0);
grid.fireEvent('itemclick', grid, grid.getSelectionModel().getLastSelected());
And here is fiddle to demonstrate what I'm talking about.
After hours of search, I found a solution. It looks like there is an issue with ExtJs4 that make the following functions impossible to work for me:
grid.getSelectionModel().select(0);
or
grid.getView().select(0); // note that this function is deprecated in ExtJS4!!
In my controller, I use this code instead:
store.load({
callback: function (records, operation, success) {
var rowIndex = this.find('id', myRecord); //where 'id': the id field of your model. You can replace 'id' with your unique field.. And 'this' is your store.
grid.getView().select(rowIndex);
}
})
Where myRecord is the record to highlight and select.
It then worked like a charm. I got the row 0 highlighted and selected. However, the itemclick listeners were not fired when the row is select with this code.