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.
Need to implement really big graphic report with up to 5K elements on it (Gantt chart).
User must be able to scroll through report (scrollbar or mouse grab action) and change scale.
So far I came up with following ideas:
Scrolling by mouse grab action
Listen to user mouse down event and rerender the whole canvas on every mouse move (changed position) until mouse up event.
Scroll bars
Have to be custom made (also canvas or just html), also with event listeners on move action.
Scale
Could be implemented by using canvas scale property.
Do I think in right direction or there's a better (less code / more efficient) approach?
Currently a canvas element (which is built by a third party) on my webpage is intercepting drag events (because it assumes you want to drag something within the canvas), but this can "trap" the user within the canvas, especially if they zoomed in on it on mobile. I want the user to be able to scroll/swipe up and down on the canvas to reach the rest of the page above and below it, just like it were any other HTML element. They should be able to click into the canvas still, I just don't want the canvas to intercept regular page scrolling.
EDIT: I was able to find wheel and mousewheel events in the third-party code and remove them from the canvas object, resolving the issue for desktop users. Which event would be relevant for mobile users? I tried removing touchmove without success.
your issue seems to be that you're not correctly differentiating between scrolling and dragging.
I suggest you only prevent the default scrolling when the dragging actually takes place
I'm searching for a script like Photoswipe that works on desktop on mouse events, simulating swipe gestures.
Photoswipe without thumbnails is perfect - only I want to animate not only images but a whole div!
The first good-looking result was a jQuery plugin called jQuery mouseSwipe.
But this script only moves around a parent div which contains the items visually moved around.
If that is not enough, you should consider writing something for yourself.
Listen to mousedown and mouseup events and check the distance from the startpoint to the endpoint. If it is higher than a threshold you defined, let's say 100 Pixel, go to the next or previous element, based on the direction of the movement.
If you want it to be animated, you should also listen to the mousemove event and move the element around.
I'm building a joke microsite for a company. They want a feature where the mouse cursor will randomly change position when the user hovers over a certain image.
Is this possible in Javascript? How would I implement it?
Thanks!
You can't... but you can - in a way.
What you can do to mimic this behavior is that you can hide the actual cursor with css cursor: none and then create an image representing the cursor which would look the same and would be placed in position of the real cursor. Then whe user would move the mouse you'd have to update the position of the cursor image and apply your random position changes as you wish - though be aware that when user will scroll outside of the browser content window (on the controls or outside the browser) they will get their mouse cursor back to real position and your cursor will be stuck in its last position.
The only way you could pull this prank out. Good luck with it and hope they'll enjoy it ;)
PS.
inverting the mouse movement direction can be funny as well :>
You can't move the mouse cursor.
You can move the page or the image relative to the position of the cursor, which might make it look like the cursor moved when it didn't?
You can change your cursor with invisible custom icon, and then make a fake cursor and move it.