Develop Reference

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

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.

Propagating JavaScript events through a tooltip-like div

Here's the jfiddle for what I'm trying to achieve: http://jsfiddle.net/fmvmA/
I have two issues that I'm facing with this example; both of which I figure are related to event propagation. When the mouse enters the container, I'd like to have a div follow the cursor. When the cursor leaves the container, the following div should disappear. This seems like it should be simple... but I'm experiencing problems with the div flickering as you move the mouse, my guess is because the mouse is technically leaving the container when the tooltop div appears.
Additionally, I'd like to be able to click anywhere inside of the container and append a copy of the tooltip div to the position that was clicked. The example is finicky...but if you set the offset so that the tooltip div is no longer overlapping the mouse then you can see it work.
Is there any simple way to achieve my two goals?

It flickers because it triggers mouseout when the tooltip is shown since the #ghost is outside the container.. Move it inside and it should be all set..
DEMO
HTML:
<div id="container">
<div id="ghost">
Click to drop me!
</div>
</div>
Edit: I noticed a bug when having it inside the container that the #ghost doesn't hide even moving outside container.. so I added an offset to the #ghost so it appears 2px below the cursor.
JS:
$('#container').on('mousemove', function(event) {
$('#ghost').css({
left: event.pageX - $('#ghost').width() / 2,
top: ((event.pageY - $('#ghost').height() / 2) + 2) // +2 px is the offset
});
});

Here's a demo that works, you'll need to adjust the append positioning a bit. I stayed with the method of appending only on click as per original demo
http://jsfiddle.net/fmvmA/4/

animating div elements left to right and back

I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left

Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/

If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.

You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/

Jquery Mouseenter triggering parent elements

I am trying to create a firebug type rollover element selector, but seem to be having problems with the rollover triggering parent elements that contain my target element.
See the following example:
http://jsbin.com/elofe3/edit
There are 3 divs on the page, all with mouseenter/mouseleave listeners, the largest is totally independent of theother two, the second largest is position ontop of the largest but is not contained within it, and the sallest is nested within the second largest, (it's parent). It may be easier to visualise if you look at the source.
If you click preview and roll you mouse over the central div, you will notice that the second largest div also continues to respond to the mouseenter event and remains outlined in red. To fix this, I tried to add $(this).parent().trigger("mouseout"); on each rollover listener.
http://jsbin.com/elofe3/4/edit
But them when your mouse leaves the smallest (pink) div, to the middle (black) div, the middle div does not fire (presumably because mouseenter/mouseover is not being fired as the mouse has never actually left the central div.
I understand that in this situation I could just add $(this).parent().trigger("mouseover"); to the mouseleave listener on each div, but it would'nt work in evey example, (for instance, a div nested within its parent, but is positioned outside of that parent on the page.)
I require some novel solution to this, it needs to work very similarly to the firebug, element selector (the tool that lets you rollover elements on the page (higlighting them) and click to select them and triggering it to show the source for that element).
Any help greatly appreciated.

This is how mouseenter and mouseleave work. But you are mislead, mouseenter is not triggered on the parent element. Instead, mouseleave is not triggered if you hover over descendants. So it is not that the border is added again, but that it is never removed.
Add the event handlers to mouseover and mouseout and prevent the event from bubbling up:
$("div").mouseover(function(e) {
e.stopPropagation();
$(this).css("outline", "solid 3px red");
});
$("div").mouseout(function(e) {
e.stopPropagation();
$(this).css("outline", "none");
});
http://jsbin.com/elofe3/5/edit