I have several pages that are all very similar. They have some javascript rollover links (images are preloaded, then there is a onMouseOver event that calls an image swap function and finally, there is a onMouseOut event that restores the original image).
When the user clicks on a rollover link that points to another page that has a rollover link on the exact same position, the image on the new page would be expected to load on the "over" state. This is not the case in Chrome and Safari (IE and Firefox work as expected).
So... On page load, is there a way to check if the mouse is already hovering the image to swap it right away? Something like "OnMouseAlreadyOver"?
Thank you.
If you using jQuery, it works without any problems!
http://jsfiddle.net/beuae
(not only for buttons, for divs also)
Actually, jQuery is a very good framework which assures everything goes as you expect, and cross-browser. This example confirms it.
The W3C standard says
onmouseover = script [CT]
The onmouseover event occurs when the pointing device is moved onto an element. This attribute may be used with most elements.
onmousemove = script [CT]
The onmousemove event occurs when the pointing device is moved while it is over an element. This attribute may be used with most elements.
mouseover is fired on moving over the boundary of the object. mousemove happens when the mouse is already over the element.
You may need to use onmousemove (or even both).
You may need to actually do the calculation based on the element position and the mouse cursor position.
//Get Mouse Position
document.onmousemove=getMouseCoordinates;
function getMouseCoordinates(event){
ev = event || window.event;
mouseX = ev.pageX;
mouseY = ev.pageY;
}
You can't without passing a variable to the other page or using cookies to track which was hovered (and that will fail over if people do change their mouse position)
In theory you could check the mouse position and the button position however there is no way to get the mouse position unless an event is triggered, so the mouse has to move and if it move the CSS :hover should get triggered.
It's a minor issue tho, I doubt most people are going to click a link, wait for the next page and then expect that link to be hovered and ready to click again (why wouldn't anyone one to keep clicking the same button unless it does different things)
From a UX point of view I wonder if webkit doesn't have the best approach here, why port the action of one page to another.
You can use document.getElementFromPoint(mouseX, mouseY) to get the element, but the only way to get the cursor's position is via an event. The problem is, the only events are clicks and mouse movements, which require user input from the beginning, which is what you're trying to avoid.
In short, no, it's not possible to do with JavaScript. You're left with using CSS.
Related
I have a number of images in my HTML document.
The user triggers some changes (AJAX calls) when clicking on an image or by pressing a key.
To keep track of the latest image (client-side), I use javascript and onmouseover, assigning the image ID to a javascript-variable which in turn is used to fill the AJAX calls.
Everything works well (even it there might be better ways to do it), but sometimes it takes some time to refresh the image. For a moment, it ceases to exist, causing the image next to it to jump left.
This, of course, moves that image underneath the pointer, triggering the mouseover event.
How(?) is it possible to distinguish between a mouseover event caused by mouse-movement from one fired by a layout change?
The short answer is you can't really tell what caused a mouseover event, other than the cursor moved over a new DOM element (or some other things, like a tap on a touch device). A layout change is just something that happens independent of this event.
One possible solution to your actual problem is to avoid the problem altogether by preventing the layout jump. For example, you could use a placeholder element to fill the space while the next image loads.
Alternately, your logic could almost-certainly be made more-robust so as not to depend on something as fragile as this.
i am making a bookmarklet in the bookmarklet i am adding a iframe to the page's body.
i need to find the current mouse position to position the iframe accordingly.
The issue is. i cannot bind on click for the bookmarklet because by the time the script within the href="javascript:" runs the click was already done. so i cannot get the event there.
i thought of binding mousemove, but that's a ugly workaround.
so is there a way to get mouse's current x/y ? without an event firing ?
Thanks.
Javascript is a language to add client side functionality on user interaction. Therefore, a javascript code snippet is always run as response to an event.
I would suggest using the onmousemove event. The event would be raised each time the cursor mouse would change. Therefore, you will know the mouse position at all times.
Hope I helped!
Have you tried something like setTimeOut()?
As far as I can tell you, there is no way to see the mouse position without using an Event object to do that.
Please, take a look at this thread:
Javascript - Track mouse position
So... I am working on an interaction design project and I want to create a sencha-style gesture scroll for content areas. The way I've done it so far, is to attach touchmove/start/end events to the content area, and it translateY's the contents. It works in on desktop with mousemove/up/down events, but it jumps around like crazy with touch. I'm not sure whats wrong.. here is a link to a prototype.
**requires webkit.
http://apps.omorphos.com/gesture-scroll
I think it is an issue with the event response, but I tried and haven't been able to nail it down. Any help is greatly appreciated!
So, I figured this out.
What I was doing was attaching the touch event to the list tag itself.. and, that works fine on desktop with mouse events; however, with touch, the target changes and touchend doesn't fire properly.
So, what I did, and what I believe sencha does, ... and I had originally implemented but went in a different direction... is have an absolutely positioned element with a transparent background color floating above the element that will be manipulated. All of the touch events will be captured by that DIV and then the elements below can be manipulated without losing the event data.
In the new version I used HammerJs ... more info: http://eightmedia.github.io/hammer.js/
but i'm pretty sure you could just use standard events; but the good thing about hammer js, is that it will translate touch events to mouse events for testing in the browser, this also means making the coordinates for touch the same as mouse, so you can access mouse event coords via
e.gesture.touches[0].pageX
e.gesture.touches[0].pageY
which let's you write less code.
Part 2:
Additionally... part of the issue is... how do you click on the content/components(e.g. links) below the screen.
How you do this... is you take the coords from the event handler and pass them through this native Javascript function...
var a = document.elementFromPoint(x, y);
this will return the dom element. and all you have to do is trigger the click/tap event.
Which would be great, except it will pick the element with the highest z-index.. so that is your screen obj(the one that is capturing all of the touch events). So, what you need to do, is hide the screen after a tap is registered, and then execute this function 200ms later, and then bring back the screen to capture whatever events.
You can do this with this function...
$(theScreen).on('tap', function(e){
screen.hide();
var hit = document.elementFromPoint(e.gesture.touches[0].pageX, e.gesture.touches[0].pageY);
$(hit)[0].tagName !=="A" || $(hit).trigger('click');
setTimeout(function(){screen.show()},300);
});
And, that is how I solved it!
My code is not super annotated, but you can find it at the link below:
Updated example:
http://apps.omorphos.com/gesture-scroll/v2/
I noticed mouseenter event triggered when mouse is untouched but the page below the cursor is scrolled.
Check out this fiddle: http://jsfiddle.net/F3EwW/
Steps to reproduce:
Click on a li
Use up/down arrow keys to scroll the items
You would notice the mouseenter event getting triggered when the li below is scrolled to the view.
Note: To notice this behavior, make sure the mouse cursor is above li and leave it untouched.
Initially, I accepted this as a default behavior and went on with a work around to handle this in my code.. but then I got curious and wanted to verify this behavior in any documentation which I couldn't find it anywhere.
Does anyone know if this behavior is documented anywhere in spec or any authentic webpage?
I looked up w3spec event scroll and mouse event order, but couldn't locate anything about this.
Also the spec description for mouseenter is as follows,
A user agent must dispatch this event when a pointing device is moved onto the boundaries of an element or one of its descendent elements. This event type is similar to mouseover, but differs in that it does not bubble, and must not be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements.
In Chrome, you would notice mouseover to be triggered as well. I have posted a question and a bug report already on this.
You realize that you have $('li').mouseenter(function () { ?
this caused the mouseenter event to be binded to each and every one of this li elements so when you are using the up and down key to scroll and your mouse is still inside the ul it keeps entering a new li. This was not an unintended feature the mouse in entering the new element.
The behaviour you are looking for is more something like this:
$("element").bind("mousemove mouseenter", function(event) {
//...
});
Also you need to realize the DOM understands the movement of the mouse relative to the document not where your mouse is on your screen as your OS does.
This question already has answers here:
How can I make page scrolling trigger mouseover events?
(3 answers)
Closed 3 years ago.
I have the fancy Apple mouse that detects finger movements such as "swipe" and "scroll".
Leaving the cursor fixed on the screen, but using my finger to scroll down my page, the cursor (although fixed) naturally moves over different elements, because the elements are moving themselves.
My problem is that when doing that, the appropriate mouseover/mouseenter callbacks don't get called when he mouse cursor is directly above them.
How can I solve this problem?
Most browsers that I've used don't fire mouse events when the page scrolls. You could try listening to the onscroll event and using document.elementFromPoint to determine what element has moved underneath the mouse cursor when the onscroll event fires.
Jquery's mousemove method is a nice solution here as it does get triggered when the mouse is rolled into an element as you scroll, even while the mouse has remained static.
You could even trigger the mouseenter event on mousemove as long as you include some kind of flag/state-check to ensure your mouseenter code doesn't get executed repeatedly on mousemove.
I dont think you can... short of having a function that runs on a timer to check the position of the mouse against the elements, but the performance hit on that would be astronomical to say the least. Probably should file a bug report with the browser manufacturer and check other browsers to see if the behavior is replicated - Which I'm guessing it will because dont think any browser will fire a mouseover/mouseenter event if the mouse was not physically moved.