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;
}
Related
I was having difficulty trying to figure out how to drag and drop between two different div's and I found a reference to http://docs.jquery.com/UI/Sortable#option-connectWith in another post and it works magnificently... Almost anyway.
I am now able to drag items between divs but if I drag the last item from a div it becomes closed to me. I can't drag anything back into it... Is there something basic I am missing?
Thanks for any help!
You could just add a display:none; element in each div
When you drag the last element from the div it's likely collapsing, which is almost like removing the div. As state in the comment you should set a min-height for the div, and possibly a min-width as well to prevent the div for collapsing when it's empty.
I'm creating a popup for elements in the DOM, much like Qtip. I know there are alot of done plugins for this but I wanted to create one myself.
Basicly what the code does:
Hover element, take that elements offset and alter a little bit so that the popup is over the element.
Show the popup element and then change its position according to the element that was hovered.
But it seems like I've failed. It doesn't work in IE7.
When I hover an element in IE7 my popup shows in the right location BUT the element that was hovered changes position.
JSfiddle: http://jsfiddle.net/egj46/
I can't say what exactly is causing that, it can be solved by moving the popup div "pHolder" to after the content.
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!
I have a simple Javascript drag function. You can see it here:
http://jsfiddle.net/XpAyA/12/
The red #dragger div is draggable. It is nested in an overflow scroll div but it doesn't trigger a "scroll" when it gets over the limit. Probably due to the fact that it is positioned absolute.
Is there a way yo fix this? Make the scroll happen when it exceeds the limits?
Thank you
First of all you have to give the containing div a position:relative. That way the absolutely positioned dragger stays inside of it and can't go over it's borders.
I'm not sure why the scrolling doesn't work, but is there a reason you scripted your dragging function yourself while you do have access to jQuery? There's a powerful function in jQuery called draggable that does exactly what you want.
Here's a version that scrolls http://jsfiddle.net/vcJuF/1/
I removed the inner div, which seemed to help. The scrollbars update now, I think you just need to update your javascript to actually scroll the div as you drag.
Want to know How to create modal dialog/pop up without title bar using javascript which will work on both IE and FF.
Thanks.
You're going to have to make a div that sits--absolutely positioned--in the middle of the viewport (or wherever you want it) above all the other elements--using z-index. This is where your content goes. Now, I recommend a film to go behind it, but above everything else--again using z-index. Then place a handler on that film that places focus back on the "modal" div. Also, you might want to place a focus handler all the other elements (not the "modal" div), using event delegation, that places focus back on your "modal" div--just to be sure.
You also might want to look at how jQuery UI does it. You'd only need to remove the title bar from. In fact, you probably could just use that one and mess with the CSS to hide the title bar.
I do this with two divs. I lay one div over the whole screen and make it semi-transparent, then I lay my "popup" div in the center of the screen with a higher z-index. The popup div can then contain whatever content you want.