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.
Related
I have a div element placed on top of a canvas (with absolute positioning). Is there a way to make canvas.addEventListener('mousedown,......) work when the user clicks on the div element? I know logically it shouldn't worked as div is placed on top of canvas and user is ultimately clicking div element, not canvas. Will making div element transparent or something work? or is there any other possible solution to this problem?
For newer browsers you can use CSS pointer-events
.div_class {pointer-events : none}
FIDDLE
This answer:
cancelling mouseout event when element is overlaid
Gets somewhere near, but isn't really what I am after as it's sort of reversing my problem.
I am making an image gallery similar to the Facebook image viewer.
An image is loaded into an absolutely positioned div which is centred on screen and floats above the main page with a z-index value.
To the left and right of the image are small div elements with absolute positioning and a z-index 1 higher than the image. These div elements are left and right arrows to click through the gallery.
The arrows are hidden when the image loads, but then when the user moves his mouse over the image, the arrows should fade in, then if they move off again, they fade out... just as the Facebook viewer does.
I am using hoverIntent to achieve this, and it works fine.
BUT... when the user moves his/her mouse into the arrow div, hoverIntent sees this as a mouseleave event on the image which is underneath and hides the arrow...
So... what I need is to be able to have hoverIntent ignore the arrow divs.
The code I am using for hoverIntent is quite straight foward:
function showArrows() {
$('.imgNav').fadeIn(500);
};
function hideArrows() {
$('.imgNav').fadeOut(500);
};
$(img).hoverIntent(showArrows, hideArrows);
Obviously img is the jQuery image object and .imgNav is the classname for the arrows.
EDIT:
I have created a fiddle here: http://jsfiddle.net/jhartnoll/cE6gu/
Using your fiddle example, changing
$('.enlarged').hoverIntent(showArrows, hideArrows);
to
$('.imgViewer').hoverIntent(showArrows, hideArrows);
did the trick for me http://jsfiddle.net/cE6gu/4/
Note, on hoverintent website it says its designed to ignore children (here) so you just need to make sure you call hoverintent on a parent element that contains all these divs.
I have a problem in my code, when I hover over the image, the image will become 50% larger and it will display a text over the image, but when I hover over the text, the image will enter the state of mouseout, mouseover, mouseout, mouseover. So it will flicker a lot. How can I disable this hovering event when the mouse is over the text of the image? I tried event.stopPropagation in the text but it isn't working.
Here's the jsFiddle. Try to hover over the image, then try to hover over the text. That's the effect I'm talking about. I want to disable the text hover event. Please help me.
I found out the solution for this,
I would do something like this. Instead of using the hover effect on
the img element, do it on the parent, the $('.imgwall') and then to
increase just the image do a $(this).find('img'). and
$(this).find('h2').show()/hide() to show the text inside the hover
event.
Thanks for looking!
If you prevent hover event while inside the text box, the image reverts to the small size since it's only shown larger while hovering.
Preferably, you should hover over 1 single element, perchance the text-box with very large transparent borders to center it.
If you can, consider using a jQuery Zoom plugin. Configure the plugin so once your over the image, prior to magnifer the text-box is added.
I have an absolutely positioned div on which I am trying to trigger mouseenter and mouseleave events. In IE8/7 with the background-color of the div left unspecified (so that it defaults to transparent), the mouseenter/leave events are not firing when the cursor crosses the div's boundary, only somewhere in the middle of the div and when the cursor is over any text within the div.
When I attempt to debug the problem by adding a background color to the div (e.g. background-color: green), the problem magically goes away. The div's box model is honored perfectly and mouseenter/leave fire as when expected. It's only when the div's background color is left unspecified (or even explicitly set to transparent) that it doesn't behave correctly.
Any ideas? Googling for this IE bug/quirk is coming up with nothing.
The mouseenter and mouseleave are not registering until the cursor hits something visible. This is not correct behavior, but this is Explorer we're dealing with.
Two possible solutions:
Put a thin border on the DIV, one that matches whatever is behind it and won't be noticed. (This doesn't work; see the comments.)
Track mousemove events and have your code determine when the mouse has entered the area of interest.
(Added; see the comments.) Make your background a tiled transparent 1x1 image.
Both solutions are pretty much yuck, unfortunately.
Edit: Question: Do mouseover and mouseout show the same weird behavior?
To add to this: onclick fires as well when using Solution 3, in the answer above. It's overall a nice workaround for grabbing clicks on transparent elements over non-transparent ones in IE.
I have a container of some HTML divs and with some CSS if I hover over them, the background color changes. I want to overlay a canvas on top of the container so that I can draw lines. The problem is that when the canvas is overlaid, the hovering changes of the divs no longer works. Is there a way to overlay a canvas but still have CSS or JavaScript onmouseover events still work on the elements beneath?
So you want sort of a transparent canvas which passes all mouse events except clicks to the elements behind it?
IMHO, you'd need to use JS for that: Capture all the events on the canvas, then manually pass them on to the div behind the canvas. If you have multiple divs, you'd need some sort of lookup depending on the (x,y) coordinates of the mouse.
An alternative to going through all that hassle would be by using the pointer-events CSS attribute. Mozilla,Webkit and IE6-8(excanvas) all support this. Opera does not, but I really don't care.
<canvas style="pointer-events:none;"></canvas>