JQuery Draggable to Drag to Position Programmatically - javascript

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.

Related

Propagate JavaScript mouse event(s) from one element to another element?

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.

manipulate cursor position from an element

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.

Preventing hover intent from seeing a mouseleave when moving into an overlaid element

This answer:
cancelling mouseout event when element is overlaid
Gets somewhere near, but isn't really what I am after as it's sort of reversing my problem.
I am making an image gallery similar to the Facebook image viewer.
An image is loaded into an absolutely positioned div which is centred on screen and floats above the main page with a z-index value.
To the left and right of the image are small div elements with absolute positioning and a z-index 1 higher than the image. These div elements are left and right arrows to click through the gallery.
The arrows are hidden when the image loads, but then when the user moves his mouse over the image, the arrows should fade in, then if they move off again, they fade out... just as the Facebook viewer does.
I am using hoverIntent to achieve this, and it works fine.
BUT... when the user moves his/her mouse into the arrow div, hoverIntent sees this as a mouseleave event on the image which is underneath and hides the arrow...
So... what I need is to be able to have hoverIntent ignore the arrow divs.
The code I am using for hoverIntent is quite straight foward:
function showArrows() {
$('.imgNav').fadeIn(500);
};
function hideArrows() {
$('.imgNav').fadeOut(500);
};
$(img).hoverIntent(showArrows, hideArrows);
Obviously img is the jQuery image object and .imgNav is the classname for the arrows.
EDIT:
I have created a fiddle here: http://jsfiddle.net/jhartnoll/cE6gu/
Using your fiddle example, changing
$('.enlarged').hoverIntent(showArrows, hideArrows);
to
$('.imgViewer').hoverIntent(showArrows, hideArrows);
did the trick for me http://jsfiddle.net/cE6gu/4/
Note, on hoverintent website it says its designed to ignore children (here) so you just need to make sure you call hoverintent on a parent element that contains all these divs.

html mouseover event on element border

I am wondering whether it is possible to bind mouseover event to one of the HTML element border, say, the left border of a div.
The div is a container for other complex html elements, and there are mouseover events attached for its sub elements. Binding mouseover event to the whole container div itself is a method, however the user will not be able to distinguish whether he select the container or the sub elements.
I want a very obvious method to indicate that the container can be selected, like highlighting the container when he mouseover the left border area.
Or is there any other good way to solve the problem?
Thank you.
Borders are not elements, and as such you cannot bind mouseenter events to them. If you wanted this type of functionality, you would need to place a series of elements around the edges of the element (or at least next to your target edge), and bind to that.
This particular approach was taken by Dropbox in their web-based upload feature. When you drag a file from your desktop onto their page, you'll notice that div elements around the top, bottom, and sides all fade into view. This was accomplished with four div elements placed near the edges of the viewport.
do you want like this
http://jsfiddle.net/GBpcg/
EDIT : http://jsfiddle.net/GBpcg/2/

Scroll div content left right on mouseover

Good day.
I need script that will follow the mouse and will scroll content depending on what side mouse is. If left then left, if right then right.
I need it for cases when line of hrefs will exceed width of block, like here http://cloud.ignatynikulin.com/45121918090s3R15193i
If the width is exceed then you will be able to scroll it when you put your mouse to right.
Something that will do that: http://codecanyon.net/item/jquery-mouse-slider/full_screen_preview/143061
I tried that script, but the problem with it is that it needs to rely on some width that I don't have.
Any plugin or ideas suggestion?
Thank you!
Check out the answer here from StackOverflow - it's a perfect solution:
Continuous scroll on hover [performance]
Make the containing div positioned absolute. Then in jQuery, catch the onMouseMove event, calculate the mouse position relative to the containing div (using .width() this works even with dynamic width), and change the left/right property of your containing div according to this.
Reference: jQuery get mouse position within an element

Categories