Develop Reference

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.

Get all elements below a specific element

In JavaScript, is it possible to obtain a list of all elements that an element is hovering over? I'm using an element as a cursor, and I want the other elements in the page to be underlined when the cursor element is hovering over each of the other elements.
<div id="cursor">|----------|<br/>|----------|<br/>>I'm a spaceship!><br/>|----------|<br/>|----------|<br/></div>
<div id="hi">Try to select this text</div>
<p>I want to automatically highlight all elements that the cursor element hovers over.</p>
<p>Here's an element.<p>
http://jsfiddle.net/fU3Qn/

The :hover pseudo-class applies to whatever you're cursor is over. Have a quick look at this fiddle where your mouse triggers a red background for each element hovered: http://goo.gl/zurP6
Secondly, if you are using an element as your cursor, you can instruct your mouse to pass through it by using the pointer-events: none rule. Note, support outside of SVG for this property is limited.
Other than this, the only alternative way is to use something like elementFromPoint, but this will return only a single element. I'm not sure this would even work for you since you're mouse is always obstructed by an element to begin with.
Regarding the elementFromPoint route, you could temporarily hide your custom cursor to get the next element below the mouse, and then turn your custom cursor back on, as suggested in the comments below.

Stop ng-mouseenter and ng-mouseout from triggering on inner elements

I have an unordered list where each li is a fixed small size but when you hover over it, it will expand to full size. This is done via ng-mouseover and ng-mouseout. The problem is that some of the li text contains other markup ( for example) and when the mouse enters the tag, it triggers a mouseout event and collapses the li.
Obviously the desired behavior is to have the li remain enlarged while the mouse is inside it, even if it's over a child element. Does anyone have an idea on how to basically ignore the mouseover of an inner element? I would also need to ignore the mouseout of the li if it were going into a child element.

There are two choices:
Use CSS pointer-events on your inner elements (but first check how well it is supported in your target browsers).
Use ngMouseenter/ngMouseleave instead (See this plnkr for different behavior between mouseenter/mouseleave vs. mouseover/mouseout)

Span element overflows when added dynamically

I am adding a span elements dynamically from input field into a div. When they reached the right end of the div. It overflows in the same line.
However, when the number of span elements are pre-defined into a div element then they are not overflowed and they comes down and starts from a new line. I want this way.
I analysed both the element structure in firebug and both look same.
Here the fiddle for demonstration - FIDDLE
Please let me know for any mistake I am doing and if there is any workaround.

Since span is an inline element, it's affected by whitespace in the HTML.
In your predefined example, you have a line break between each span.
To make your JavaScript version work, you need to add some whitespace.
Add either a line break:
$("#box1").append("<span>"+val+"</span>\r\n");
or just a space:
$("#box1").append("<span>"+val+"</span> ");
The choices are equivalent, but your intention may be clearer with a line break.

How about adding CSS
.span{
display: inline-block
}

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.