I am using a HTML div element as a tool tip for a canvas, i.e. the div shall follow the mouse's motions as the mouse pointer moves across the canvas element.
This works – almost. The tool top is south-east of the mouse pointer, and when the pointer is moving south-east-ish then it may happen that the pointer moves onto the div element so that no more mouse-move events are reaching canvas. This is only resolves when the mouse is further moved beyond the div which makes the div jump in an ugly way to adjust to that position.
How can I avoid these jumps and implement that the div is "transparent" for the mouse?
Usual bubbling up does not work because a canvas cannot hold children; at least when I am adding children to a canvas they won't be displayed.
No external modules like jQuery or whatever are used / available.
You should be able to use pointer-events: none; on the div.
Related
I have a very wide question here, and I hope I can clearly explain what exactly I need.
The image below shows a circle, which is a html element. I wanted to create an interactive element and play with the cursor. Imagine that for some reason, you can't put your cursor inside the circle. I don't want to just hide the cursor if you approach the circle, but manipulate the cursor in a way that moves your cursor away in a sort of magnetic attraction.
So: If you put your cursor around the circle, it will never approach it and be sent away from this element. is that somehow possible to do? Javascript, Angular or something else? Does anyway have ever created something like that?
you can use following method
Hide cursor permanently and use div element instead.
On window mouse move event change position of that div element with current location of pointer.
Now You need to put condition here that when ever pointer enters in circle region
do not update div element position with current position of pointer instead of this update it with new calculated position which is outside of circle.
If you need code then i can provide it to you.
I'm scaling a div (zoom functionality) on page with non-scaled divs. The scaled div has mouseover events that cause text to follow the mouse. Scaling breaks the position of the element that should follow the mouse.
Hover text is done like:
$("#container").on('mousemove','.mouseMe',function(e){
$("#followA").css("top",e.clientY)
.css("left",e.clientX);
});
//also some additional mouseenter/leave events are used to display hover
Scaling:
#container{
transform-origin: top left;
transform: scale(1.1,1.1);
}
I think what I need is to get the mouse's position on a css scaled div as if it wasn't scaled. (example: if the mouse is at the center of the div say [25,25], it should always return [25,25] even if the div is scaled). I could be wrong about what I need though, so the functional requirements take priority:
Element needs to follow mouse when hovered
Element container (or several containers up) needs to be scalable via css without breaking hovers (other transforms not relavant and no nested scaling)
JS, JQuery, CSS are all in use.
Chrome support is primary. Should also work in FF but not crucial. IE isn't supported.
This fiddle may explain this better and shows what doesn't work: http://jsfiddle.net/yvanaxe1/4/ (make the result pane big enough)
Is having those “follower” elements be descendants of the scaled element(s) an absolute requirement? Because, if you could take them out of there, and then simply position them over the top left edge of the mouseover-triggering element (by using the clientX/-Y values everywhere, plus some offsets to re-position them from there to appropriate distances), I think you might get there easier … http://jsfiddle.net/yvanaxe1/6/
I increased the scale value here, so that the effect on the follower elements (that the scaling has been applied to as well) is more obvious.
I am trying to create an animation in javascript that is triggered by a mouseover event and then returns to the initial state on mouse out. When the user runs their cursor over an image on the page, another div with an initial height of 0px gradually rises in height to 50px over the bottom portion of the image.
The problem I am facing is that when they move the cursor from the image to the div which now covers the bottom portion of the image, it triggers the mouseout (as it is a separate element from the image) and then a new mouseover event in quick succession because the div disappears when it detects that the cursor is no longer over the image (meaning the div appears and disappears quickly, over and over again).
I am wondering how I would go about breaking such a loop so that the div does not disappear when the cursor runs over it from the image (i.e. prevent the onmouseout event from triggering unless the mouse moves to some other element that is not the newly created div).
Here's an image to hopefully better illustrate the problem:
http://i.imgur.com/qcE64.jpg
I think for this situation you'd want to use a wrapper div around both the image and the div you're animating. Attach the mouseover/mouseout events to the wrapper and they will trigger when you're expecting them to. Here's a jsfiddle example
I want to add buttons somewhere on the page to manipulate JQuery Draggable element without mouse dragging, i.e. programmatically. In other words, I want to shift (or pan) draggable element inside its container up or down, left or right depending on what button user clicks. How can I do it? I cannot seem to find that option in docs. Do I simply manipulate CSS left/top to achieve it and make sure I do not go outside of the container?
$(".drag-view").draggable({drag:function(event, ui){containment:a /*...*/}});
You could draw the element on the screen and then use $.animate() to move it into position. The element would have to be positioned absolutely to animate in that fashion and would, as you mentioned, be a result of top and left.
I've build a drag and drop interface using JavaScript where users can click and drag a link (that sometimes has a CSS background image) and drop it onto the canvas.
My problem is that the mouse cursor has the link background image beneath it during dragging. I need to add my own cursor design, so is there any way to turn this CSS background off so that it doesn't follow the mouse upon dragging?
have you tried setting :active pseudo class for anchor tags?
http://www.w3schools.com/cssref/sel_active.asp
then if that isn't work quite yet you could use !important after your deceleration possibly?
and example could be
.links:active {
background-image: none !important;
}
when the user releases the background image should return.
The best solution I found for this problem was to use jQuery to assign e.preventDefault() to the click event of the link, thus disabling the background drag effect. Then, if you want a custom cursor upon dragging, write a script to match an absolutely positioned div's (with the image as the background) x,y cords to the mouse position.