how do I get the x,y coordinates from a HTML element relative to screen?
I'm using x,y from getBoundingClientRect() as below, but as you can see in the blow image, if I use move the cursor to this x,y position, the curson is in the middle between 0 and + buttons not the 5 button, which is the target button.
What am I missing?
JS code:
var e = document.querySelector('input[id=five]');"
var r = e.getBoundingClientRect();
var x = r.x;
var y = r.y;
MoveMouseTo(x,y); // imaginary call, the real cursor move is done by C# but I can share the code, as needed.
Image:
NOTE: if this aditional info may help, it's a C# application with embedded browser.
const getCoords = (e) => {
var x = e.clientX
var y = e.clientY
var xx = e.screenX
var yy = e.screenY
console.log(x, y, "client")
console.log(xx, yy, "screen")
}
You're going to want to assign this function to a onmousemove event to the outermost div containing the UI for your calculator. This should at least show you the difference between a screen X,Y and a client X,Y
https://www.w3schools.com/code/tryit.asp?filename=FVXZOK1SPTR0
You can try to add an event listener on your element and use the event to retrieve the coordinates of the mouse.
const $element = document.querySelector('input[id=five]');
$element.addEventListener('mousemove', handleMouseMove);
function handleMouseMove (event) {
console.log('Offset from the screen coordinates', event.screenX, event.screenY);
// The client refers to the element you are bound to;
console.log('Offset from the client coordinates', event.clientX, event.clientY);
};
Related
I'm trying to get the coordinates of the mouse click on the amcharts pie-chart's slice. It is working for the whole page except the slices. event.pageX and event.clientX are not working, returning undefined. I want the coordinates with respect to the page.
{
"event": "pullOutSlice",
"method": function (event) {
var relX = event.pageX;
var relY = event.pageY;
}
}
JSFIDDLE
Is this what you are looking for ?
https://jsfiddle.net/6w78zmo9/1/
Try this:
var relX = event.chart.mouseX;
var relY = event.chart.mouseY;
I created a a-scene with some objects to drag. The final purpose is exactly what aframe-click-drag-component does. Unfortunately, this component is not compatible with the last version of A-Frame.
I created a custom component.
AFRAME.registerComponent('draggable', {
init: function () {
/* Some code */
}
});
I use the aframe-mouse-cursor-component to be able to get the mouseenter and mouseleave events on the draggable object, and detect when the mouse position allows the user to select the object.
I added an EventListener on document.body to know when the dragging starts:
document.body.addEventListener('mousedown', function (e) {
// start dragging
});
I continuously update a global variable to update the mouse position when a mousemove occurs:
document.addEventListener('DOMContentLoaded', function () {
document.body.addEventListener('mousemove', function (e) {
window.mouseX = e.clientX;
window.mouseY = e.clientY;
});
});
This way, I can easily get the position of the mouse during the dragging. But I do not know how to convert the position of the mouse on the client to a position in the Virtual Reality (restricted to a 2D plan to make it possible).
I solved this issue by using the raycaster coming from the cursor in the middle of the a-camera, but I want to drag the objects with the mouse-cursor, and this component does not have a raycaster.
I also tried to use some maths to convert the mouse coordinates to a coordinates set relative to the camera, without success (essentially because of the screen size which can vary).
What solutions are available? I would like to update the click-drag or the mouse-cursor, but I have no knowledge of THREE.js.
See https://github.com/mayognaise/aframe-mouse-cursor-component or https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/DragControls.js or https://www.npmjs.com/package/aframe-click-drag-component for examples
The main chunk of code is like:
canvas.addEventListener( 'mousemove', function () {
var mouse = new THREE.Vector2();
var rect = canvas.getBoundingClientRect();
mouse.x = ( (event.clientX - rect.left) / rect.width ) * 2 - 1;
mouse.y = - ( (event.clientY - rect.top) / rect.height ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
}, false);
I'm creating iFrame and in that iFrame script I need to catch mouse coordinates after creation (in very start). I was hoping that it's possible with custom event.
I tried
var myEvent = new Event('mouseC');
document.addEventListener('mouseC', function(e){
console.log('my event is working');
console.log('mouse x is '+e.pageX);
console.log('mouse y is '+e.pageY);
});
document.dispatchEvent(myEvent);
console is displaying 'my event is working', but mouse coordinates are undefined.
I tried wrapping it in window.onload, and I also tried screenX and clientX... always undefined
How can I catch mouse coordinates in newly created iFrame imedietly after creation?
...btw, mousemove event is working and writing coordinates when mouse is moved over new iFrame.
Could I somehow move mouse for just 1px to trigger that event?
iframElement = document.getElementBy...("...");
document.addEventListener("click", function(evt,iframElement){
var x = evt.pageX - iframElement.offset.left;
var y = evt.pageY - iframElement.offset.top;
console.log(x+" , "+y);
});
it might work
var value =parent.frames[FRAME_NAME].frameElement.offsetParent;
var x = 0, y = 0;
while (value)
{
x += value .offsetLeft;
y += value .offsetTop;
value = value .offsetParent;
//console x anf y...
}
console x and y you can get co ordinates of mouse inside iframe.
I'm making a small jigsaw like puzzle in html5. Each jigsaw piece is it's own canvas. I need to move the canvas element using the mouse position. I've managed to get the canvas that is clicked, I just need to move it. I tried manipulating the top and left style attributes but the canvas didn't move. Can this be done or am I trying something impossible.
Thanks!
function MouseDown(can, e)
{
MovingCanvas = can;
clicked = true;
}
function MouseMove(e)
{
if(clicked)
{
var mx = e.clientX;
var my = e.clientY;
MovingCanvas.style.top = my;
MovingCanvas.style.left = mx;
}
}
e.clientX and e.clientY are integers.
Styles expect a string of the form {NUMBER}{UNIT}.
You are missing a unit, therefore it won't work.
MovingCanvas.style.top = my+"px";
MovingCanvas.style.left = mx+"px";
Basically I have an svg "SecondSVG" into an svg "FirstSVG" into an svg "MainSVG".Every svg has its own ViewBox. This page can be loaded anywhere on the screen by another page.
So basically how can i find the screen x for viewBox for"SecondSVG" knowing that this svg can be loaded basically anywhere based on the calling page?
event.clientX gives myself the x coordinate for the screen. If I don't know the coordinate for ViewBox of "SecondSVG" then how can I find out the x coordinate inside the ViewBox of "SecondSVG"?
I am using Firefox 3.6.3 and I do have an event object from which I can extract clientX, clientY and other coordinates that are relative to the screen. However what I need are the coordinates inside the ViewBox.
function click(evt)
{
var root = document.getElementById('your svg');
var uupos = root.createSVGPoint();
uupos.x = evt.pageX;
uupos.y = evt.pageY;
var ctm = evt.target.getScreenCTM();
if (ctm = ctm.inverse())
uupos = uupos.matrixTransform(ctm);
///the new x y are : uupos.x , uupos.y
}