Develop Reference

Mouseover triggering underlaying sibling?

I have 2 sibling divs. One div is a sub-navigation that partially overlays the slider div. I have a mouseover event on the slider, which hides the sub-navigation.
The problem is, as soon as I mouse over the sub-navigation, the slider mouseover event is triggered even though my mouse isn't touching the slider yet - although the mouse is technically over the slider - it's just being overlayed by the sub-navigation.
Hopefully I explained this well that someone will understand. Is there any way around this issue?
Thanks.

If you are trying to hide the second sibling, this will work. Just replace the css class names (subNav, slider) with whatever they actually are. Also, instead of left:100px do whatever you wanted to do here to the second div.
div.subNav:hover + div.slider {
left: 100px;
}
The plus sign (+) is a "adjacent sibling selector" in css.

Changing jQuery Div Hover Area

I have a jquery code that works like so... When you hover over a block, a new div slides up and a red block div fades out, then when you leave the hover area the div then slides back down and the red block div fades back in. Everything works fine, here is the jsFiddle:
http://jsfiddle.net/Gsghr/119/
The only problem is when the new div slides up that says "the first item needs to toggle up", the div should stay in its place if your mouse hovers over that div. Instead, as soon as your mouse leaves the div area for the "item 1" grey block div, the other div (that says "the first item needs to toggle up") will disappear.
I tried changing the hover area for the divs via CSS like so, but it did not work...
#coltab li:hover + #coltab ul li, #coltab ul li:hover {
display: block;
}
Maybe I was doing that wrong. But again, it should work so when you hover over the div that says "the first item needs to toggle up". that div should stay in its place and not slide back down. Again, here is the jsfiddle, http://jsfiddle.net/Gsghr/119/ and any help would be appreciated. :)
Also if you hover over the divs multiple times in a row there is jumping and the whole function of the hover might even mess up, if anyone could fix that or has an explanation for it that would be awesome.

Change the z-order of the div you want to stay up so that it's higher than the red div. If that's not visually desirable then try using an invisible div with a higher z-order that matches the same size of the div you want to stay up.
The jumping is just coming from how many times the hover is called. I don't know the exact answer to this question but I imagine you can use "undelegate" to keep the events from stacking.

I am also a recent Jquery enthusiast, but I suggest using mouseenter and mouseleave methods.
The mouseleave method will not let the event get down to the child level, and hope that should do the trick.
Check the example demo here: http://api.jquery.com/mouseover/
Tc, Amit

jQueryUI - Drag and Drop issue - dragged element goes behind other DOM elements

I am trying to implement drag and drop between 2 Div's
Please refer my fiddle below :
http://jsfiddle.net/sandeepkram/SAUCa/
This layout is a replica of my application. In the fiddle you can see that if you drag an element within the first div (on left side) it keeps moving within that div forever - though if you just motion to mouse to drag and drop it onto the right side div, it does actually work.
Here the problem is the indefinite scrolling / dragging of element within left side div. I dont know what the problem is here -
In my application I have another problem, in that when I drag an item out of the left side div, it vanishes though I can drop the cursor on right side div and the drop appears to have worked correctly.
Need help to know why the dragged element is disappearing.
I have looked up all the questions and resources related to this, sortables etc on stackoverflow and the net - but no use.
I have also tried to use the "stack" option but no use
$.each($("ul#secondaryKPIList ul > li"), function (index, tListItem) {
$(tListItem).addClass("SecondaryKPIDraggable");
$(tListItem).draggable({
revert : 'invalid',
stack: '.SecondaryKPIDraggable'
});
});

To solve the visual issue, you could just remove the overflow changes
overflow-y: auto;
overflow-x: hidden;
on the .KpisListItems setting it as the following fiddle: http://jsfiddle.net/GEWLs/2
These rules are messing with the way jQuery sortable handles and calculates the positioning, hence the strange behavior.

I know I'm kinda late, but heres is another solution that I find easier, just add the following css:
.ui-draggable {
z-index:9999;
}
9999 is probably overkill though.

My guess is it's because you are using 'list' markup. If you tried using 'divs' instead for your draggable items I'd wager it would work as it should.

click events and css attributes not attaching to divs, possibly because divs are "mostly padding"

I'm trying to attach click events to a couple of divs. One of which has no height or width, just borders. Maybe it's just the browser, but the clicks are being triggered very unreliably. Even the css parameters .class:hover{} isn't really working.
$("body").on("click", "._tlh_dropdown, ._tlh_dropdown *", function (event) {
isn't working when the a div contained by ._tlh_dropdown is clicked. And the div ._tlh_dropdown_close_button is not removing it's parent div when clicked, nor turning a darker shade of gray when it is hovered over. What am I doing wrong here? I assume it has to do with the click event not being applied to the areas of the divs that are "just padding". Is this the case? How can I overcome this?
http://jsfiddle.net/UrNUM/7/

This is happening because the underline element that is a div element overlaps the elements in question . As you know div is a block level element.
One work around is to to set the 2 divs to inline-block
._tlh_dropdown_input_container, ._tlh_dropdown{
display: inline-block;
}
Check Fiddle for hover
If you want the div to be block level as it is then you can also play around with the z-index
._tlh_dropdown_close_button{
z-index: 1;
}
This will make sure the close div is always on top of the underlying container
UPDATE
2 events fire for every click event on the page..
So the content is not shown when u click on the image because of this condition
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown_content').length)
return;
This happens because the e.target when you click on the arrow image will be the arrow and not the tlh_dropdown .. So it fails on this condition and moves to the next statement where the content is removed.
Change it
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown').length
|| $targ.closest('._tlh_dropdown_content').length)
return;
It should work..
Check Fiddle
Also I feel the same can be accomplished with a lot less code. You can always have the HTML already built and then hide or show based on the condition.

Regarding the close button, if you hover "_tlh_dropdown_input_container" in the inspector, you can see that it overlaps the bottom part of the X button. That's why the hover/click event on the X is not caught below the middle of it.
Regarding the down arrow, just wrap it with another DIV on which you'll add the events. You can achieve minimal HTML by using a single DIV and adding the arrow to it using CSS :before or :after.

jquery draggable and droppable - stop inheriting parents css

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!