howto get mouse coordinates in open select box - javascript

I know you can get the mouse coordinates within a browser window with for instance:
$(document).bind('mousemove',function(event) {
X = event.pageX;
Y = event.pageY;
console.log(X+':'+Y);
})
This works in most cases but I currently have a case in which I can not use this.
I would like to also capture the mouse coordinates when a list of options in a select box is opened.
It appears that the 'normal' way of capturing the coordinates is terminated until the select box is closed again.
Is there a way to capture it?

Related

simulate click on drop where dropped

This is my first time posting, and I wouldn't be posting if I hadn't researched for hours how to do this.
I want to drag and drop an item onto a div that triggers a click on the location where it was dropped. I got the part where it drags and whatnot, but am unable to trigger a click (simulated).
Please let me know if you can help! I'd love some peace of mind lol.
<3 Lara
Call a function when the item is dropped:
<div ondrop="dropFunction(event)"></div>
In that function, you need to collect the mouse coordinates:
var x = event.clientX; // Get the horizontal coordinate
var y = event.clientY; // Get the vertical coordinate
And then trigger a click at those coordinates:
document.elementFromPoint(x, y).click();
The mouse coordinates created above are for where the cursor is on the screen. You may want to adjust these coordinates based on the shape of the object being dropped.

Javascript comparing mouse click to xy to that of button

I am trying to get the x and y of an html button to that of a mouseclick by the user, I am doing this as follows:
function buttonPressed(event, id){
var mainEvent = event ? event : window.event;
var mousex=event.clientX;
var mousey=mainEvent.screenY;
var y= $('#'+id).position();
var x= document.getElementById(id).offsetLeft;
console.log(y);
console.log(mousey);
This shows 2 different ways to get these value of both the button and the mouse (event.clientX,mainEvent.screenY,$('#'+id).position()(uses jquery),and offsetLeft).
However none of these techniques seem to work as I would like them to as the values do not line up ie when I click on the top left of the button the values are not the same or even similar. Additionally it seems like the difference changes, for example: if I have a button top left and one top right on the top left the values may differ by 100, whereas the bottom they will differ by -100. How can I acheive what I am wanting (to be able to compare the mousex and the button x)?
client X/Y Mouse pointer X/Y coordinate relative to window
offset X/Y Mouse pointer X/Y coordinate relative to element that fired the event
screen X/Y Relative to the top left of the physical screen/monitor
Thats why you are getting difference here
var mousex=event.clientX;
var mousey=mainEvent.screenY;
Use clientX for both

KineticJS - set portion of group/image dragable

This is what I need in KineticJS:
I have a large 300x300 image, I want to be able to drag it, but only if I click-drag in the upper quarter of the image. if I try to drag the rest of this image, I don't want it to move. Is this possible?
Furthermore, If I try to drag this image, how can I make it drag the rest of the items in the group along with it?
the easiest thing to do would be to create a custom hit region function that defines a rectangular region in the top right corner of the image. Here's an example:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/
See here: http://jsfiddle.net/NnD5q/
box.on('mousedown', function(e){
var bX = box.attrs.x, bY = box.attrs.y;
// set draggable false if they aren't in our click range
// (a 20x20 square in the top left)
if (e.x > bX + 20 || e.y > bY + 20)
box.setDraggable(false);
});
window.onmouseup = function(e){
box.setDraggable(true); // set draggable true on **window** mouseup.
};
Another option would be to create a drag handle object, group.setDraggable(true) on mousedown for that drag handle, then group.setDraggable(false) on window mouseup. This second option is likely much cleaner.

Is there a way to tell Chrome web debugger to show the current mouse position in page coordinates?

I often debug my javascript code using the Chrome web debugger. In the elements tab, hovering over an element show a tooltip with a few pieces of information, including the width and the height of that element.
Sometimes, I need to see the page coordinates of the current mouse position. But it seems the debugger does not display this kind of information.
So, is there a way to add it? Like an extension or maybe there are other options?
EDIT
Using the accepted answer I could add the following bookmarklet and have exactly what I wanted:
javascript:document.onmousemove = function(e){var x = e.pageX;var y = e.pageY;e.target.title = "X is "+x+" and Y is "+y;};
You could type this into the console,
document.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
e.target.title = "X is "+x+" and Y is "+y;
};
This will give you mouse position on mouse move in the element tooltip.
Combining ppsreejith's answer with JHarding's answer with Chrome 70+'s Live Expressions you can get constantly updating (x, y) coordinates without filling up the devtools console:
Enter this in the console:
var x, y; document.onmousemove=(e)=>{x=e.pageX;y=e.pageY;}
Enter this as a Live Expression:
"("+x+", "+y+")"
And this works on SVGs.
When i need to see the coordinates for my mouse, i use this Chrome addon:
Coordinates addon

What is the proper way to get bounding box for HTML elements relative to the Window?

I'm writing a Firefox extension. I'm trying to limit it to just XUL+Javascript (no XPCOM). When I get a mouseover event for an HTML element, I need to get its bounding box in the windows coordinate system (that is the built-in XUL document browser.xul).
The obvious place to start is to put something like this in the mouseover event handler:
var rect = e.target.getBoundingClientRect();
Which is great, but that gives me the rect in the HTML document's coordinate system, which is relative to the upper left corner of the HTML drawing area. I want to display a xul:panel element using panel.openPopup() near this image (but not using one of the predefined popup positions), so I need to translate the coordinates.
I've tried doing the following (in the XUL dom) to get the offset's to do the translation, and it works for some sites, but not all, and doesn't seem to take into account the x translation needed for sidebars.
var appcontent = document.getElementById("appcontent");
if (appcontent) {
chromeOffsetX = r.left;
chromeOffsetY = r.top;
}
So, what's the best way to approach this?
Note: for IE extensions I would use (and have used) IDisplayServices::TransformRect()—is there something similar for Firefox?
Now with bounty!
Turns out getting the location is irrelevant because you can position items relative to the element using something like:
hoverPanel.openPopup(someElement, "overlap", offsetX, offsetY, false, false);

Categories