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
Related
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/
Im trying to figure out how to close a pop up dialog based on a published event .. i.e when a person moves the mouse to another part of the page.(i only want it closed when i move to this part of the page) Is this possible
i have a topic published when the user moves off this area.
_hoverOffArea : function() {
topic.publish("messageRollOver/close");
},
how do i get my popup to subscribe to this topic and close itself ?
var tooltip = new TooltipDialog({
onMouseLeave : function() {
},
onBlur : function() {
}
});
messageTooltip.set("content", rollOver.domNode);
popup.open({
popup: tooltip,
around: e
});
You may be over thinking it. The dojo/topic module has a subscribe method which takes a topic name ("messageRollOver/close") and a function to fire when the message is published.
topic.subscribe('messageRollOver/close',function(args){
console.log('close tooltip');
});
You can pass arbitrary parameters to the publish message that are then passed to the subscribe:
topic.subscribe("messageRollOver/close",function(arg1){
console.log("arg1 = ",arg1);
});
var tooltip = new TooltipDialog(/*params*/);
topic.publish("messageRollOver/close",tooltip);
when the subscribe function is invoked, arg1 would be the second argument to the topic#publish function call.
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..)
I'm trying to create a plugin that'll add a sharing button to the videojs player's overlay when the user hovers over or pauses the video -- basically I want my element to fade in over the player when the controlBar is show and fade out when it's hidden. My hackish solution is to listen for the player's "controlsvisible" and "controlshidden" events and calling fadeIn/Out on my element when those trigger.
Is that the best hook I have available, or is there a preferred method?
Sample:
videojs.plugin('shareButtons', function(options) {
var shareBtn;
shareBtn = $('<span class="icon-share"></span>share');
shareBtn.click(function() {
return alert("share");
});
$(this.el()).append(shareBtn);
this.on("controlsvisible", function() {
return vjs.Component.prototype.fadeIn.call($("#player-share"));
});
return this.on("controlshidden", function() {
return vjs.Component.prototype.fadeOut.call($("#player-share"));
});
});
I'm actually in the process of updating this. You can see the CSS in my branch here:
https://github.com/heff/video-js/blob/feature/control-bar-fixes/src/css/video-js.less
You'll be able to use events (useractive/userpassive) or CSS classes (vjs-user-active/vjs-user-passive).
When FloatingPane change size, I would like to launch a function.
I think there is something with resizeHandle but not know how to do.
I use Dojo 1.8+.
Thanks
Indeed, you have to define an event handler for the resize handler of your floating pane.
For example:
require(["dojo/on"], function() {
var floatingPaneObj = ...;
...
floatingPaneObj.startup();
on(floatingPaneObj._resizeHandle, "resize", function(e) {
// Your event handler
});
});
I also made a working JSFiddle to demonstrate it. http://jsfiddle.net/8azsz/2/