I'm building a HTML5 game and I am trying to put the mouse cursor over a certain control on a specific event so that moving in a specific direction always has the same result. Is this possible?
You cannot move the mousepointer with javascript.
Just think about the implications for a second, if you could ;)
User thinks: "hey I'd like to click this link"
Javascript moves mousecursor to another link
User clicks wrong link and inadvertently downloads malware that formats his c-drive and eats his candy
Run a small web server on the client machine. Can be a small 100kb thing. A Python / Perl script, etc.
Include a small, pre-compiled C executable that can move the mouse.
Run it as a CGI-script via a simple http call, AJAX, whatever - with the coordinates you want to move the mouse to, eg:
http://localhost:9876/cgi/mousemover?x=200&y=450
PS: For any problem, there are hundreds of excuses as to why, and how - it can't, and shouldn't - be done.. But in this infinite universe, it's really just a matter of determination - as to whether YOU will make it happen.
I would imagine you could accomplish placing the mouse cursor to a given area of the screen if you didn't use the real (system) mouse cursor.
For instance, you could create an image to act in place of your cursor, handle an event which upon detecting mouseenter into your scene, set the style on the system cursor to 'none' (sceneElement.style.cursor = 'none'), then would bring up a hidden image element acting as a cursor to be anywhere you like with in the scene based on a predefined axis/bounding box translation.
This way no matter how you moved the real cursor your translation method would keep your image cursor wherever you needed it.
edit: an example in jsFiddle using an image representation and forced mouse movement
Great question. This is really something missing from the Javascript browser API. I'm also working on a WebGL game with my team, and we need this feature. I opened an issue on Firefox's bugzilla so that we can start talking about the possibility of having an API to allow for mouse locking. This is going to be useful for all HTML5/WebGL game developers out there.
If you like, come over and leave a comment with your feedback, and upvote the issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=630979
Thanks!
You could detect position of the mouse pointer and then move the web page (with body position relative) so they hover over what you want them to click.
For an example you can paste this code on the current page in your browser console (and refresh afterwards)
var upvote_position = $('#answer-12878316').position();
$('body').mousemove(function (event) {
$(this).css({
position: 'relative',
left: (event.pageX - upvote_position.left - 22) + 'px',
top: (event.pageY - upvote_position.top - 35) + 'px'
});
});
So, I know this is an old topic, but I'll first say it isn't possible. The closest thing currently is locking the mouse to a single position, and tracking change in its x and y. This concept has been adopted by - it looks like - Chrome and Firefox. It's managed by what's called Mouse Lock, and hitting escape will break it. From my brief read-up, I think the idea is that it locks the mouse to one location, and reports motion events similar to click-and-drag events.
Here's the release documentation:FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_APIChrome: http://www.chromium.org/developers/design-documents/mouse-lock
And here's a pretty neat demonstration: http://media.tojicode.com/q3bsp/
You can't move a mouse but can lock it.
Note: that you must call requestPointerLock in click event.
Small Example:
var canvas = document.getElementById('mycanvas');
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();
Documentation and full code example:
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Interesting. This isn't directly possible for the reasons called out earlier (spam clicks and malware injection), but consider this hack, which creates an impression of the same:
Step 1: Hide the cursor
Let's say you've a div, you can use this css property to hide the real cursor:
.your_div {
cursor: none
}
Step 2: Introduce a pseudo cursor
Simply create an image, a cursor look-alike,and place it within your webpage, with position:absolute.
Step 3: Track actual mouse movement
This is easy. Check internet on how to get real mouse location (X & Y coordinates).
Step 4: Move the pseudo cursor
As the actual cursor move, move your pseudo cursor by same X & Y difference. Similarly, you can always generate a click event at any location on your webpage with javascript magic (just search the internet on how-to).
Now at this point, you can control the pesudo cursor the way you want, and your user will get the impression that the real cursor is moving.
Fair Warning: Do not do it. No one wants their cursor or computer controlled this way, unless if you've some specific use-case, or if you are determined to flee your users away.
You can't move the mouse pointer using javascript, and thus for obvious security reasons. The best way to achieve this effect would be to actually place the control under the mouse pointer.
Couldn't this simply be done by getting actual position of the mouse pointer then calculating and compensating sprite/scene mouse actions based off this compensation?
For instance you need the mouse pointer to be bottom center, but it sits top left; hide the cursor, use a shifted cursor image. Shift the cursor movement and map mouse input to match re-positioned cursor sprite (or 'control') clicks When/if bounds are hit, recalculate. If/when the cursor actually hits the point you want it to be, remove compensation.
Disclaimer, not a game developer.
I'm creating a plugin that saves user mouse movements. I would like to create a kind of heatmap where the mouse goes. I don't know how to paint the coordinates in a responsive way. The elements are moving depending on device's width.
I thought that maybe I could create a function in JS that gets the userwidth, Xcoordenate, and Ycoordenate and returns the coordinates depending on the current screen. But, I would need to get (by javascript) which elements changes position from user width to current width. Is it possible? Any advice?
I would think that this is extremely difficult to do correctly.
You could try to store the mouse coordinates relative to the current element the mouse is moving over, but even that has its limits: When the page width changes the width and height, and even the content, of an element could change.
I think it would be better to only register over which element the mouse cursor is. Then it doesn't matter what shape an element has, or where it is.
See: Determine which element the mouse pointer is on top of in JavaScript
I want to use particle.js (https://vincentgarreau.com/particles.js/) on my website as a background. I configured it to detect the mouse on the canvas but if I start adding other html elements, the mouse detection stops working. I found a website (http://demo.diviwebdesign.com/fullwidth-header-extended-demo-1-json/) which apparently gets around this issue but I have no idea how they did it. Do you have a idea?
If I use detection on window level, as soon as I scroll or if the canvas does not fill the whole window, the detected mouse location is off so thats not a suitable solution either. I would need a way to forward the mouse through the obscuring element down to the canvas.
I have a menu box that contains a few links to pages. I'd like it so that if the user "bumps" it with their cursor, the box reacts and jerks slightly (swings in direction mouse 'pushed' it) and then swings back and forth until it comes to a stop. The menu is in a div, and I need the contents to stay in their relative position to the menu (though rotating with it I guess).
How can I accomplish this using Javascript? Preferably not CSS.
How can I accomplish this using Javascript?
You need a function that listens for mouse movements and reports its position. It then compares the cursor position to the positional bounds of the menu. If its within your thresholds you would then reposition/rotate the menu relative to the cursor's approach vector.
How about using jQuery Bounce? There is a similar question here: JQuery UI bounce effect - bounce only once on entering div that might help.
Is there a way to mimic this on have image event?
On hover image enlarges but it is done in smart way - it knows were browser window ends and all the times it manages to reposition enlarged image so it always shows full image.
Foto example of what I am talking about:
First assign a mouseover and mouseout event handler to the image class that sets a flag variable to true and false. On the mouseover event, get the img source then display that image in the viewing box. If the flag variable is true, then display the viewing box and adjust it's position according to the mouse's position. As far as deciding which side of the mouse to display the image on, I would recommend simply checking if the mouse is farther than half way across the x axis. You can do this by checking if event.clientX > window.innerWidth/2