I am trying to create an animation in javascript that is triggered by a mouseover event and then returns to the initial state on mouse out. When the user runs their cursor over an image on the page, another div with an initial height of 0px gradually rises in height to 50px over the bottom portion of the image.
The problem I am facing is that when they move the cursor from the image to the div which now covers the bottom portion of the image, it triggers the mouseout (as it is a separate element from the image) and then a new mouseover event in quick succession because the div disappears when it detects that the cursor is no longer over the image (meaning the div appears and disappears quickly, over and over again).
I am wondering how I would go about breaking such a loop so that the div does not disappear when the cursor runs over it from the image (i.e. prevent the onmouseout event from triggering unless the mouse moves to some other element that is not the newly created div).
Here's an image to hopefully better illustrate the problem:
http://i.imgur.com/qcE64.jpg
I think for this situation you'd want to use a wrapper div around both the image and the div you're animating. Attach the mouseover/mouseout events to the wrapper and they will trigger when you're expecting them to. Here's a jsfiddle example
Related
I'm trying to create a simple sketchpad using HTML+JavaScript. It consists of multiple pixel-like div elements placed next to each other. I sucessfully did so by utilising the mouseover event and when the mouse pointer moves over the 'canvas', the trail of dimmed divs can be observed.
As a next step, I would like to use the mousedown event to color the canvas only when mouse button is down. It works for a single div/pixel, but I struggle with getting the "dimmed trail" effect, as it was for mouseover.
It looks like when clicking the mouse button and moving the mouse, a div that's under the pointer "would like to" move as well. Also, the pointer changes to the "not allowed" sign. Therefore I can color only one div at a time, must release the button and click it again to color another one:
Here's my code: JS Fiddle
The problem I experience can be obtained by modifying 14th line of JS code (event change from mouseover to mousedown).
When having a button (or any other element, positioned absolute or fixed) on top of an element with a scrolling area which is actively scrolling (i.e. for example it's decelerating) it seems that the button doesn't receive the click event when clicked.
It seems that when clicking (or touching) the scrollable element area, the scrolling is interrupted, but the button on top of it doesn't receive any event.
I've debugged events for the floating element in Chrome and the only thing received is a mousewheel event.
This is particularly annoying if the button is a navigation button, as you have to click twice to exit the page if the content is decelerating (as opposed to once when the content is still).
I browsed many times for a solution but never found a clue about this behaviour and how to avoid it, so any thoughts will be appreciated.
Sample code here: https://codepen.io/djibarian/pen/bGLoYxY
If you scroll the red box and while still scrolling due to inertia try to click the button, you only manage to stop the scrolling in the box, but the button doesn't receive the click event.
I haven't seen your code, but it's worth checking following.
Check if any element overlaps the positioned fixed element.
Make sure the stacking context of the element is correct.
Try adding a higher z-index and see if it's working. If it works then it's worth changing the dom element order for precedence.
I am using a HTML div element as a tool tip for a canvas, i.e. the div shall follow the mouse's motions as the mouse pointer moves across the canvas element.
This works – almost. The tool top is south-east of the mouse pointer, and when the pointer is moving south-east-ish then it may happen that the pointer moves onto the div element so that no more mouse-move events are reaching canvas. This is only resolves when the mouse is further moved beyond the div which makes the div jump in an ugly way to adjust to that position.
How can I avoid these jumps and implement that the div is "transparent" for the mouse?
Usual bubbling up does not work because a canvas cannot hold children; at least when I am adding children to a canvas they won't be displayed.
No external modules like jQuery or whatever are used / available.
You should be able to use pointer-events: none; on the div.
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.
Ok so my basic problem is as follows. I have an image that causes everything else on the page disable using a blank div with a z-index. This is during a mouseover event of the image. Next the code goes into setting the z-index on the div that I want to be able to click or mouseover. Also I wrapping these images in a div that is used for a mouseout event to hide the images I do not want to show.
However when mousing over the images or text inside the div it causes the mouseout event to trigger. I have looked into event bubbling but it does not seem to be what is happening. Is there a way to turn off the mouseout event to object inside of the div with the mouseover event?
Long story short I need to make a mouseout event not trigger on nested items.
Thanks in advance.
Instead of using mouseout you may go this way:
when blocking the UI by overlaying the page with the blank div observe the mouseover-event of the wrapper-div
When mouseover fires on the wrapper-div start observing the mouseover-event of the blank div
When the mouseover fires on the blank div reset the page(remove the blank div)
The approach should be clear, if the mouse is over the blank div it must be outside the wrapper-div.