We Keep Coding

Show element where mouse is inside div (axis y)

I have a widget container where if I go to the right side, a dragger selector appears (mouseover).
I need to that dragger follow the mouse position in axis Y inside the widget container limits.
I have tried a lot of things but I'm not able to get the right position for the dragger.
rh.addEventListener('mouseover', (event) => {
const draggerElement = event.target.parentNode.querySelector('.widget-dragger')
if (draggerElement.style.opacity !== 1) {
draggerElement.style.top = `${event.pageY - (event.target.offsetHeight / 2)}px`
draggerElement.style.opacity = 1
}
})
jsfiddle: https://jsfiddle.net/rt0s8p7h/1/
Captures:
This is the rh element:
It has 100% height of the widget container.
Dragger has absolute position inside the widget container.
Widget Container has relative position, so the dragger is limited inside the container.

Solution here: https://jsfiddle.net/rt0s8p7h/3/
rh.addEventListener('mouseover', (event) => {
const draggerElement = event.target.parentNode.querySelector(".widget-dragger")
if (draggerElement.style.opacity !== 1) {
const rhRect = event.target.getBoundingClientRect()
draggerElement.style.top = `${event.clientY - rhRect.top - draggerElement.offsetHeight/2}px`
draggerElement.style.opacity = 1
}
})
Also works for mousemove to follow the mouse cursor.

Canvas not capturing mouse position when hovered over an <h1> on top of it

I'm using React Three Fiber to animate a 3d model looking at the mouse. This is creating a canvas element in the background of my page. I have a few divs and h1s layered on top of it, and whenever my mouse hovers over the divs/h1s, the canvas freezes, until I mouse out of it. This results in a choppy looking animation. How do I rectify this?
This is my React Component:
function Model() {
const { camera, gl, mouse, intersect, viewport } = useThree();
const { nodes } = useLoader(GLTFLoader, '/scene.glb');
const canvasRef = useRef(null);
const group = useRef();
useFrame(({ mouse }) => {
const x = (mouse.x * viewport.width) / 1200;
const y = (mouse.y * viewport.height) / 2;
group.current.rotation.y = x + 3;
});
return (
<mesh
receiveShadow
castShadow
ref={group}
rotation={[1.8, 40, 0.1]}
geometry={nodes.HEAD.geometry}
material={nodes.HEAD.material}
dispose={null}></mesh>
);
}

You'll need to assign a special CSS rule to your <h1> and <div>s so that they don't capture pointer events:
h1 {pointer-events: none;}
This means the element is never the target of pointer events, so the mousemove event sort of "passes through" to the element below it. See the MDN docs for further description.

JavaScript - Ignore if mouse is on a textarea's "resize handle"

I have the following code for a simple draggable textarea element:
HTML:
<textarea type="text" onmousedown="mouseDown(this)"></textarea>
JavaScript:
const mouseDown = element => {
document.onmousemove = e => {
element.style.left = `${e.pageX}px`;
element.style.top = `${e.pageY}px`;
}
}
document.onmouseup = () => document.onmousemove = null;
This works great, except for one problem. Trying to resize the element, since it's a textarea, makes it become 0px by 0px and gets dragged around. How can my onmousemove function return if the mouse is on the resize handle?

Calculate the size and section of where the elements resize handle is. You can get the relative location of this area by using the elements offset height, width and page location using element.getBoundingClientRect().
Once you've found those boundaries, it simply becomes is my pointer inside of the box which I've defined to be non draggable?

jquery click on current cursor location

I know that with jquery I can select an element and invoke a click. However, what I am looking to do is simply invoke a click on where ever the current cursor is.
For example something like this:
jQuery().click();

I think this might help:
How to simulate a click by using x,y coordinates in JavaScript?
maybe something like:
$(document).click(function(e) {
var x = e.clientX;
var y = e.clientY;
document.elementFromPoint(x, y).click();
})
Getting the user's mouse position can only be done via an event. Let's say your mouse is broken and it will track, but won't click, you could trigger a 'fake' click at the current position through other means:
var x, y;
$(document).mousemove(function(e) {
x = e.clientX;
y = e.clientY;
})
$(document).keyup(function(e) {
// if the key pressed was return, click at the current cursor position
if (e.keyCode === 13) {
document.elementFromPoint(x, y).click();
}
})
$(document).keyup(function(e) {
// if the key pressed was space, click 50px below the current cursor position
if (e.keyCode === 32) {
document.elementFromPoint(x, y + 50).click();
}
})
tested and working, now you can click with your keyboard!
Note that document.elementFromPoint(x, y) looks for elements at the coordinates relative to the viewport. So you'll be using e.clientX & e.clientY, not e.pageX & e.pageY.

Javascript: Get mouse position relative to parent element

Is there any way to get mouse position relative to it's parent element?
Let's say I have a structure:
<div id="parent">
<span class="dot"></span>
</div>
When I bring my mouse over span element I need to get its position relative to its parent element (<div id="parent">). PageX/ClientX give me position relative to page/client area, so it's not working for me.

Subtract the viewport-relative position of the parent element you can get via getBoundingClientRect() from the mouse position in the event's clientX and clientY to get relative position.
For example:
element.addEventListener("mousedown", function (e) {
let bounds = parent.getBoundingClientRect();
let x = e.clientX - bounds.left;
let y = e.clientY - bounds.top;
console.log(x, y);
});
Where element is your inner element receiving the event, and parent is your desired reference for the coordinates.

jquery offset() method handles parent positioning, so
function onsomemouseevent(e) {
var x = e.pageX - $(e.target).offset().left;
}
is plain browser abstracted jquery.

Try the offsetParent property.
Try this:
positionX = document.getElementById('childId').offsetParent.offsetLeft;
positionY = document.getElementById('childId').offsetParent.offsetLeft;