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.
Related
I've created a button for Read More/Read Less functionality but when I'm clicking on the show less it jumps to the bottom. Could you please tell me how to fix this?...it should go to the same position...I'm using oxygen builder (code for this [ https://codepen.io/nick7961/pen/qByYMXZ?editors=0010
])
One way of doing this is to grab the current scroll y value and divide it by the body height to get the scroll position as a percentage. You'll have to do this in the event listener, before changes are made. In my function, setScroll, you can get the new body height and multiply it by the percentage you grabbed earlier, to keep the scroll in the same relative position.
button.addEventListener('click', () => {
const defaultValue = {
element: arrowIcon,
currentIcon: 'fa-chevron-down',
newIcon: 'fa-chevron-up',
};
//show content
if (initial.showAllContent){
showButton(buttonShowLess);
showButton(buttonShowMore, false);
content.classList.remove('gradientContent', 'maxContentHeight');
}else{
let relativeScroll = window.scrollY / document.body.clientHeight;
showButton(buttonShowLess, false);
showButton(buttonShowMore);
defaultValue.currentIcon = 'fa-chevron-up';
defaultValue.newIcon = 'fa-chevron-down';
content.classList.add('gradientContent', 'maxContentHeight');
setScroll(relativeScroll);
}
changeIcon(defaultValue);
initial.showAllContent = !initial.showAllContent;
});
function setScroll(relativeScroll) {
let scrollValue = document.body.clientHeight * relativeScroll;
window.scroll(0, scrollValue);
}
If you wanted to bounce the user back to the top, you could simply use:
window.scroll(0, 0);
is it possible to calculate somehow position of mouse inside an droppable container. For example mouse cursor is near right border of droppable container. I would like to know that position of mouse is to the right, or center, or left relative to the container where I wan't to drop the element
<div onDrop="handleDrop">... some content inside </div>
and js
const handleDrop = evt => {
// here I am looking to calculate the mouse position inside the container
}
The event object (evt) that is passed to your handleDrop method already contains the X and Y mouse positions at the moment of drop.
const handleDrop = evt => {
const mouseX = evt.clientX;
const mouseY = evt.clientY;
}
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.
I'm trying to detect the right position of a scrollbar-thumb. Can somebody please explain if this is possible. The scrollbar thumbnail does not have fixed width. I'm using nw.js, ES6 and jQuery library.
The following is a simplified extraction of my code.
class C {
constructor() {
win.on('resize', this._resize.bind(this));
$('#divId').on('scroll', this._scroll.bind(this));
}
_getXScrollbarThumbPos() {
let lpos = $('#divId').scrollLeft();
let rpos = lpos + SCROLLBAR_THUMBNAIL_WIDTH; // FIXME how can I get the scrollbarThumbnailWidth
return rpos;
}
_resize() {
let x = this._getXScrollbarThumbPos();
//..
}
_scroll() {
let x = this._getXScrollbarThumbPos();
//..
}
}
The resize and scroll listener work ok, the only bottleneck is how to determine the width of the scrollbar-thumbnail. win is the nw.js wrapper of the DOM's window, see here (initialization is not shown here, as it is not relevant for the question).
This is the solution I've eventually used. While I haven't found a way to directly obtain any dimensions of the right scrollbar-thumb position due to the dynamic width (for which I've also have not detected a way to calculate this), I have actually been able to solve the problem; By determining the width of the total content (i.e. the viewable + overflowing content), and subtracting both the viewable content width and scrolled to the left content-width, we can determine uttermost right position of the scrollable content, within the viewport, which (neglecting any possible border widths) equals the right position of the scollbar-thumb.
class C {
constructor() {
win.on('resize', this._resize.bind(this));
$('#divId').on('scroll', this._scroll.bind(this));
}
_getXScrollbarThumbPos() {
// width of the content + overflow
let totalWidth = $('#divId').scrollWidth;
// width of the visible (non overflowing) content
let viewWidth = $('#divId').width();
// the amount of pixels that the content has been scrolled to the left
let lpx = document.getElementById('#divId').scrollLeft;
// the amount of pixels that are hidden to right area of the view
let rpx = totalWidth - viewWidth - lpx;
// represents the right position of the scrollbar-thumb
console.log(rpx);
return rpx;
}
_resize() {
let x = this._getXScrollbarThumbPos();
//..
}
_scroll() {
let x = this._getXScrollbarThumbPos();
//..
}
}
I'm building a one page site, and wanting to have multiple divs, that are approximatly 400px (but vary) on top of each other. Instead of a smooth scroll, I would like jump to the next div and have it centred on the screen, at the same time adjust the opacity of the content above and below to draw attention to the centre div.
I have tried playing with a few scrolling plugins but have not had anything do what I'm after, most of them are geared towards a full page div, not one only a 1/3 or so the height of the page.
Can someone point me towards something I can adapt to perform this.
Add an event listener to the document which looks for elements with the class .next
Get the distance from the top of the viewport to the top of the element in question
subtract half the value of the viewport height minus the height of the element.
If the element is bigger than the viewport, scoll to to top of the element
Or scroll the element into the middle.
Set the opacity of the unfocused elements.
(Demo)
(function(){
"use strict";
document.addEventListener('click', function(e) {
if(e.target.className.indexOf('next') >= 0) {
var current = e.target.parentElement
var next = current.nextElementSibling || false;
if(next) {
var nextNext = next.nextElementSibling;
var height = next.offsetHeight;
var top = next.offsetTop;
var viewHeight = window.innerHeight;
if(viewHeight - height > 0) {
var scrollTo = top - ((viewHeight - height) / 2);
} else {
var scrollTo = top;
}
window.scroll(0, scrollTo);
current.style.opacity = '0.5';
next.style.opacity = '1';
if(nextNext) nextNext.style.opacity = '0.5';
}
}
}, false);
})();