As per the react-scroll readme, we have to pass in
to="target"
props to help in tracking the element and also to navigate to the element when clicked.
We have a use-case where we need to make the link active some pixels before the element reaches the top. And, when clicked on the link, it should navigate to where the start of the element.
I tried setting
offset={-200}
to negative values. It solves the use-case of making the link active even before the element reaches the top. But, when clicked on the link, it navigates to the element with set offset, meaning, not bringing the element to the top and adding the offset pixel.
How can we customise these two behaviours? In case of click, the navigation point should be the start of element and in case of scrolling the link should become active even before the start of element is reached.
I think, if we can stop the navigate to behaviour of Link somehow then we can use onClink callback function to scroll to an element start while keeping the scrolling with mouse behaviour working with desired offset.
Please let me know if you have a way out. Thanks in advance!!
Related
I have a coverflow in my program that select an image on click, but I need to have functionality that when you click on the chosen image a second time, it links you to a route.
Like with itunes, you can scrowl side by side the coverflow to chose the correct album and click again to access it's page.
The coverflow has the attribute handleSelect. I want the first click to select the image and make it bigger and in the center of the coverflow, and for the second click to follow the route.
Is it doable?
I use this coverflow: https://github.com/leon-good-life/coverflow-react
Thanks.
For the first click figure out to enlarge image ,You have to do a complete change in you css .It is easier to add the enlargement when hovered, because that makes more sense ,Anyway add counts to the onClick function you are using and then do the complete routing in that function when the clickcCount exedes you limit..
I have this animated graph on my website that you have to scroll a bit down to get to. The animation always happens immediately meaning that no one can see it actually being made since they haven't scrolled down yet. I was wondering if there is any way to make it so that that element only appears when the user scrolls to that portion of the screen?
npm i react-bottom-scroll-listener
please refer https://github.com/karl-run/react-bottom-scroll-listener#readme this gives you a listener where you can set a condition and enable it
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.
My question is based on the image here
The above uses the angular plugin br-fullpage (angular version of the jquery's fullpage.js plugin) to create a vertical scrolling website. However unlike fullpage.js, br-fullpage is somewhat lacking, and makes it hard for me to determine the current page being displayed on the screen. The only way that i can possibly use (unless if i didn't aware of other methods) to determine which page is being displayed right now, is by using the margin-top value (yellow highlighted).
However everytime i tried to get the margin-top value, i always get 0px instead of the highlighted value. I don't understand what is the problem with this, and it makes me hard to do the animation if i don't know which page that i am currently on when the page is refreshed.
So how can i get the correct margin-top value below? Or is there any other method that i can use to know the current active page displayed on the screen?
Thanks
Can you use sessionStorage.getItem('br-fullpage-index')? This won't give you the margin, but should contain the current page index.
I am working on a defect in my GTK code for displaying context menus. After creating a menu with a number of menu items, I use gtk_menu_popup() to display the menu. This function takes a function pointer of type GtkMenuPositionFunc which lets me position the menu. I don't really do anything here except tell GTK to keep current position but push the menu in if part of the menu is outside the monitor (using the fourth argument to the function). My problem is that when GTK pushes the menu in, the absolute position of the menu items does not change. Hence their scroll position changes resulting in scroll bars in the menu. I want the relative position of the menu items w.r.t the menu to remain fixed. Is there any way I can do that? The GTK documentation does warn about this problem, but does not say anything about how to fix it. There is the link to it for reference:
http://library.gnome.org/devel/gtk/unstable/GtkMenu.html#GtkMenuPositionFunc
EDIT: I would have liked to include some code, but the logic is too scattered for that.
You don't need to provide a positioning function if you just want the default behavior. The default behavior is to keep the current position but make sure the menu fits on the monitor, so you can just pass NULL as the positioning function.
You can also take a look at how the default positioning function is written: http://git.gnome.org/browse/gtk+/tree/gtk/gtkmenu.c, gtk_menu_position() currently at line 4288.
PS. If your logic is too scattered to post a code sample, then you should consider cleaning it up.
I was not able to find any way to readjust the scroll-offset of menu items once the menu is pushed in. So, the workaround I used was to avoid having GTK push the menu in vertically. Hence, the original request was to create the menu at position (x,y) but resulted in length L of the menu going out of the screen, I reposition the menu at (x,y-L) in my position function. Similarly, if y<0 I change set it to (x,0). I still tell GTK to push in any menu that goes outside the screen to take care of menus going over the left and right margins.