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.
Related
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!
Let's say you're on a third party webpage and so you have no control over the page, except for your javascript.
You want to replace an element with an empty DOM node, but you want the page to maintain the same positioning for all other elements on the page. You don't know what the element will be and what the styles are on the webpage.
If you replace the element with a DIV, and you manually set the width and the height of that div to be the same as the replaced element, then you are almost there. However, you would not know if there are any other styling on the page that would apply to the DIV and mess things up. Also, if the replaced element was floated to the left or right, or was display:inline, then replacing it with a DIV might mess up the position of other elements on the page.
Is there a foolproof way to do this?
Instead of replacing the whole element, you could just throw away its content. However, it could still have borders and background images, not to mention event handlers like mouseover, so there are plenty of awkward cases.
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.
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/
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.