I have a draggable <div> with overflow set to auto to show a scrollbar when the content is too wide.
I want the entire content of the <div> to be draggable, so I have not added a handle. Now when I try to drag the scrollbar, the entire <div> is dragged instead of scrolling the content.
Is there a way of excluding an element from the handle of a draggable <div> in jQuery?
I need something like:
$("#element").draggable({
handle: "not(#thisTable)"
})
Is there a way of doing this with selectors or something like that?
tnx for your answer, but i found what i think is a better solution....
there is another option for draggable called 'cancel' and it excludes the selected element from the handle of the draggable element...
$('#container').draggable('option', 'cancel', '#excludedElement');
hope this helps someone else...
Add a div inside your div, width & height 100%, no margin, no padding, and put your content there. Set its overflow to default and set it as the handle. That way, the scrollbar of the parent div will no longer be in the handle, thus not initiating the drag.
Related
I'm trying to add a gradient fade on content that overflows a , as seen here: http://jsfiddle.net/6k3vV/
On the div I have a set height of 200 pixels
I want to optionally show the fade depending on whether or not the content actually overflows the 200px
Things work ok if I have all the content/resources already loaded:
Something like <h1>Hello World</h1> will work fine and I can calculate the height that that would occupy
if I insert it into the document
However, if I have something like <h1>Hello World</h1><img src=".." /> it will not work as I cannot reliably
determine the height the contents would occupy until the image itself is loaded.
I'm trying to add this functionality on a comments page where I inject each comment into a wrapping div and optionally
display the gradient fade. The current solution that I am thinking of is checking for and tag and attaching an onload
event handler that will calculate the height after the image loads.
is there a better way of doing this?
Since you have a set height, it's easy. On doc load (or an event), just check the height of each "section" and append a div w/ the class fadeout if that height is greater than 200.
Fiddle for you
I would recommend adding a class to your <section> element rather than using that element as a whole selector.
You may want to play around with using the height of .fadeout as a % rather than em
I'm trying to drag an <img> inside a container that has fixed width and height.
I already searched on SO and found this but it does not work for me.
Here it is a fiddle of what I'm trying to achieve; there is a container which is the only part of the image I want the user to show, and a draggable image under it. It has to be constrained in the .container element depending on the orientation of the image and the container must include always a part of the image, never a blank part, in other words the image's borders must always stay inside the container.
I tried to work with the containment property, but I don't understand how does the Array option works ( http://api.jqueryui.com/draggable/#option-containment ).
$("img").draggable({
containment: "parent"
});
and remove .active
Is it possible to set pointer-events to only react to scrolling or drag on a touch-pad? I have a div 'in the way' for scrolling a complex html arrangement* and I would like to know if I can limit the pointer events to only react to scroll / mouse wheel actions.
I am interested in knowing whether I understand this correctly. If pointer-events:none; means that all events are void, how can I kill all events but leave one active?
I have set up an HTML area that is bigger than the box it fits in, but if I were to show the scroll bar, it would seem higher than it should be because of a pop-up (position:top) element. This area still needs to be scrolled so to achieve this I have used jQuery to make my 'box to scroll' follow an invisible div within a div:
<div id="scrollcontrol"style="overflow-y:auto;overflow-x:hidden;position:absolute;
top:12px;left:180px;width:40px;height:1300px;">
<div id="catscrollpos"style="position:absolute;
top:0px;width:200px;height:2250px;">
</div>
</div>
Script
$('#scrollcontrol').scroll(function({
$('#rangetable').css({
'top':$('#catscrollpos').position().top+'px'
});
});
As for specification in the docs:
When an element has applied pointer-events: none;
The element is never the target of any mouse events and any events are void;
Please look at this demonstration:
http://jsbin.com/wewosumehi/1/
Events are not being fired, you cannot even scroll the container.
This is hard to explain but I have draggable and droppable elements on my page. Some of the droppable elements have draggable elements inside them already but most don't.
When you hover over the droppables a back-ground image appears so you know your hovering over it. However, when you move a draggable into another droppable, now hovering over the newly moved draggable a background image appears in the OLD droppable which used to contain it.
if you look here you can see my problem: - try moving one of the yellow boxes around and then hover over it after you've moved it. The background image appears in the initial position.
http://liquidlizard.net/
Can anyone tell me how to sort this out? I'd appreciate it :)
EDIT here's some of the code I'm using
<div id="row-2col0" class="empty"><div class="position"><a href class="bookmark" target="_blank"></a></div></div>
<div id="row-2col1" class="empty"><div class="position"></div></div>
<div id="row-2col2" class="empty"><div class="position"></div></div>
JS:
$('.draggable').draggable({start: function() {var initialposition = ???}});
$('.droppable').droppable({drop: handleDropEvent, accept:'.bookmark'});
function handleDropEvent( event, ui ) {
}
CSS:
.empty:hover{background-image:url(../img/tilehover.png);}
Basically everything has a class 'empty' which shows the background image when the item is hovered over.
The problem is that your dragged element is a child of the div it came from, so when you assign the empty class to that element, because your dragged element is a child of that didv, your CSS rule, .empty:hover comes into play.
To avoid this problem, put a second div inside of each box, like this:
Add a new div inside of the div with the class empty.
So this line: (and all the ones like it)
<div id="row-2col3" class="empty"><div class="position"></div></div>
Changes to this: (I broke it down to make it easier to read.)
<div id="row-2col3" class="empty">
<div class = "elementContainer"> <!-- This is added..-->
<div class = "wordHolder"></div> <!-- ...............-->
</div> <!--................-->
<div class="position"></div>
</div>
Then add this to your CSS:
.elementContainer {
position:relative;
}
.wordHolder {
position:absolute;
width:65px;
height:65px;
}
And finally, replace your CSS rule .empty:hover with elementContainer:hover and it should work!
How and Why it works
To quote w3schools,
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
So using .elementContainer with the relative attribute set serves as our container for our absolutely positioned elements with the class wordHolder. And they do not get in the way because they are removed from the regular flow and all the other elements act as if it did not exist.
You can read more about positioning elements here: http://www.w3schools.com/css/css_positioning.asp
Hope this helps!
This problem was not solved.. it was just evaded.. so dont use this as reference
what i have is
<div>
<img onclick='this.style.display="none";this.parentNode.getElementsByTagName("div")[0].style.display="block";this.parentNode.getElementsByTagName("div")[0].style.width=this.offsetWidth+"px";this.parentNode.getElementsByTagName("div")[0].style.height=this.height+"px";' src='http://static.***.pl/cache/***.pl/math/cafc682a15c9c6f1b7bb41eb004d6c45935cbf06434221f7201665f85242cb94.png'/>
<div onclick='this.style.display="none";this.parentNode.getElementsByTagName("img")[0].style.display="inline";' style='display:none'>
<pre style='width:100%;height:100%;'>
\lim_{t\to\infty}\int\limits_1^{t} \frac{1}{x^2}\,dx=\lim_{t\to\infty}\left(-\frac{1}{x}\right)\bigg|_1^t=\lim_{t\to\infty}\left(-\frac{1}{t}-\left(-\frac{1}{1}\right)\right)=\kappa=1880154404
</pre>
</div>
</div>
yes i know its ugly but well..
my problem is when i click the image it does what i want but if i then click the div it only works if i click on the text and i want it to work for the full div !
i dont want to use document.getElementById etc...
there will be multiple instances of this code and it will be in unknown places.
i really dont want to write up bloated code to do this (this includes jQuery,flash,.NET, Zend Engine etc etc...)
my question is simple :
why the hell does it work only if i click on text and how to fire onclick for the whole div
In your original Javascript action, you were setting the width and height of your div to zero, which means that there is no area to click on.
Here is a demo: http://jsfiddle.net/audetwebdesign/ndKqM/
which should demonstrate the fix. I added some background color and padding to show the dimensions of the various boxes.
I removed the parts of the JS that calculated width and height and that fixed the issue.
If you click on the lime green area that holds your text, the action works.
Unless there is some other reason, you don't need to adjust width or height.
It's hard to tell what behavior you really want.
You are setting the image to display:none, and then you set the style.height and style.width of the sibling div to image.height and image.width. So - those will both be zero (as display:none is set for the image).
Do yourself a favor and set background colors or borders for your divs so you can see what's going on as you code.
Use an A tag with your onclick event and a null URL href="javascript://" instead of a DIV