Animation take place during drag - javascript

I have an element that is draggable using jQuery UI's .draggable(), but I want it to follow a certain path while dragging.
In fact, while it is being dragged the whole layout of the page will be changing.
Since I have one set of styles for how the page looks like before the drag and one set of styles of how the page looks like after the drag is done, I figured using a CSS animation would make sense.
So, now, my question is how can I make that animation occur as the drag is happening?
Or if there is another way to do this then an animation, how can I transition from one style to another as a drag is happening.
What I'm trying to do is get the draggable element to drag into its place in the second styles.

Related

move element in DOM but not on screen

I am creating a lightbox style plugin that opens an image in fullscreen and adds text about it next to it. I need a zoom animation, that just zooms the small image up to fill the screen. Since the small image is in a column layout, i need to move it out of the current dom structure. However i am unable to do so while doing the zoom animation.
So my question is:
Is there any way to move an element in the dom, or just change its position to fixed and keep its position on screen? I have jQuery avaliable
If all you want to do is get it done, this plugin could do the job.
magnific-popup
Otherwise, I'd put the image in a container of the same size so that you can change the image display property without having your layout get screwed up.
You don't need to move the element in your DOM. Just change the css.
Also this stackoverflow question could possibly help you.

Transparent-gradient menu

I have a complex problem. I want to create a menu. At the same time just only 3 elements are visible, and 2 other, which are transparent-gradient. If I move the cursor in a transparent element, the list will scroll up or down. The menu menu have sub-levels, which have the same format as the main level.
Here is a sample:
When it stop, it's okay. The first, and last displaying element's CSS set linear-gradient. When it move, i use jquery to animate the moving. But the result is not exactly I want. When it scroll, it looks like the whole list is moving, not scrolling. I want to use jQuery just the move animation, and the transparent gradient set the whole list, not for the list element.
I guess I should use mask for the list, but the background is transparent too. I run out from ideas.
I solve it. I use "overflow:hidden" and svg mask. The sub-level is an other ul list, not include in the first level, and jquery set the display.

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.

jquery drag image into text and show url of that image

I have a textbox, a div, and an image.
Do we have any way to do like this:
When I drag that image into the div. (The image don't need to move, just like we left click on it, and drag it to anywhere, but it never move.)
The div show the image. (Duplicated 1 image into the div)
The text show URL of that image.
Do you have any idea or article(s) on doing this thing?
I've never coded drag drop in my life, but I know Step 2 is just set HTML for the div, and Step 3 is just get image src. However, on Step 1, how do I know when "the image into the div and the mouse release?"
I know jQuery UI, it's not the dragable from jQuery UI, cause the draggable makes object move. I don't want it move. Can you try click on any image on this stackoverflow website, or any link. Then you hold your mouse and drag it. Try drag a link into the search box at top, and you get the link. Thats what I want. Not the dragable of jQuery UI to make the object move.
You can do all of this with the dragable feature in jQuery. I noticed in a comment you mentioned that you don't believe this will work because it actually moves the image but there are more than just the default options! Take a look at the clone helper attribute.
Here's about as close of an example as there is and it sounds like you already know how to handle the rest (getting the src attribute, etc.).
http://jqueryui.com/demos/droppable/#method-option
JQuery draggable allows you to leave the original in its place while dragging through the use of Helpers. See this url and try dragging the top grey boxes around. The two on the right use helpers, leaving the original in place.
http://www.jqueryui.com/demos/draggable/#visual-feedback
Using this in conjuntion with the link Artsemis provided will do the trick
Dragging an image into your address bar is a function of the web browser, not JS or the page you are viewing. You will want to use jquery draggable or something like it.

Prototype UI - carousel with drag and drop

Does anyone know if it's possible to create a carousel of images in prototype and then drag+drop those images from the carousel onto a droppable div?
I've tried the same thing using jQuery UI's draggable/droppable plugins with jCarousel without luck. Thanks!
I think the trick to doing this is to carefully manage containment of the carousel. My experience of Drag and Drop with Prototype/Scriptaculous has been that if the source is contained within an element with overflow set to hidden or scroll then you can't drag out of it. Carousels are often contained in div's with the overflow set to hidden so if the animations to move from one image to another are not perfectly in sync the element size doesn't pulse.
One option would be to have your carousel use equally sized images which are absolutely positioned, to the same co-ordinates, and simply fade from one to the next, then the containment can be simple (or have none at all), then the scripty drag/drop should work ok.

Categories