Develop Reference

Adding gradient fades to content that overflows a container

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

Drag and drop in separate containers, and adjust position of dropped element

[Edit] : Solution is given in TCHdvlp's comment to his reply below. Thanks a lot !
I need to drag elements from one container (container1) to another (container2) and back, like in this fiddle :
http://jsfiddle.net/U2nKh/20/
(this was not created by me : see original question)
As you can see in the exemple above, when the element is attached to its new container, its 'style' attribute is erased, and it snaps to the top left corner of the new container.
$(ui.draggable).appendTo($(this)).removeAttr('style');
I'd like the draggable to stay in place in its new container, where it's dropped.
But if I delete .removeAttr('style'),
$(ui.draggable).appendTo($(this));
the position information is kept, but is inexact since the parent of the draggable has changed. As a result, my draggable is positionned much lower when dropped from container1 into container2, and much higher in the other case.
I am able to compute the new position where my element should "land", based on the relative positions of the containers. But I don't know how to define this position.
Should I let the .removeAttr('style') and recrete it fom scratch with new values ? But how?
Should I delete that part, but modify the position values? But how ?
I hop I am clear enough for you to give me some advice.
Thanks !

Carefully read all the fiddle!
The draggable div has top:10px; and left:10px; properties. When it's dragged, those properties change. When it's dropped in the other droppable area, the removeAttr('style'); will remove inline style and set back the 10*10px offset. BUT, it's not snapped.
Also, the draggable element is position:absolute but the droppable area is position:relative. It means that the child element is positioned relatively to its parent.
That's why, with the original fiddle, the 10*10px position looks to be always the same, whatever the droppable area.
Remove in the css position:relative for both container and position:absolute for the div.
Remove the removeAttr and the append in the dropped function.
Because we don't want the element to be attached to the area, we don't use append. We will use 2 variables to compare last and current droppable area.
http://jsfiddle.net/TCHdevlp/U2nKh/576/

selecting an element on mouse click overlapped by another transparent div

I am working on a dashboard where user can drag and drop elements to create html pages.Now,he can have multiple images using an image component.We have managed to calculate the z-index of the images and they can be adjusted using up-down keys.
Issue:
The issue we are facing is when we select a image component we attach a dotted layer above it for helping the user to easily drag and resize it.If the user places the images as shown in the image below
we are not able to select the inner image again because the z-index of the selection div(the one with the blue dots) is(has to be) the highest(highest bcoz we have to use it for all components).So if I try to select the inner image now it cannot be selected.How can I handle the situation? For reference it works on this site as expected.
I believe we have get the element under the parent when it is clicked.But not sure how!We are using javascript,jquery to handle the events.

You can use JavaScript or jQuery to get the position of the inner image, and when the user clicks on the outer image, check to see whether the mouse position lies within the range of the smaller image. The range can be calculated with the position, width, and height of the inner element.
To get the element's position: use jQuery .offset() or .position() (The former is relative to the document, the latter to the parent).
To get the mouse position: http://docs.jquery.com/Tutorials:Mouse_Position

You could consider hiding the masking element quickly in order to gather the coordinate for your underlying element, when done, you could re enable visibility for the masking element. Use document.elementFromPoint() in order to get the DOM item from mouse coordinate.
An example:
http://jsfiddle.net/s94cnckm/14/
Alternatively you can use The CSS property pointer-events: none; on the masking element.
Related:
https://developer.mozilla.org/de/docs/Web/CSS/pointer-events
How to detecting a click under an overlapping element?

Obscure break in div tag

I am trying to make a div which expands to show hidden content when hovered over. However there seems to be a random space in between images inside the div, hence a premature onmouseout method call. Is there any way to get rid of this problem?
Check out a live version here.

The onmouseout event bubbles.
Therefore, you get the event whenever the mouse moves out of one of your child elements.
You need to check event.target and make sure it's the <div> element. (Or use jQuery's hover method)

Where exactly is the problem? is it the black space between the first two car images when you hover over the first car?
The div is expanding to more than what the image width is. set the width of the image to be 300px.
Then try setting margin,border,padding to zero on all container divs
div.itemHolder {
border:0 none;
margin:0;
padding:0;
}
I think that since you are setting both the height AND width properties, that the image is coming up with a weird aspect ratio. try setting only one of them. If that is not a part of your worries, please ignore

I must not have explained this clear enough, but we managed to fix the issue.
Many thanks for the responses.

Exclude item from handle on jQuery draggable

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.