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.
Related
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.
I'm working on a drag and drop div project. In my editor it is possible to resize, position and rotate a selected div. It all works fine as long as the rotation is 0, but once I have set a different rotation, it starts behaving different. I'm not sure exactly what I need to do, but there must be some sort of offset that I need to take into account.
Best example I can provide is: http://recordit.co/0Pskwtrvh0
Notice in the video that without rotation I can move the div around without any problems, but after setting a rotation, everytime I click the div "skips".
Hope someone understands the problem and can push me in the right direction.
I want to add an image inside every center bubble node. I am able to add an image but it is acting like hidden pattern for background and wherever bubble moves it exposes the visible part of the hidden pattern which is in the background. Actually my aim is to achieve something which is in this (http://jsfiddle.net/LsMZp/2/) fiddle. Here is my fiddle (https://jsfiddle.net/m2hLvr4r/1/). I have written the same code as in the previous fiddle to add an image inside a circle but I could not able to achieve this and I am trying it from previous one day. Please some one help me out.
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.
Basically, I want to have a layer on top of another without catching input.
The goal is to have a PNG over my webpage that will create an effect, a bit like a filter.
My problem is if it’s over, the text becomes unselectable & unclickable.
Any ideas?
It depends on your needs, but in the past when there was a specific element that I wanted to be able to click through a layer. I would position a transparent div absolutely positioned to the exact position as the underlying that would trigger the event for the underneath element. It is very easy to match positions with javascript and just set the z-index higher than the overlay.
Of course this is easy If you are dealing with a single element or even two, could get exponentially cumbersome to use this for an entire page under an overlay for example.