i am working on d3. and the problem which i am facing is that whenever i take the mouse pointer inside the graph it immediately shows the hover details. but the thing is that i am in need of showing the hover details only if the mouse pointer is exactly over the datapoint or a graph point. the graph which i am working is http://code.shutterstock.com/rickshaw/examples/lines.html. any help would be appreciated to reduce the size of the mouse hover area.
Stop event from bubbling up by using stopPropagation method on the JavaScript/jQuery event object.
If you're using jQuery, this can be done like:
jQuery('#element').on('click', function(e) {
e.stopPropagation();
// do something here
});
For JavaScript, you can see an example here.
Related
I'm working on a network graph and somebody helped get me to the point where I can hide/show nodes when clicking on them. However, there seems to be default behaviour which redraws the nodes when you move the mouse at all.
Here is the fiddle: https://jsfiddle.net/oLbkpsag/. You'll see that clicking a node hides its children, however if you mouse the mouse after clicking then the node reappears.
I added in
addClass('hide-tree-element')
which has helped on the dataLabel, but the marker or "graphic" redraws every time.
It seems that there is default behaviour to "dim other series" when hovering https://github.com/highcharts/highcharts/issues/9899. Which I thought might be affecting it. I've tried disabling that but it doesn't seem to work.
Any help would be gratefully received!
You're right, the inactive state redraws each point on mouseOut event.
To change this default behavior you can simply wrap Highcharts.Series.prototype.onMouseOut method and remove the piece of code responsible for removing inactive state functionality (added here: https://github.com/highcharts/highcharts/commit/f86f50f80160f078bd185e8e5db1251f317f9fff#diff-12c0e234e06f670ee77d64cce2a9205dL768):
// Reset all inactive states
chart.series.forEach(function (series) {
series.setState('', true);
});
Demo:
https://jsfiddle.net/BlackLabel/zrL8w067/
In HTML5 (I think?), Canvas elements on the page will interrupt scrolling when the mouse is hovering over them.
I have generated a page using Chart.js, which has many graphs on it, all of which are rendered inside a element.
Since the page is very long (vertically), the user will often scroll up / down the page to look at the various graphs. Each time they scroll onto a , they have to mouse out to continue scrolling, which is inconvenient.
Is there any way to override the canvas element's control of the mouse wheel event? I have no functionality tied to the mouse wheel. In the interim I've advised users to use keyboard shortcuts.
Thanks, as always, to this incredibly helpful community. If I find a work-around or solution I will post it here.
If you are just using Chart.js, I don't think Chart.js will hijack the wheel event. But if you use chartjs-plugin-zoom together, the wheel event will be hijacked.
(chartjs-plugin-zoom is a zoom and pan plugin for Chart.js)
chartjs-plugin-zoom hijacks mouse wheel when scrolling. If you would like the user to use mouse wheel to scroll up or down the page, instead of zooming in or out a chart, you can un-register the wheel event from the chart, as below:
var myChart = new Chart(ctx, {...});
myChart.ctx.canvas.removeEventListener('wheel', myChart._wheelHandler);
You can re-add the event handler whenever needed:
myChart.ctx.canvas.addEventListener('wheel', myChart._wheelHandler);
Check out this example on jsfiddle.
This is an example canvas:
canvas
{
background-color: red;
}
<canvas></canvas>
Run the snippet and test it. You will see there is no scroll suppression at all.
What you experience is something Chart.js adds on purpose.
To remove it do, with jQuery, as follows:
$(function () {
$("*").off("scroll");
});
This will remove all scroll handlers from all elements on the page, or a less aggressive way:
$("canvas").off("scroll");
This last way is less aggressive and keeps non-canvases alone, but it may not suffice. The scroll handler may be attached to an ancestor of the canvas, such as a an invisible div.
To exclusively capture the event you could directly change the onmousewheel method of the element.
this.canvas.onmousewheel = function(evt){
//perform your own Event dispatching here
return false;
};
```
Config option in setup. This will disable the zoom plugin.
options: {
plugins: {
zoom: false
}
}
I'm trying to create a small image that follows the mouse around but only exists inside a specific area. I'm using javascript/jquery to create the image when the mouse enters the area and remove it when the mouse leaves.
The problem is, if I create the "follower" inside the area div, the image seems to be considered part of it's parent for determining mouse state, and thus it continues to exist even after the mouse is outside the area.
(If I move the mouse fast enough the cursor will escape and the follower disapears.)
Here is the code I'm using:
$("#area").mouseenter(function() {
$("#area").append("<img id='follower' src='follower.png'/>");
});
$("#area").mousemove(function(event){
$("#follower").css("top",event.pageY-35);
$("#follower").css("left",event.pageX-35);
});
$("#area").mouseleave(function() {
$("#follower").remove();
});
JSFiddle: http://jsfiddle.net/cgWdF/186/
I have also attempted creating the "follower" inside a separate div, which works but results in a weird flickering of the image, as seen here: http://jsfiddle.net/cgWdF/187/
Any help, with this, would be appreciated. It doesn't matter whether the follower is created inside the area div, or not, as long as the flickering affect isn't seen. Also, I'd like to keep the code as compact as possible, but I'll take what I can get.
This occurs because the element on which you mouseleave is not the one on which you think it happens. In fact, your sprite is triggering the event instead because your pointer is over it at that time.
To prevent that from happening, you can force the page to cancel all pointer events on your sprite. By doing that, #area will trigger your pointer events as intended. The css rule pointer-events might be helpful for this.
CSS
#follower {
position: absolute;
height: 80px;
pointer-events: none;
}
There are probably better ways to deal with that but it's the most simple I can come up with for now.
Hope this helps!
See FIDDLE.
Ive got a problem here.
I want to make elements transfer their dragged event.
This means, I want to start dragging one element - and if this element reaches a point ( for example, left: 300 ) I want to hide the first element. Then I want to add a second element to the same drag event, for example an other div. So the drag will look like a single drag for the user but change its elements.
This should happen in one drag.
Anyone knows how I can make this?
An approach would be to use the drag event documented here:
http://jqueryui.com/draggable/#events
in the drag event check the left and top values and change the HTML of your helper element based on the left and top values of your drag event.
HTH
I want to trigger an event handler when the user hovers on a particular part of the image, like the center of the image or the right side of the image (area would include, say, about a 100 pixels). I am not using any framework, so this is normal javascript that I am working with.
I am not sure if using image maps would work. Can anyone help?
Quirksmode about mouse position
Given the craziness involved here I would:
Use a framework (I just did something like this with Mootools)
Put absolutely positioned divs over the image and listen to events on them, instead of the image (did this too recently, a left 50% and a right 50%, way less cumbersome than tracking the mouse position).
Or go for it, quirksmode gives a decent function to get the mouse position, then you'll need to calculate the position of the image, then do the math to get the position of the mouse on the image, do the math in a mouseover event of the image, then continually check if the position meets your criteria, then do something about it when it does :)
You can use the MouseMove event to find out the location of the cursor, and then implement your own logic to calculate this position relative to the image.
See this page on getting the mouse coordinates.
i do not know how many areas you need and if they need to be especially shaped or something like that....
a straightforward solution would be placing (CSS) empty div elements "over" the image which will trigger the events
afaik it is not possible to trigger js events with an image map
An image map coupled with jquery is a great solution I've used before. I see that you're not using a framework, but it's worth a look.
Here's a little code snippet I used with an image map and mouseenter / mouseleave events.
$(".map-areas area")
.mouseenter(function() {
idx = $(".map-areas area").index(this);
showMapArea(idx);
})
.mouseleave(function() {
$(".map-hovers img").hide();
$(".map-titles img").hide();
});
I suggest putting an invisible div in the place where you want to check for mouse_over in the image. (In the case that the area you want is rectangular of course). And then trigger on mouse_over for this div.
If you want to check for non rectangular areas (that can't be a div), I would suggest that you put a div of the same size of the image on top of it. Check mouse position on that div, and use it to compare with a mask image.
Example:
MousePosOnGhostDiv_X = 76;
MousePosOnGhostDiv_Y = 145;
if(CheckColorOfMaskImage(MousePosOnGhostDiv_X,MousePosOnGhostDiv_Y)=="orange") do something.
By knowing which color it is on the mask image you can set multiple events.