I am using jquery-ui draggable. When I drag my box to beyond the bottom of the screen, the body shifts down. How can I prevent this from occurring?
Tried...
I have tried making the draggable to be containment: "*tag*" where tag is html or body.
Still trying containment, I have tried surrounding the layout with a div, however, this breaks the layout scroll-ability of LHS, RHS and center.
The problem is solved by making the body - position: static !important. This then breaks the layout.
For reference, here is the jquery-ui draggable page.
Css Layout
I have a layout which is header, fixed-height-footer, left and right fixed-width-scrollable, fluid center-scrollable. The header and footer is achievable using a large body border hack. See this question for information on the layout. How to have a 3 column layout with fixed left/right, fluid middle and fixed footer?
Reproduction of the problem.
Here is my Fiddle: http://jsfiddle.net/valamas/LrXCA/
Please click and drag the blue box below the footer to see a black band or a further pink band.
Pass scroll: false to your draggable constructor.
By default the auto-scroll option is set to true, if you don't want it, you have to specify scroll: false when creating the draggable. See scroll option on the jQuery draggable page.
Working jsFiddle
Related
I'm working on a project whare I need to allow drag and dropping from a sidebar to some content.
It is very important, that the content (when hovering it with the draggable) expands with applying some padding (to the inner content, in the example code an image).
When I enter the droppable with the draggable, the padding is added,
which makes the droppable a bit bigger in size (both width and height).
Jquery UI does not "recognize" this change in size, it means that when I move the draggable a bit closer to the bottom border (or to the right border), the "out" event is already triggered (even if it's clear that the draggable is still within the (new) boundaries of the droppable).
Only after moving the draggable a lot around (going close to the left and top border without leaving the droppable), jquery ui "recognizes" the new (bigger) size of the droppable, and you can move very close to the bottom or right border of the box, without triggering the "out" event.
for my project, it is very important, that I can go fully to the bottom and right border of the droppable, without the "out" event being fired.
Anybody has a clue how can I "teach" jquery ui in drag mode that the size of the droppable has changed? (without moving around in the droppable and aproaching left and top border)
I analyzed the problem in jquery UI.
it comes from the fact that the method "prepareOffsets" is only called when you move the draggable to the upper edge of the expanded droppable. "prepareOffsets" is correcting the new size of droppable and everything works correctly.
A small patch in the
$.ui.plugin.add( "draggable", "scroll", {
Plugin, method:
drag: function( event, ui, i ) {
fixed that problem. Instead of calling "prepareOffsets" only when near the top of the droppable,
insert the following line:
if (scrolled == false){scrolled = true;}
just above the last if statement of "drag" method.
Above this statement:
if ( scrolled !== false && $.ui.ddmanager && !o.dropBehaviour ) {
$.ui.ddmanager.prepareOffsets( i, event );
}
It is maybe not a perfect solution (as it maybe calls "prepareOffsets" too often), but it solves all the problem I had with the expanded droppable.
"over", "out" and "drop" works correctly with that patch.
Cheers
I am trying to use jQuery Ui to drag an overflowing child div, this div does drag but further than I like. I only want it to drag the scroll-able amount.
Hopefully this codepen will show you want I mean -
http://codepen.io/seanjacob/pen/RKKEyO
$(".box").draggable({axis: "x"});
All widths will be responsive. It doesn't have to be a jQuery Ui solution.
This is exactly what I was looking for -
http://qnimate.com/javascript-scroll-by-dragging/
github: https://github.com/asvd/dragscroll
It just drags the scrollbar, nothing more or less and is responsive.
I have an image at http://jsfiddle.net/3GWL2/2/ that I want to make draggable and resizable:
I'm experimenting with three lines:
1. //$('#clown').draggable();
2. //$('#clown').draggable().resizable();
3. //$('#clown').resizable().draggable();
If I only uncomment line 1 the image is draggable fine.
If I only uncomment line 2 the image is resizable but it's not draggable.
If I only uncomment line 3, the image is draggable, but but only within the original size, and the image is resizable.
Apparently resizable and draggable are far from independent of each other. Could someone explain what's going on here?
Thanks
jQuery UI's .resizable() makes your element resizable by adding a ui-wrapper div around your element that is initially the same size as your element, and setting your element to fill both height and width. Making your element draggable only allows it to be dragged within the ui-wrapper div.
If you want to be able to both drag and resize, apply .resizable() first, then make the wrapper draggable by calling .parent().draggable() on your element.
$('#clown').resizable(); //adds a new parent to #clown
$('#clown').parent().draggable(); //makes the new parent draggable
1: The resizable widget creates a wrapper div with css property overflow:hidden
2: The draggable is being moved by changing: top and left property.
3: scenario's:
3.1 When you first initialize the resizable and then draggable, the draggable will get position:relative, relative to the wrapper created by the resizable.(and will get trapped inside the wrapper created by the resizable).
3.2 When you first initialize the draggable and then the resizable, the draggable will get position:static. If you use dev tools in chrome and move the draggable you will see that the top and left properties are changed however the draggable with property position:static will stay inside the wrapper created by the resizable(and visually stay on the same place).
4: this is actually a cool question, because i never really delved into inner workings of the widgets and how they interact with css. Thank you, now i can't sleep until i figured it out :)
I am able to use http://jsfiddle.net/9pUu4/ code to have vertical text in table cell. Above this table is my horizontal navigation menu which expands into links upon hovering the tab with jquery ui menu. My problem is that when hover the tab above vertical text the text laid over the menu. But it doesn't happen when hover the horizontal text on the same row of the table; that is menu covers page content. This happens on chrome and firefox.
I tried messing with z-index issue with no luck. Does it have anything to do with the transform css property (-webkit-transform, -moz-transform)? Or jquery menu conflict with vertical text?
.Vertical
{
writing-mode:bt-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
}
After digging deeper in SO, How do I make sure my drop down menus overlap and cover anything on my page?, I suspect vertical text: transform origin; or simply vertical text comes after menu on page layout, may make this vertical text "on-top".
Anyways, adding this wrapper outside of the menu works.
#div1
{
position : relative;
z-index : 1000;
}
More code
z-index = 1 as stated works, but I just want to make sure it covers everything.
I have a div in a page (footer) and I want the following to happen with CSS:
If the page has not enough content to fill the window, the div should be at the very bottom.
If the page has enough content (and a scroll bar perhaps appears) then I want the div to be after all the content.
If I do it with position absolute etc, I can't get the second case to work.
Any ideas?
I think you're looking for 100% min-height layout. Check out this post: 100% Min Height CSS layout.
You want to use a sticky footer.
For example: http://ryanfait.com/sticky-footer/
or if you google Sticky footer you find a few alternatives