Getting coordinates of mouse when in the browser chrome - javascript

I can retrieve the mouse coordinates just fine when actually on the web page document (event.clientX/Y), but as soon as the cursor creeps onto the browser chrome, coordinates stop being sent.
I highly doubt this is possible after researching it, but I thought I'd just throw it out there; Does anyone know of a way to retrieve the mouse coordinates when the cursor is over the browser chrome?
At the moment, I've had to resort to a hacky workaround, that predicts that the user is in that vicinity as A) their cursor was moving fast enough and the next movement would theoretically be on the browser chrome and B) mouse movement events are no longer coming through.
This may be the closest I can get through JS alone, but if you have any ideas I'd be very grateful. Just to be clear, I mean the area show in the below image.

Events are fired for the document. JavaScript is meant for DOM manipulation and events outside of the document context are outside of this scope. Consider writing a browser plugin for such.

Related

Changing cursor speed inside a div tag

I want to change the cursor speed inside some div tags, to give a better user experience in my web site. I have already changed the image of the cursor, I want to change slow down the cursor. Is there a way to do that?
I do not think this is possible to control the cursor with Javascript. But you could, however, hide the cursor using
cursor: none;
and then do some JavaScript to emulate a slower moving cursor made with HTML/CSS. But this would be much more work than it is worth, and probably wouldn't work out very well anyway.
Doing this using pure javascript might be a challenge but you can try incorporating this feature slowing down the cursor's speed while holding CTRL using the AutoHotKey script.
You need AutoHotKey installed to perform this but it's free and open-source.
You can't directly control the pointer speed via any DOM API, nor do I expect such an API will become available due to accessibility issues and probable click-jacking abuse.
That being said, in many modern browsers there is an API called Pointer Lock, where you can request control over pointer movements. Using this, you could emulate a slower cursor by taking over the cursor movements and positioning a fake cursor.

Lock mouse cursor while dragging in Chrome

This isn't the same question as all the others. I'm already preventing Chrome from entering text selection mode while dragging. (Edit: I only want to lock the icon/appearance, not restrict location or movement, and only between mousedown and mouseup) The issue I would like to avoid is that Chrome changes the cursor while dragging, to whatever is under the cursor (i.e.-i-beam while over text input control, hand while over hyperlink, etc).
IE and FireFox/Moz support element.setCapture() which I call in the mousedown event, that "locks" those browsers to the element so that the mouse cursor stays to whatever the cursor of that element is.. very nice. Chrome does not support that function, or anything like it, that I know of.
By watching mousemove and mouseup events on the document object instead of the element that was clicked, I'm able to still get most of the setCapture() behavior, in that I can track mouse events that happen outside of the element, and even outside the browser window. However, I'm left with one issue still, the mouse cursor changing in Chrome.
I believe you're looking for the Pointer Control Lock API, a recently introduced way for users to control the user's input device (when allowed). The big use case is gaming.
Without a secure and supported API, allowing sites to take over user input controls would be pretty disastrous (i.e. clickjacking and forced malware downloads), so if you're looking to "lock" the cursor then this is likely to be your only option.
I usually place an element over everything else with the intended cursor on mouse down and remove it on mouse up. Far from the cleanest approach but it works for me.

Firefox flash wmode=opaque iframe problems

I have a html/flex app loaded in an iframe, and wmode is set to 'opaque'. I have 'mousemove' listener attached to the document of flex app and document of the parent. Once I mousedown in the flex part of iframe and move my mouse around, i can see the logs from the iframe. However, when I move the mouse around in the parent, i dont see logs from the parent. But, if I mousedown on the html part of the iframe, i can see logs from both iframe and parent.
Is there a workaround to this problem?
Same sort of bug is reported in Firefox 4/5, which breaks html part of it. Visit
https://bugzilla.mozilla.org/show_bug.cgi?id=625313
Any ideas on how to fix this?
It sounds like the flash window is doing a capture of the mouse events which is typical in drag/drop scenarios. If the flash code is attempting to track a drag, then it would need to be doing this capture. I wonder if there's a way you can configured the flash app/object to only get mouse clicks and not mouse drag events, thus letting the normal mouse events as you move with the mouse down flow to whatever object is under the mouse (event outside of the flash object). I know nothing about the Flash library, but in Google searches, I do see that it has .startDrag() and .stopDrag(). It sounds to me like you need to make sure that startDrag() is not getting called on mouse down.

Mouse X/Y detection within Flash stage not working Moz & Webkit on PC

I am trying in vain to get this Flash based navigational item working in FF and Chrome on PC. It's all good on Mac and it's just fine using IE 7 or 8 on PC.
The nav item consists of a ball that "follows" the cursor in relation to where it is on the page. JS is used to gather the X/Y info from off the Flash stage and create vars to be used by the Flash movie to move the "orb" in relation to the cursor position. For some reason, FF and Chrome on PC fall short here.
I've tried everything from setting the Flash movie to "opaque" and positioning a transparent DIV over it, all to no avail.
Any thoughts on this? Has anyone encountered something like this?
Example here:
http://anthrograph.com/yarbyarb/thang/
We were given the compiled SWF with the listeners setup, but as of now, I do not have access to the FLA to make changes.
Thank you!
i tried in chrome and firefox, when mouse is on html part, positioning is working, while mouse is on flash it is not working.
if i understand, easiest solution is for window mode, you should make a displayObject, a sprite and set it to belove everything else with alpha = 0, with this you can set window mode anything you like.
other then, you should add Listener to MouseLeave and MouseMove to detect when listen javascript or actionscript.
there is another error, you should mask your buttons that right side. they are under other graphic but mouse_over is working when it should not. For this use ROLL_OVER instead of MOUSE_OVER.

js/css changing cursor

I'm using css/js to change the class of an element which the pointer is hoving over. The class determines the custom cursor image.
Unfortunately, it seems as if the cursor does not update in Chrome unless I physically move the mouse. Unfortunately the app is primarily used through the keyboard, however the cursor image is pretty important.
Any way around this?
Thanks.
This is actually a documented bug in Chrome and Safari. See this question on StackOverflow:
Getting the browser cursor from "wait" to "auto" without the user moving the mouse
I think you're out of luck for now, sorry

Categories