react-scroll make Link, highlight the element scrolled in other section
I want to add a highlight to the element scrolled, I am using react-scroll and I have 2 sections one is for links and the second is the content of the link. The scrolling is working but I want to highlight the content of the link.
in the sections of the links I have:
import { Link, DirectLink, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'
<Link
className="font-bold text-xs cursor-pointer"
to={`test | 1`}
spy={true}
smooth={true}
duration={500}
containerId="Content"
>
Link1
</Link>
and in the section 2 I have:
<div id="Content">
<div id="test | 1">
test 1111
</div>
</div>
I added activeClass="active" but I do not feel working
Related
Im trying to set up my page so when you click "candidates" in the NavBar it goes to the Candidates section of the Home page (even if you're on another page). So far, I can only get it to scroll down if you click the Candidates button within the Home page using an tag but when I try to use a tag it doesn't work.
What am I doing wrong?
<nav className="w-full flex py-6 px-0 justify-between items-center navbar bg-red-gradient">
<img src={logo} alt="hoobank" className="w-[124px] h-[32px]" />
<ul className="list-none sm:flex hidden justify-end items-center flex-1 mr-5" >
{navLinks.map((nav, index) => (
<li
key={nav.id}
className={`font-poppins font-normal cursor-pointer text-[16px] mr-8 text-white `}
>
<Link to={nav.id === "home" ? "/" :`#${nav.id}`}>
<a href={`#${nav.id}`} >
{nav.title}
</a>
</Link>
</li>
))}
<Button2 />
</ul>
I've built a component that solves this problem passively in the background without having to modify any react-router Links. Works with React-Router v6.
https://github.com/ncoughlin/scroll-to-hash-element
first of all you didn't post any code. But still i think, i got your answer. Please try to check react router hashlink that will helps to move to particular section of a page.
If you still facing issue just lemme know, i will help you.
Thanks
I have built a Portfolio in NextJS and I've enabled smooth scrolling by doing the following inside global.css
html {
scroll-behavior: smooth
}
This somewhat works. As in the 'Home' link on the Navbar works when you are elsewhere, the last Icon on the Home section which takes you to 'Contact' works, the button right at the bottom to take you back to the top also works however my other Navbar items fail to smooth scroll, it just instantly goes to that section.
This is the link for anyone who wants to see for themselves https://danblock.vercel.app/
Relevant Code - Contact (Not working)
<Link href="/#contact">
<li className="ml-10 text-sm uppercase hover:border-b">
Contact
</li>
</Link>
Home - Working
<Link href="/">
<li className="ml-10 text-sm uppercase hover:border-b">Home</li>
</Link>
Scroll to top button (working)
<Link href="/">
<div className="rounded-full shadow-lg shadow-gray-400 p-4
cursor-pointer hover:scale-110 ease-in duration-300">
<HiOutlineChevronDoubleUp className="text-[#FF0000]/80"
size={30} />
</div>
</Link>
It looks as if it's only working for things directing to "/"
It looks like it's within the way NextJS handles <Link? scroll={false} inside the Link Tag, it has fixed the issue.
Reading documents, it seems by default, will go to the top, and then scroll back.
I have a Vertical menu that is styled as a dropdown.
on iPhone, when Voiceover is on, double tab will open the dropdown, swipe Right will go through menu items, and when gets to the last menu item, Swipe Right will close the dropdown and gives focus to the first link outside of Menu.
Now, dropdown menu is closed. and menu items are not visible. Normally, one single Left swipe should moves the focus from outside link to the dropdown header while Voiceover is ON.
but the problem is, it takes multiple Left Swipe equal to the number of menu items 4+ 1 to get from outside link to dropdown header. Voiceover is not announcing anything, I can only see on iPhone screen Voiceover text reading Manu item which is the same as <a role="menuitem">.
it looks like Voiceover still recognizes the menu items although the dropdown menu is closed.
If I do NOT open dropdown menu, 1 right swipe moves focus from dropdown header to outside link, and then 1 left swipe move focus from outside link to dropdown header. the problem happens when I open dropdown menu and swipe right through menu items.
I tried to resolve this by giving UL, Li , <a> the combination of these attributes but did not work.
When menu is closed:
aria-hidden=true, tabIndex=-1, display=none, visibility=hidden
but did not work.
I am wondering if I can implement UISwipeGestureRecognizer for React JS.
I see how the import command and code for React Native but nothing for React JS.
My Question is: when dropdown menu is closed, lets say focus is on outsideLink, how can I bring focus to dropdownHeader with one Left Swipe ?
How to force Voiceover to ignore menu items when dropdown menu is closed.
Note: my module is a Class in React JS.
Really appreciate any help.
import React, { Component } from 'react'
// help needed : how to import UISwipeGestureRecognizer for React JS
class App extends Component {
constructor(props){
super(props)
this.state = {
menuOpen: false,
}
this.closeMenu = this.closeMenu.bind(this);
this.toggleMenu = this.toggleMenu.bind(this);
this.handleSwipe = this.handleSwipe.bind(this);
}
componentDidMount () {
window.addEventListener('touchstart', handleSwipe);
}
closeMenu(event){
this.setState({menuOpen: false});
this.handleSwipe(event);
}
toggleMenu(event){
this.setState({menuOpen: !this.state.menuOpen});
}
handleSwipe(event){
const outsideLinkFocused = event.target.classList.contains('outsideLink');
const dropdownHeader = document.getElementsByClassName('dropdownHeader')[0];
const leftSwipe = UISwipeGestureRecognizer.direction == 'left'; // I need help with leftSwipe condition
if(outsideLinkFocused && leftSwipe){
dropdownHeader.focus();
}
}
render() {
return (
<div className="Container">
<div className="NavContainer">
<button className="dropdownHeader">
Dropdown Header
</button>
<ul className="menu" role="menu">
<li className="item" role="none">
<a role=="menuitem" href="#"> item 1</a>
</li>
<li className="item" role="none">
<a role=="menuitem" href="#"> item 2</a>
</li>
<li className="item" role="none">
<a role=="menuitem" href="#"> item 3</a>
</li>
<li className="item" role="none">
<a role=="menuitem" href="#"> item 4</a>
</li>
</ul>
</div>
<div className="ArticleContainer">
<a className="outsideLink" href="#"> Outside Link </a>
</div>
</div>
)
}
}
This module is more complex and all the handlers work fine. I just wrote a short version here.
I created a simple navigation menu with Bootstrap. It's working fine in pure javascript, but when adapting it into react, the hamburger icon doesn't function (nothing happens on click). I installed bootstrap with
npm install --save bootstrap
And then added the bootstrap css to index.html in the public folder:
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
My jsx is as follows:
<nav className="navbar navbar-expand-sm navbar-dark bg-dark">
<div className="container">
<button className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span className="navbar-toggler-icon"></span></button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link to="/app/portfolio" className="nav-link">PORTFOLIO</Link>
</li>
<li className="nav-item">
<Link to="/app/about" className="nav-link">ABOUT</Link>
</li>
<li className="nav-item">
<Link to="#create-head-section" className="nav-link" style={{fontStyle: 'italic'}}>Personal art</Link>
</li>
<li className="nav-item">
<Link to="#share-head-section" className="nav-link">CONTACT</Link>
</li>
</ul>
</div>
</div>
</nav>
Again, everything looks fine except that the hamburger icon is not functioning.
The bootstrap show class is used to display the collapsible menu items. So, the task is to simply add the show class conditionally on click of the hamburger icon.
Just follow these simple steps to achieve this functionality.
Add a showCollapsedMenu(the name is up to you) property with initial value of false in your state like this:
state={
showCollapsedMenu: false
}
Then declare a function like this which when called will reverse the current state:
toggleMenu = () => {
this.setState({
showCollapsedMenu: !this.state.showCollapsedMenu
})
}
The above function will be called whenever the hamburger icon is clicked. So implement the onCLick method on the hamburger icon like this:
<button
className="navbar-toggler"
type="button"
onClick={this.toggleMenu} // <=
data-toggle="collapse"
data-target="#navbarNav">
<span className="navbar-toggler-icon"></span>
</button>
Now create a const show which will conditionally add the show class depending on the state of showCollapsedMenu:
const show = (this.state.showCollapsedMenu) ? "show" : "" ;
Now finally add this show to the div with collapse navbar class like this:
<div className={"collapse navbar-collapse " + show} id="navbarNav">
Note: Mixing jQuery with React is not recommended as they both manipulate the DOM differently. While it may seem an easy solution, it might result in bigger problems.
Bootstrap events require jQuery, Popper and Bootstrap.js source. That page will also let you know which components require JS. You can include jQuery, Popper and bootstrap.js in the index.html file, where you load your bundle. Either add that, or simply check out Reactstrap, which implements Bootstrap components in React.
According to https://www.npmjs.com/package/bootstrap#whats-included, the npm version of Bootstrap doesn't include jQuery, but the navbar component needs it, so you might need to add https://www.npmjs.com/package/jquery to your dependencies.
I've searched high and low for the Materialize UI equivalent of this (example in lighter weight MUI CSS): -
https://www.muicss.com/docs/v1/example-layouts/responsive-side-menu
For example on a desktop sould look like this (with ability to show / hide menu via burger icon): -
But on a mobile would look like this: -
I kept at it and came up with something using the documentation (http://materializecss.com/side-nav.html).
I've attached the HTML, CSS + JavaScript below if anyone is interested.
NOTE: In my answer there is no burger when viewed at a desktop size i.e. no ability to hide the menu. I discovered that if I removed the hide-on-large-only attribute on the following <a> then it put a menu over the top of the existing menu.
<i class="material-icons">menu</i>
Also, when clicking out of the menu it disappeared completely! :-)
Ideally it would be nice to have the burger in the desktop size so the menu can be hidnen if necessary but happy enough with this solution TBH.
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 300
edge: 'left', // Choose the horizontal origin
closeOnClick: false, // Closes side-nav on <a> clicks, useful for Angular/Meteor
draggable: true // Choose whether you can drag to open on touch screens
});
#container {
padding-left: 300px;
}
#content {
padding: 20px;
}
#media only screen and (max-width : 992px) {
#container {
padding-left: 0px;
}
}
<!-- JQuery / Materialize CSS + JavaScript imports -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<!-- HTML -->
<div id="container">
<div id="menu">
<ul id="slide-out" class="side-nav fixed show-on-large-only">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Dropdown<i class="material-icons">arrow_drop_down</i></a>
<div class="collapsible-body">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div id="content">
<i class="material-icons">menu</i>
<h3>Simple Materialize Responsive Side Menu</h3>
<p>Resize browser to see what it looks like in (a) brwoser (b) mobile devices</p>
</div>
</div>