Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
I am trying to program a simple component that moves the user to new Routes based on scrolling the mouse wheel, up until recently it has been working fine (scrolling up goes to the route listed above and vice versa) however there is a page where I do not want scrolling to change the route.
when I added a simple if check to my handleNavigation function to check if the user was on the route where I want to disable scrolling to different routes, I quickly ran into the problem that is not working, my logic is correct because when I manually go to the route (/work/portfolio) and try scrolling, the scrolling is disabled, however when following a link to it naturally, the scrolling feature is not disabled, I suspect that the useEffect event listener is not updating correctly, but I have location in the dependency array so it should update, why am I still able to scroll?
check the codesandbox above for the replicated issue: scroll to the very bottom, each scroll of the mouse wheel should route to a new page and then the final route '/work/' should appear, click on the link and notice that you are still able to scroll, when you should not be able to
I have seen your Sandbox. Add some function definition in Work.js component and then render it'll work fine.
import React from "react";
function Work() {
return (
<div>
<h1> Hii From Work</h1>
</div>
);
}
export default Work;
Related
I tried to update Mui from version 5.10 to 5.11.7, and one of the changes included was adding a SlotProps UI. The slotprops is broken somehow, and is getting inserted into the DOM of all mui modals instead of correctly giving them a backdrop - as a result, modals can't be closed unless there's some kind of close button in them to use manually.
I'm having trouble even approaching how to debug this. Any ideas would be appreciated.
This error is present in the console and the problem is because of this enter image description here getting added to the DOM, but I can't find results googling for this and I'm having trouble debugging it. It happens even if I insert a totally unstyled modal with nothing going on into a page.
I'm trying to implement a page transition animation that works as follows:
User clicks a link on the website
A block slides down from top to the bottom so the whole screen turns into the block's color
After a short delay, the block disappears by sliding down further
User sees a new page opened.
The libraries I use are:
React
React Router Dom
Transition Group
GSAP
You can find the current implementation here: https://codesandbox.io/s/frosty-brook-3dl6y5
The problem is that the animation gets triggered after the new page is opened (i.e. user clicks a link, sees a new page's content, and then the animation starts).
I've already tried many different things, including replacing onEnter with onExist in PageTransition component, however, nothing worked.
How can I update my code so the animation gets triggered before the new page loads?
Just in case, I'm ready to switch to any open source library that would allow me to achieve what I described above.
I want to build a simple app like in picture attached with react js, I just cannot find the right idea of:
How to "select" photos(or item) in an application and have the "cart"-like component appear at the bottom when at least one photo/item is selected(and close and deselect all already selected photo/items) and expand the cart-like component at the bottom when clicked to show what's been already selected.
What is the best approach to this?
P.S I'm new to react with a big idea in mind xD
app's view
This question definitely needs more information, but I will try to point you in the right direction. There are hundred of ways to create the UI/functionality you are describing but here is a very generic overview;
The "items" (Img1-6) looks like a grid of ShopItem components, possibly in a CSS Grid / flexbox. Each ShopItem would probably make use of an onClick method to "do something" when it is clicked - this may involve updating a state (using the useState react hook) somewhere which tells you if a ShopItem is checked or not. It could also potentially use a callback method to do something in the parent when the items are checked.
I imagine that each ShopItem may own its own "checked" state or may update a global state (Such as Zustand or Redux) or a Context (React) when it is toggled on and off. The checked state of a ShopItem would also inform the UI of the component.
The "cart-like" component could be looking at the global state/context/callback from the item component, and could change based on its value and how many checked items there are. (Eg/ checkedItems !== 0 ? show : don't show)
This is just one way in which this UI can be built, if you would like a more specific solution, please edit your question to include code snippets and what you've already tried.
I'm using ui-router.
A similar question has been asked on this a Number of times... But the solutions seem to be all over the place and either the question doesn't address a simple idea or the answer doesn't, either.
Here's my simple ui-view setup:
A master view has the navbar and footer
Children of the master view/route that can be activated include the Homepage, About Us page and Learn More page
Pretty simple...
By default, if the homepage is activated, and scrolled down 500px, and I click on a route to the "About Us" page, that page will be scrolled down 500px. Obviously this is not desired.
So... Everyone's solution is some variation of setting document.scrollTop(0) on every state change success. This is atrocious.
While it fixes the issue at hand, it clobbers the browser back button behavior. Here are some problems:
When a refresh is called, the standard browser behavior of refreshing to the current location is ruined
When the back button is clicked, the homepage would then scroll all the way to the top
If the back and forward button were clicked, I wouldn't retain the correct spot on the next page, either
This whole document.scrollTop(0) or any variation of it, really doesn't seem to be viable and I've yet to see a clear solution to this.
I need to create tabs that will get data from an array (using ng-repeat) for a set of questions. I need to display the page to answer a question for a particular tab and again need to keep the selected answer and to traverse to the other page can keep track of answers.
And at last will be able to see the unanswered question and answer at last. What would be some code for this?
I need to use it on a laptop as well on mobile.
Using ng-click, it is possible to keep click for laptop and (angular-touch) ng-swipe-left for tab. I have achieved the scenario.