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.
Related
I am trying to implement an "drag to sort" function on this page. On the right side there are thumbnails which I want to be able to order. I thought to use jQuery's sortable in jQuery UI. But it seems to be a bit odd since my thumbnails are scaled through CSS and then it does not work correctly.
Now I have made something what is basically. When I have a mouse down event on a thumbnail, I clone it hide the original and put the cloned element where my mouse is. But now when I hover (while having the cloned element under my cursor) over another thumbnail the hover event is not fired for that thumbnail.
Is there another way to determine if my cursus is above a certain element in the DOM? E.g so I can detect that the cursor is above another thumbnail while dragging a thumbnail.
Well, that was fast. This CSS on the item which is dragged seems to do the trick.
pointer-events: none;
This is more the theoretical type of question.
In my web-application i want to create a button that the user can click and therefore initiate a move-mode during which (until the mouse is released) all the mouse movements are being translated onto a certain DIV.
To better understand what i mean, think of a box in which to show a portion of an image (box is overflow:hidden) - i want to make it possible to move the image around within the box, but not by directly dragging the image, but by dragging a handle instead (a handle that does not move when dragged)
In the optimum case the mouse cursor hides while the drag operation is on.
My basic idea was to use a draggable but i got no clue on how to make it accessible, yet invisible.
How would i accomplish that using javascript/jQuery?
Making the cursor invisible isn't too difficult, see the top two answers on this question.
As for the handle, you could try using jQuery UI Draggable's handle option. The key to making the handle appear stationary is to have a separate element that looks like the handle, and position the real handle (which would be an empty element) on top of it.
You would then position the real handle back where it was, covering the fake handle, when the stop() event is fired.
So, in the start() event, you would add a class to the real handle that makes the cursor invisible (using either of the methods in the post mentioned earlier), and remove that class when the stop() event fires, causing the cursor to reappear.
The easiest approach would probably be to just apply different CSS styles on the click event of the button.
Add a class to your element (on click) for the :hover pseudo-class that has cursor: move; for its style and has cursor: none; for the :active pseudo-class. You could then have these styles removed once the user's mouse left the draggable area.
On click the function might look like this:
$('#myButton').click(function(){
$('#myDraggableElement').addClass('draggable');
});
$('#myDraggableElement').mouseLeave(function(){
$(this).removeClass('draggable');
});
Have I understood the question correctly?
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've build a drag and drop interface using JavaScript where users can click and drag a link (that sometimes has a CSS background image) and drop it onto the canvas.
My problem is that the mouse cursor has the link background image beneath it during dragging. I need to add my own cursor design, so is there any way to turn this CSS background off so that it doesn't follow the mouse upon dragging?
have you tried setting :active pseudo class for anchor tags?
http://www.w3schools.com/cssref/sel_active.asp
then if that isn't work quite yet you could use !important after your deceleration possibly?
and example could be
.links:active {
background-image: none !important;
}
when the user releases the background image should return.
The best solution I found for this problem was to use jQuery to assign e.preventDefault() to the click event of the link, thus disabling the background drag effect. Then, if you want a custom cursor upon dragging, write a script to match an absolutely positioned div's (with the image as the background) x,y cords to the mouse position.
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