scroll target div when dragging from a different div - javascript

Given 2 divs, both of which are auto scroll.
I want to be able to drag an item from Div1 into Div2, or internally within Div1.
Items will never be in Div2 - the drop event on Div2 will take care placing it into the correct place on Div1
So far that's easy enough but here's the snag - Div2 needs to be able to scroll vertically while dragging.
I can't find anything in the jQuery draggable that helps here so I tried to create my own hover regions which cause a scroll on Div2. This works when not dragging but not while dragging. I suspect jQuery is stealing the event causing mine not to fire.
html:
<div id="Outer">
<div id="Div1">
<div class='Item'></div>
<div class='Item'></div>
<div class='Item'></div>
</div>
<div id="Div2">
<div class="ScrollUp"></div>
some long content that causes a scrollbar
<div class="ScrollDown"></div>
</div>
</div>
css:
#Div1, #Div2
{
overflow: auto;
}
javascript:
$('#Div1>.Item').draggable({appendTo: $('#Outer')});
$('#Div1').droppable({tolerance: 'pointer'});
$('#Div2').droppable({drop: Div2Drop});
function Div2Drop() {}; //function places the item into the approriate place in Div1
$('#ScrollUp, #ScrollDown').mouseenter(function(){... }); /* These 2 events don't */
$('#ScrollUp, #ScrollDown').mouseout(function(){... }); /* fire when dragging */
Div1 also needs to be scrollable when dragging internally.
How can I make the events fire, or is there a better way to do this? (Perhaps something internal to the draggable and droppable interactions that I missed?

Related

How can I lock a resizable div to the bottom of the page?

I have 2 resizable divs in a container. One resizable div is contained in the second one.
<div id="container">
<div id="div1" class="droppable resizable1">
<div id="div2" class="droppable resizable2"></div>
</div>
</div>
Actually, I have two problems with these divs and I think they are linked.
First, if I resize div1, div2 and again div1 to the bottom, div2 is moving out of the container.
The second problems happens in the same way. The div2 is going up with the same tests as in the first problem, that's why I think they are linked.
I have tried to change my CSS but I haven't found a solution. At start I thought it comes from the minHeight of JQueryUI so I checked the documentation but my resizable function looks right.
I have made a https://jsfiddle.net/Spydaxx/4ez2xtan/85/ so you can see what I am trying to do.
I want the two divs to be lock at the bottom and resizable upwards. Actually, I have some troubles with the position when resizing but the resize itself looks well.
Thank you for your help and your time.
so if I understand correctly you want to be able to move either div freely within the height restrictions you set. unless you need the divs nested, which I'm not sure if that would work with what you're trying to do, this will work
<div id="container">
<div id="div1" class="droppable resizable1"></div>
<div id="div2" class="droppable resizable2"></div>
</div>
$(".resizable1").resizable({
handles: 'n',
containment:'#container',
minHeight: 100
});
$(".resizable2").resizable({
handles: 'n',
containment: '#container',
minHeight: 50
})
I didn't change any css so I didn't include the code here. just don't nest the divs and change the container for div2

jQuery menu links mouseout issue

I have menu links on a page that lie across the top horizontally.
When I hover on a particular link, a div appears below it showing child divs. for this I used jQuery hover function.
Now, when I mouseout of the link, the div that appeared should dissappear, I used mouseout function to do that.
My problem is, when I am leaving the link to go into one of the child links, it should not dissappear. How do I achieve this?
as I move my mouse towards the child links, as soon as I moouseout of the parent link, the child div dissappears.
You can give them(menu and layers) the same class.
Sample code:
<div class="menu keep">
<div class="layer keep">Layer1</div>
<div class="layer keep">Layer2</div>
<div class="layer keep">Layer2</div>
<div class="layer keep">Layer3</div>
</div>
and in JQuery:
$(".keep").on("mouseenter",function(){
$(".layer").show();
});
$(".keep").on("mouseleave",function(){
$(".layer").hide();
});

Scroll the fixed div if scrolling occurs

I want a layout the was showed in the following demo
http://jsfiddle.net/EX6qV/2/
<div class='container'>
<div class='one'> One </div>
<div class='two'>Two</div>
</div>
Here the div one has position:fixed. I want to scroll the fixed div (One) if scrolling happens.
Due to the fixed position the div sticks at that position hence it overlaps with div two if scroll happens on zooming a page.
Is the any jquery methods to overcome this problem.

onMouseOver and onMouseOut show and hide div

Ok what I want is when the user moves the mouse pointer over a certain div it should appear. And when the mouse leaves the div that div should disappear. This is what I have done so far.
<div id="center" style="position:absolute; left:45%; top:35%;" onMouseOver=" document.getElementById('center').style.visibility = 'visible'" onMouseOut="document.getElementById('center').style.display = 'none'">
But my problem is that when the mouse leaves the div it disappears but when I again go over the div it does not appear. How can I fix that ?
When you hide the div, you will not be able to mouseover it again. That is usually the point of hiding an element, so that clients cannot access it. One thing you can do is add a container and attach the mouseover event to the container.
<div onmouseover="document.getElementById('center').style.visibility = 'visible'">
<div id="center" onmouseout="this.style.visibility = 'hidden'">
</div>
</div>
Try like this:
<div id="center" style="position:absolute; left:45%; top:35%;background-color:#03C;width:400px;height:400px;opacity:0;" onMouseOver="document.getElementById('center').style.opacity = 1" onMouseOut="document.getElementById('center').style.opacity = 0">
I added a background color to the div and some dimension because if the div has nothing inside and no costraints for the dimension it collapse.
Hope this is useful

Jquery Draggable UI overrides normal browser behavior for HTML elements inside draggable-enabled div

I have a jquery ui draggable div, and the HTML contents do not behave normally because of the draggable.
<div id="popup"> <!-- this popup is draggable -->
This text is not selectable. When I try to select it, the popup div is dragged.
<div style="overflow:auto; height:50px">
Lots of text here, vertical scrollbar appears. But clicking the scrollbars don't work (doesn't scroll the content). Each click (mousedown-mouseup) is considered "dragging".
</div>
</div>
How do I prevent the draggable ui to override the normal browser behavior for HTML elements?
You can disable dragging from the inner <div> like this:
$("#popup div").bind('mousedown mouseup', function(e) {
e.stopPropagation();
});
event.stopPrpagation() stops a click on that inner <div> from bubbling up to the outer <div> that has the drag events bound to it. Since the event will never get there, those drag event handlers won't interfere. You can run this code before or after creating the draggable, it'll work either way.
Try add your div unselectable attribute=off:
<div id="popup" unselectable="off">
...
and css:
[unselectable=off] {
-moz-user-select : all;
-khtml-user-select : all;
user-select : all;
}
I'm not tested in jQuerry.UI, but this is my workaround in extJs and Dojo...

Categories