Make jQuery droppable scroll when onHover event happens - javascript

I have a container for lots of divs and I don't know how many child elements it'll have on load.
It is a droppable area and I want to make it scroll to show hidden child content whenever a user hovers a draggable at the top of/bottom of the container.
I am using jquery ui draggables and droppables and will appreciate all the help I can get.
Thanks.

Related

Horizontal DIV with children elements to be scrolled to by Id

I have an ASP.NET Core Razor Page where is a collection of elements scroll-able horizontally on touch or on nav button click.
I am not js specialist and I need one more functionality:
On button click, I need to "JUMP" to element that has given ID.
How can I achieve that on horizontal scroll div?
This answer here can help.
This is a quote from that answer
call this when you need to scroll the screen to an element which has id="yourSpecificElementId"
window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));

Div inside draggable Div

I made a div draggable with $("#divID").draggable(); and it works.
Inside this div I have a second div. I'd like to have the inner div not draggable,
so that the user can drag the whole thing using a "frame" around the inner div.
The inner div contains a ScrollBar and other elements that conflict with the "draggable" feature.
Is it possibile?
Thank you.
Edit:
I made a test page: TEST
The user should be able to drag everything (including "other elements") only in the upper or lower strip, where the cursor become a cross of arrows. I want the user to be unable to drag where the cursors become a pointer.
Thanks again.
I had a vaguely similar issue when working with accordions, I wanted links in the accordion headers and they conflicted with the accordion behaviour.
I fixed it by attaching an event handler to the inner element, and all it did was call evt.stopPropagation() to prevent the parent element(s) from getting the conflicting events.
Try position fixed
div#notDraggable{
position:fixed;
}

Display draggable from div with display set to none

I don't know if this is possible. Is there any way to make a div element visible while the div is not displayed? Specifically I'm using drag and drop items from a drop-down list, and once the list closes, they're invisible. Ideas?
use the Jquery UI drag samples, can help you for what you want.

Scroll bar inside a sortable div

I am using jQuery sortable. Inside the sortable div is div that has a vertical scrollbar. If I click the vertical scroll bar, the sortable is triggered but doesn't see the unclick event. I then need to right click in order to drop the sortable div. How can i propagate the unclick or even make it so the scrollbar does not trigger the sortable drag?
$('#sortHolder').sortable();
Example http://jsfiddle.net/L2hWv/
There is this similar question here, but I have a scrolling div inside my sortable.
I have faced your issue with a flash object inside the div. You could try using a drag handle. Docs: http://api.jqueryui.com/sortable/#option-handle

How do I create div that can be dragged up to reveal content?

I have a div with an image and some text. I want the whole div to be draggable, but only upwards. When the visitor drags the div upwards with their mouse, there is content under the div, that doesn't move. That means that that content is already there. The draggable div is overlapping it. A good example of what I want to do is the Microsoft Windows 8 lock-screen. You drag up, and the login screen is under it. Thanks!
I was trying to do something very similar to your problem not a while ago. If you want an element which can be dragged up use the axis option in the draggable() tool in jQuery UI. You would need:
$(document).ready(function() {
$("div").draggable({
axis: "y"
});
});
This defines it as draggable, and only on the Y-axis (vertical).
One option would be to use jQuery UI's draggable feature.
http://jqueryui.com/demos/draggable/

Categories

Resources