I've got two sets of range sliders on a video file that need some fine-tuning.
Clicking and dragging the slider will adjust the settings. But clicking without dragging will not change the settings, it will only move the slider.
I need the slider to adjust the settings when any point is clicked within the range. In the words, if the range is currently set to the far right and I click the far left, I'd like it to change settings.
I tested it and noticed that the line with the comment doesn't seem to activate the function handleRangeUpdate.
const ranges = player.querySelectorAll(".player__slider");
let isDragging = false;
function handleRangeUpdate() {
if (!isDragging) return;
console.log(`${this.name}: ${this.value}`);
video[this.name] = this.value;
}
ranges.forEach(range => range.addEventListener("mousemove", handleRangeUpdate));
ranges.forEach(range =>
range.addEventListener("mousedown", () => {
isDragging = true;
handleRangeUpdate; // This doesn't seem to function
})
);
ranges.forEach(range =>
range.addEventListener("mouseup", () => (isDragging = false))
);
You can find all my code on: My Github Repo
Related
After a whole day trying to make this changes without succeed, I'd like to ask for help.
Based on this example from codepen, I'm trying to change the background color from 'black' to the color '#ECEFF1' which is the same color from the background I use on my page.
Code JS:
(async ({
document,
setTimeout,
clearTimeout,
addEventListener,
installFont,
Fireworks,
Math
}) => {
const { body } = document;
await installFont(
"Noto Sans JP",
"#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100&display=swap');"
);
const isMobile = "ontouchend" in window;
const touchText = document.createElement("div");
touchText.innerText = isMobile ? "touch to start" : "click to start";
touchText.classList.add("start");
const overlay = document.createElement("div");
overlay.classList.add("overlay");
overlay.appendChild(touchText);
body.appendChild(overlay);
const triggerKey = isMobile ? "touchend" : "click";
overlay.addEventListener(triggerKey, () => {
body.removeChild(overlay);
const get_rect = () => [
Math.min(1200, window.innerWidth),
Math.min(400, window.innerHeight)
];
const fireworks = Fireworks.init();
fireworks.amount(7);
document.body.appendChild(fireworks.view);
const resize = () => requestAnimationFrame(() => fireworks.resize(...get_rect()));
resize();
let id;
window.addEventListener('resize', () => {
clearTimeout(id);
id = setTimeout(resize, 100);
});
fireworks.start();
});
})(window);
Code running:
https://codepen.io/nuton0413/pen/QWNgzKO
On codepen, in the code settings, there is a library being accessed to sync and run the function.
Library:
https://k-nuton.github.io/fireworks_ts/dist/fireworks.min.js?date=202208070212
I've already tried to apply the background color through CSS or through the browser's development tool and nothing happens.
Any modification made on this page can only be done directly through the JS file.
When clicking on the phrase on the home page "click to start", I need to remove the loop that the function execute. The Fireworks will be executed just by clicking a button. Fireworks will only play when the button is clicked. Once per click, no loop.
The whole JS code has only 55 lines of code.
I tried changing the background color to the desired background color, but everything went wrong.
What should I do please? Any Light?
Right now i am working on a way to update the state of an element based on IF the mouse is down as well as if the mouse is over the element. This means that once the mouse is down, every time it hovers over one of the elements , the state changes.The tracking is inaccurate, it does not capture every single action. How do i better the process?
The code for my present implmentation is:
document.onmousedown = () => {
document.onmousemove = (e) => {
if (e.buttons === 1) {
let svg = e.target as HTMLElement;
if (svg.id.startsWith('svg')) {
let SVG_ID = svg.id;
let HoverPropsID = svg.id.replace('svg', 'props');
if (document.getElementById(HoverPropsID).classList.contains('no-node')) {
toRemove.forEach(element => document.getElementById(SVG_ID).classList.remove(element));
document.getElementById(SVG_ID).classList.add(`svg-${node}`);
document.getElementById(HoverPropsID).classList.remove('no-node');
document.getElementById(HoverPropsID).classList.add(node);
multiNodeGraphUpdate(node, Number(HoverPropsID.substring(HoverPropsID.lastIndexOf('-') + 1)), 10, false)
}
nodeHoverAnimation(HoverPropsID);
}
}
}
I understand that the information i have provided might be a big ambiguous, so i am linking two website, one is the inspiration website: https://clementmihailescu.github.io/Pathfinding-Visualizer/
and the other one is the WiP webiste (my one):https://aarnavv.github.io/Vagus/
I used hook useDrag from 'react-use-gesture'.
const drag = useDrag((params) => {},
{
bounds: {...bounds}
}
)
I use bounds in full clientWidth.
It works fine with constant bounds. But after resizing browser window (open devtools panel in my case) hook use previous offset value(I need to drag all width of resizing clientWidth).
How can I use useDrag with document.body.clientWidth?
I found solution. If we need dynamic bounds we can rewrite values in hook callback
const bind = useGesture({
onDrag: (params) => {
params._bounds[0] = [1, smth1];
if (params.offset[0] > smth2) {
params.lastOffset[0] = smth2
params.offset[0] = smth2
}
})
I had a feature which can get current pointer color like photoshop. I've used setMouseNavEnabled to disable drag, but it also can't scroll.
Does any way can only disable the drag event? Or enable scroll when setMouseNavEnabled = false .
Solved.
tracker = new $.MouseTracker({
element: this.viewer.canvas,
pressHandler: setMouseNavEnabled(false),
releaseHandler: setMouseNavEnabled(true),
});
There's other ways to disable dragging:
// Using viewer events
viewer.addHandler('canvas-drag', (event) => {
event.preventDefaultAction = true;
});
// Similar code can be used for the following viewer events:
// 'canvas-key', 'canvas-scroll', 'canvas-click',
// 'canvas-double-click', and 'canvas-drag'
// For specific pointer devices
viewer.gestureSettingsMouse.dragToPan = false;
viewer.gestureSettingsTouch.dragToPan = true;
viewer.gestureSettingsPen.dragToPan = true;
This is my first time attempting Lazy Loading, and I wanted to use IntersectionObserver. Got started by following along with this website. I honestly just want the content of the page to wait to load until it is less than 50% of the viewport's width below the viewport. I'm not sure how to observe all content, so I just selected the classes for the widgets that are being displayed, as they are the main content. Unfortunately my code doesn't seem to be doing much. I added a console.log at the beginning to make sure the file was linked correctly, and I tried to add more console.logs to log when the widget moves in and out of the capture area. The first console.log works, but nothing else happens.
Here is what I have:
console.log('file loaded');
const widgets = document.querySelectorAll('.widget');
const config = {
root: null,
rootMargin: '-50px 0px -55% 0px',
threshold: .5
};
let isLeaving = false;
let observer = new IntersectionObserver(function(entries, self) {
entries.forEach(entry => {
if (entry.isIntersecting) {
// we are ENTERING the "capturing frame". Set the flag.
isLeaving = true;
// Do something with entering entry
console.log("Widget loaded.");
self.unobserve(entry.target);
} else if (isLeaving) {
// we are EXITING the "capturing frame"
isLeaving = false;
// Do something with exiting entry
console.log("Widget is exiting.")
}
});
}, config);
widgets.forEach(widget => {
observer.observe(widget);
});
This code is in it's own js file. Where should I be linking it in the HTML file?
I'd appreciate any help I can get! Let me know if I need to provide more information.