I have a react component that displays a list of images horizontally across the page.
I would like to be able to scroll horizontally through them without having to hold in the SHIFT button.
Is there a way I change the default for just this component using css or react?
Here is my code: https://codesandbox.io/s/team-grid-slicer-2db8d
You can create a ref and bind it to your div which you will scroll. Here is a working codesandbox
Basically you create a ref and assign it to the div
const scrollRef = useRef()
...
<div ref={scrollRef}>
And you listen to the changes on the wheel event within the div:
if(scrollRef.current){
scrollRef.addEventListener('wheel', /* your function */)
}
And you scroll to left, instead of down based on the wheel event's deltaY:
el.scrollTo({
left: el.scrollLeft + e.deltaY * 5,
behavior: "smooth"
});
PS: You can remove * 5 but it looks better imo
just add an id="container to your component and then add
onWheel={(e) => {
e.preventDefault()
var container = document.getElementById('container')
var containerScrollPosition = document.getElementById('container').scrollLeft
container.scrollTo({
top: 0,
left: containerScrollPosition + e.deltaY,
behaviour: 'smooth' //if you want smooth scrolling
})
}}
This will listen to the onWheel and scroll your component.
Related
I am trying to create an E-commerce Store and I'm a beginner in React.JS. What I want is for 5 images to come together on top of eachother when the user scrolls. (so they should move TranslateX on scroll). Previously, on Vanilla Javascript I would have added a window.addEventListener('scroll') and then set a value like value = window.scrollY and then I would have selected the image I wanted to move and simply translateX or Y based on that value.
However, I'm not sure how to do this in React. Where can I set the window event listener? Is there a state needed, or useEffect?
I'm attaching an image so you can clearly see what I am trying to do:
What I have in react is the "Scroll" component which contains 2 divs
-1 div on the left 2/3 flex size containing all the images that should come together
-1 div on the right 1/3 flex size containing the text and the button
inside the left div I have 5 images, and in CSS i've used position absolute to position them on top of eachother (they are all PNGs so they have transparent background).
How would I go about implementing this on my website?
HUGE thanks in advance!
You can save the scrollY in a useState, which you then use to transofrm your images. The window listeners can be loaded inside a useEffect.
It (could) look like this:
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
const handleScroll = () => {
setScrollY(window.scrollY);
};
handleScroll();
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
(You may have to add some ESLint rules if you use it)
I am having issues with react Plotly displaying correctly when a graph loaded in a hidden tab is selected. It seems this is a known issue where every tab but the default tab will not resize appropriately because it doesn't know the hidden graph's dimensions.
To get around this I would like to dynamically update the tab height to be equal to the height of the default tab. Something like this: Change div height when tab is selected.
The issue is, I am unable to select the tab height value on DOM load. I thought I could add a componentDidMount function with an evenlistener for window load like such:
constructor(props) {
super(props)
this.state = {
value: 0
};
this.handleLoad = this.handleLoad.bind(this);
}
componentDidMount() {
window.addEventListener('load', this.handleLoad);
}
handleLoad() {
console.log("firstTab height: " + $('#firstTab').offsetHeight)
}
This issue is, the console log is outputting firstTab height: undefined.
When i inspect the web page and put the command $('#firstTab').offsetHeight into the console I am able to come up with a height of 697 px.
I don't want to hardcode the tab pixel size. Can anyone guide me as to why I am failing to grab the element height on window load?
Try using clientHeight property.
componentDidMount() {
const height = document.getElementById('firstTab').clientHeight;
}
I think instead of using event listener, you can do something like this.
componentDidMount() {
const height = this.firstTab.clientHeight;
console.log(height) // => gives you height
}
render() {
return (
<div
id="firstTab"
ref={ (firsTabElement) => { this.divElement = firstTabElement } }
>
Tab Content
</div>
)
}
After the first render if you are not hiding or putting any condition to remove the firstTab from the DOM. It will be available to you in componentDidMount lifecycle.
Hello i'm working on a project that requires canvas manipulation. I need to draw an image and have to move it within the canvas. Which was not so hard to accomplish.. However i need to change my cursor into "move" when hovering the image like
img{
cursor:move;
}
I couldn't find any way to do this. Any suggestion??
Thanks in advance..
When you drag an Kinetic.Image, you get dragstart and dragend events.
You can change the cursor type in those event handlers:
// starting to drag -- display the move cursor
image1.on('dragstart', function () {
document.body.style.cursor = 'move';
});
// done dragging -- display the regular cursor
image1.on('dragend', function () {
document.body.style.cursor = 'default';
});
Basically you need an element which you can style on the page but with display: none, then put that element onto the canvas like this:
var image = document.getElementById('image');
context.drawImage(image, 0, 0);
See the following post for a picture highlighting my question and a potential solution:
CSS overflow-y:visible, overflow-x:scroll
However, this strategy breaks when you actually move the scrollbar. In the suggested implementation (position: fixed;), the tooltips display next to child div in its position pre-scroll. So, as you scroll new child-divs into view, the tooltips begin falling off the bottom of the page.
See here for a demo of the bug: http://jsfiddle.net/narcV/4/
Any ideas how I can make the tooltips display next to the child div at all times?
I ended up implementing this using javascript, using the getPos function from this question.
The end product looks like:
var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
var hovered = e.srcElement;
var pos = getPos(hovered);
pos.x += hovered.offsetWidth;
pos.y -= scrollPanel.scrollTop;
tooltip.style.setProperty('left', pos.x);
tooltip.style.setProperty('top', pos.y);
}
Basically, I calculate where on the page the node is currently displayed (taking into account the scrollbar position), and manually place the tooltip in the right spot on the page.
Too bad there's no elegant/CSS way to do this, but at least this works.
Is there a built in way to determine if a component is fully visible in a Flex application (i.e. not offscreen one way or the other). If not how would I go about figurin it out?
I want to show or hide additional 'next' and 'previous' buttons if my primary 'next' and 'previous' buttons are off screen.
What event would be best to listen to to 'recalculate' ? stage.resize?
thanks!
here is a method for calculating if the component is within the bounds of the stage, it will not however tell you if the component is being hidden by another component, or if the component is being hidden because it is outside the bounds of another container.
public function isComponentWithinStage(c:UIComponent):Boolean {
var tl:Point = c.localToGlobal(new Point(0, 0));
var br:Point = c.localToGlobal(new Point(c.width, c.height));
//are we off the left or top of stage?
if ( tl.x < 0 || tl.y < 0 ) {
return false;
}
var stage:Stage = Application.application.stage;
//off the right or bottom of stage?
if ( br.x > stage.width || br.y > stage.height ) {
return false;
}
return true;
}
Could you give the specifics of the visible item and the container(s) it's in? Is it a matter of having to scroll some container to get to the buttons? Or is it a matter of someone has dragged a child window of a flexlib:MDICanvas partially off screen?
I think it's going to come down to if the x,y position of the component is beyond the width and height of its container, (and so on up through the parent containers until you reach your top level Application.)