html mouseover event on element border - javascript

I am wondering whether it is possible to bind mouseover event to one of the HTML element border, say, the left border of a div.
The div is a container for other complex html elements, and there are mouseover events attached for its sub elements. Binding mouseover event to the whole container div itself is a method, however the user will not be able to distinguish whether he select the container or the sub elements.
I want a very obvious method to indicate that the container can be selected, like highlighting the container when he mouseover the left border area.
Or is there any other good way to solve the problem?
Thank you.

Borders are not elements, and as such you cannot bind mouseenter events to them. If you wanted this type of functionality, you would need to place a series of elements around the edges of the element (or at least next to your target edge), and bind to that.
This particular approach was taken by Dropbox in their web-based upload feature. When you drag a file from your desktop onto their page, you'll notice that div elements around the top, bottom, and sides all fade into view. This was accomplished with four div elements placed near the edges of the viewport.

do you want like this
http://jsfiddle.net/GBpcg/
EDIT : http://jsfiddle.net/GBpcg/2/

Related

How can I limit Draggable to not cover some elements in the Draggable area?

I'm using the react-draggable library to move elements in the body. But right now I'm struggling with one issue. It's about elements in the draggable area.
The idea is:
User can move some elements over container div (works fine) (there can be multiple draggable elements)
User can't move an element on the other element which is also draggable element in that area
I want to prevent overlapping the elements in that zone.
Do you know how can I achieve it? :)
Thank you so much!

Register mouseover of an element beneath another one

I'm trying to find a way to register a mouseover event on an element that is beneath another element. I have rows which, when moused over, make a new div appear and positions it on top of the hovered div.
Here's the page: http://www.brunobryan.com/dev/stephanebourgeois/index/
When you mouseover a row, an image appears on the right. I would like to register the mouseover event on the row even when the mouse hovers above the image.
You can permit the cursor to pass-through the image using pointer-events:
#index-hover {
pointer-events: none
}
Note, this isn't supported in all browsers. Better support if you use SVG.
This is not really possible, you have a couple of options for workarounds.
Either a) Register the hover event on a container that will contain both the row and the image.
or
b) Bind the same hover event on the image aswell.
i think the answer here is going to be that your <img> tag needs to be placed inside of the <tr> tag, and then absolutely positioned. you'll probably want to make the row relatively positioned so that you can use the row's position as context.

Disable Clicks on Div Overlay, But Allow Children Clicks

I have a div that contains some text inputs. I would like those text inputs to clicked and receive basic mouse events, but I would like to disable the containing div. Is there a way to do this? The div has a higher z-index than some other elements, it is absolutely positioned, and is not allowing me to click elements underneath it. Thanks!
You cannot click elements that are below (depth) another element. Give the actionable input elements higher z-indexes (and abs/rel positioning) than the covering div.

JQuery Draggable to Drag to Position Programmatically

I want to add buttons somewhere on the page to manipulate JQuery Draggable element without mouse dragging, i.e. programmatically. In other words, I want to shift (or pan) draggable element inside its container up or down, left or right depending on what button user clicks. How can I do it? I cannot seem to find that option in docs. Do I simply manipulate CSS left/top to achieve it and make sure I do not go outside of the container?
$(".drag-view").draggable({drag:function(event, ui){containment:a /*...*/}});
You could draw the element on the screen and then use $.animate() to move it into position. The element would have to be positioned absolutely to animate in that fashion and would, as you mentioned, be a result of top and left.

propagate mouse events to obscured elements

Is there a way in JavaScript to propagate events to elements obscured by another one? Because I have an element with position: absolute that obscures elements that aren't parent elements of it, but I'd like click, mousemove and mousout events to pass through this element. The solution can be Mozilla Firefox specific, because I'll use it in a Firefox Add-On.
Maybe the css property pointer-events:none; is what you looking for. It's used on the twitter homepage for example, so you can click on the text in the "trending topics" also when it overlay by fade out graphics.
You could use getElementsByTagName("*") to get all elements in the page. Using a find-world-position function, you could get the position of an element relative to the top left corner of the page. You could now use offsetWidth, offsetHeight, and mouse position [browser specific, lol] to check if the cursor is over your element.
If the cursor is over your element, fire the event.
The above function should be attached to window.onmousedown/onmouseup/onmousemove/whatever

Categories