I am trying to create a smooth scrolling page in React. The page is split into 4 sections:
Overview
About us
Courses
News
So on scrolling, if it's at the section 'News' with the id=news the URL should be updated to: website.com/specific-string#news so he can copy this link, and when you access this URL to send you directly to that section.
I am using react version 16.3.1. So cannot use hooks here.
After adding this smooth scroll feature, I need to display a button which will download the content in the section in the viewport.
I am new to react and trying to learn new things by challenging myself everyday. Anyone who could guide me here?
window.location.hash = element.id // here is the element id
Or like this if you do not want to scroll to the element
history.pushState({}, "", element.id)
You can update your location hash like this.
If you don't know how to get the element id, you can use IntersectionObserver
It all can be done without hooks
Related
I'm trying to make a "skip to content" link at the top of a page in my app. Basically I want to pass it an id and I want to set the focus to the component that has that id.
Normally I would use an anchor tag to create a link to a particular component on a page like so: link
But this doesn't work in react native and I've only seen ways to create links to other app pages or external web pages. Is there a way to have this anchor tag functionality through something like a link in react native?
I have tried playing around with Linking, history.push, and Link from react-router-dom but none of them work. I can place an tag and that technically works but I don't think it's great practice for react native and I can't style it properly.
I have looked at questions like this but did not reach a conclusion. My question is how to show only the part of the web page that works (the monitor covers it) to the user?
And if the user scrolls, display the other component of page .
For example look at Ionic framework home page :
https://ionicframework.com
I am looking for something like this . Any idea ?
Thanks
You can figure out when an element is in the view of the user using the Intersection Observer API, then animate the elements using Javascript when the element is in view. Here is probably a better link for all the methods it has.
Over the past month I've been working on a new website which is based on a WordPress theme. The site is a pseudo one-page design, where the primary page serves as the main page for information. However, it also has a gallery where you can enter several individual portfolio projects - which effectively takes you to another page (and therefore the use of "pseudo"). So that's the design and layout of the site...
On the main page of the site I added anchor links to the various sections for ease of use, which will scroll/take the user to the desired section of choice, by simply clicking on the navigation menu. The links all work fine, but a problem arises when you've entered and returned from a portfolio project.
The problem:
After having clicked on an anchor link, a hashtag is then added to the URL "www.example.com/#anchor". If the user enters a different page and then returns the hashtag/anchor is then reactivated and scrolls to the linked section. This is a real pain and anything but user-friendly, since it is taking the user away from where it was.
I've been trying as many Javascript/JQuery codes I can find, many from this very site, but none has managed to solve the problem... I need to find a way to effectively remove the hashtag after use so the URL is left with only "www.example.com" again.
EDIT: Forgot to add that I also need to be able to click on the navigation menu whilst in a portfolio project and having the menu call to open the main page and take the user to the section of choice.
Does anyone have a solution? I am all out of ideas here.
Please also tell me where to add the piece of code if you are so kind to help.
Thank you!
I'm trying to create a popup menu with some kind of navigation inside it. For this, I'd like to mimic the style of the UINavigationController on iOS. If you're not familiar with it, it creates a hierarchal menu with sliding pages, like this:
(source: apple.com)
I'd like to make something similar in HTML and JavaScript. The elements I'd like to take from iOS design are
the sliding animation that occurs when going between pages.
the back button that appears once navigation has occurred
I need something that doesn't involve page refreshes or moving between pages, but the menu only needs to be one level deep. Has anyone created this type of menu in JavaScript? I'd prefer vanilla JS, but it's not a requirement.
Build an hash from that menu, then iterate trough it like this.
At first you display the first level of the hash.
When the user clicks a link navigate in the hash at that position, fetch all it's children's and populate another instance of the menu behind the visible one.
Then it's a simple job of moving the new menu to a side so that it's visible.
And repeat...
As for the back button, you just fetch the parent of the current position i the hash...
I have a link which has two actions. When I click on it, it opens a modal box via "ng-click", but it also transitions state via its "ng-href".
The modal box opening is intended. The state transition is not. However I need the URL in that state transition to persist.
When I try to use $locationChangeStart to prevent the state change, it also prevents the URL from changing. This is not preferable. I've also researched a bit, and found potential solutions in "reloadOnSearch". However it doesn't possible to point to a particular link. Not all of the links on the page do this, the other links are all normal links. Furthermore I don't know how to use reloadOnSearch with ui-router.
The feature I'm trying to implement is similar to Pinterest's overlay of items. When you click on the item, they open up a modal box and change the URL, but the underlying page doesn't change. This allows the end user to copy the URL and share it with their friends, and when they access it, it will actually go directly the item page and not the overlay.
I'm currently using ui-router if that makes anything easier.
Hopefully somebody has a solution?
You can try angular ui bootstrap modal for better integration with angularJS.
Take a look at an example in http://angular-ui.github.io/bootstrap/
Or you may open a modal via data-target="#abc" instead of href="#abc"