i have a navbar and i want to scroll it horizontally. I use "Tab" and "Tabs" from react-bootstrap. I couldn't figure out how to do this. ( I tried to wrap nav with div, but it didn't work because every tab has its own items )
I tried this:
const outsider = document.getElementsByClassName('products-tabs sub-tabs nav nav-tabs');
const distance = 200;
const scrollLft = () => {
outsider.scrollLeft -= 900;
console.log(outsider);
};
<Tab
className="products-tab"
id="products-tab"
eventKey={index}
title={subcategories.categoryName}
key={`${index + 1}_tab`}
>
{subcategories?.subcategories?.length > 1 ? (
<>
<Button onPress={scrollLft} className="brand-arrow-button">
<i className="icon-Arrow_Simple_left" align="left" />
</Button>
<Button
onPress={() => onClickLeft()}
className="brand-arrow-button-right"
>
<i className="icon-Arrow_simple_rightt" align="left" />
</Button>
<div id="menum">
<Tabs
className="products-tabs sub-tabs"
defaultActiveKey="sub-0"
id="menu-subcategories"
onSelect={e => {
const selectedTabIndex = parseInt(e.split('-')[1], 10);
setActiveSubcategory(selectedTabIndex);
}}
>
{subcategories?.subcategories
?.concat(subcategories?.subcategories)
.map((subcategoryItem, subIndex) => (
<Tab
eventKey={'sub-' + subIndex}
title={subcategoryItem?.name}
key={`${subIndex + 1}_subTab`}
>
**Items
</Tab>
))}
</Tabs>
And this is my css:
&.sub-tabs {
border-radius: 15px;
margin-left: -1px;
margin-right: -16px;
padding-bottom: 1px;
margin-top: 10px;
flex: none;
overflow-x: scroll;
white-space: nowrap !important;
When i click to the button, nothing happens.
This is the console output:
enter image description here
In React, you can use the useRef() Hook to get the reference of a component (similar to document.getElementsByClassName()). Then, you can apply horizontal scrolling using element.current.scrollLeft.
Example:
import { useRef } from 'react'
const App = () => {
const scrollElement = useRef(null)
const scrollLeft = () => {
scrollElement.current.scrollLeft = 50
}
return (
<div className = 'App'>
<div className = 'ScrollMenu' ref = {scrollElement}>
<a href = '#home'>Home</a>
<a href = '#news'>News</a>
<a href = '#contact'>Contact</a>
<a href = '#about'>About</a>
</div>
<button onClick = {scrollLeft}>Click me</button>
</div>
)
}
Here is a live example.
Related
I am working with React Bootstrap Modal. I'm trying to change the closeButton icon. But it didn't work.
<Modal.Header className='modal-head' closeButton>
<Modal.Title>Cart</Modal.Title>
</Modal.Header>
I don't think react-bootstrap library provides anything as such by itself. Although what you can do it add an icon right aligned in the modal header and add an onClick action which changes the modal's open state and closes it.
*You can take a look to this example, maybe it will be more clear to you.
You have just to import LoginButton.
Focus on
handleShow
export const LoginButton = () => {
const [fullscreen, setFullscreen] = useState(true);
const [show, setShow] = useState(false);
function handleShow(breakpoint) {
setShow(breakpoint);
setFullscreen(true);
}
return (
<div>
<Button className="me-2 mb-2" onClick={() => handleShow(true)}>
Login
</Button>
<Modal className="Modal_Login" show={show} fullscreen={fullscreen} onHide={() => setShow(false)} >
<Modal.Header className="Modal_Login_header" >
<Modal.Title className=" Modal_Login_header_title col-md-4" >Login</Modal.Title>
<Button className="col-md-2" onClick={() => handleShow(false)}> CLose </Button>
</Modal.Header>
<Modal.Body>Modal body content</Modal.Body>
</Modal>
</div>
)
};
CSS:
.Modal_Login{
display: flex;
flex-direction:row;
}
.Modal_Login_header{
display: flex;
flex-direction:row;
justify-content: flex-end;
}
Burger menu icon opens and closes a hidden sidebar, at the same time I want the icon to change to an X when the sidebar is open.
Button
<span style="font-size:16px;cursor:pointer" onclick="toggleNav()"><i onclick="myFunction(this)" class="fas fa-bars"></i> </span>
Menu Scripts
<script>
function toggleNav() {
var sidenav = document.getElementById("mySidenav"),
main = document.getElementById("main");
sidenav.style.width = sidenav.style.width === "250px" ? '0' : '250px';
wrapper.style.marginLeft = wrapper.style.marginLeft === "250px" ? 'auto' : '250px';
}
</script>
<script>
function myFunction(x) {
x.classList.toggle("fas fa-times");
}
</script>
Probably making a glaringly obvious mistake but I've googled as many times as I can and still can't figure it out.
You cannot toggle multiple classes like you did
You have to do two calls
function toggleNav() {
/* var sidenav = document.getElementById("mySidenav"),
main = document.getElementById("main");
sidenav.style.width = sidenav.style.width === "250px" ? '0' : '250px';
wrapper.style.marginLeft = wrapper.style.marginLeft === "250px" ? 'auto' : '250px';*/
}
function myFunction(x) {
x.classList.toggle("fa-bars");
x.classList.toggle("fa-times");
}
i {
height: 20px;
width: 20px;
background-color: red;
display: block;
}
<span style="font-size:16px;cursor:pointer" onclick="toggleNav()"><i onclick="myFunction(this)" class="fas fa-bars"></i> The red square represent your icon</span>
I tried to set an onClick event to open a flexbox in react using tsx. The button and the flexbox is shown properly but vscode shows a problem with the onClick event. I cant figure out whats wrong but maybe you can. I am new to the field and tried some ideas from the stack community but it didnt work for me.
The console tells me I have to assign 'string' but it doesnt work either.
//Function to change visibility of the flexBox
document.getElementById("OpenProfiles")
.addEventListener("click", ProfilesOpn);
function ProfilesOpn () {
var a = document.querySelectorAll(".ProfilesOpen")[0];
var b = document.querySelectorAll(".ProfilesClose")[0];
a.style.visibility = "hidden"
b.style.visibility = "visible";
}
//the button code inside the flexbox
<div className={"Profiles"}>
<div className={"Profile1"}>
<div className={"Profile1P"}></div>
<h3 className={"ProfileH3"}>Profile1</h3>
</div>
<div className={"Profile2"}>
<div className={"Profile2P"}></div>
<h3 className={"ProfileH3"}>Profile2</h3>
</div>
<div className={"Profile3"}>
<div className={"Profile3P"}></div>
<h3 className={"ProfileH3"}>Profile3</h3>
</div>
<div className={"Profile4"}>
<div className={"Profile4P"}></div>
<h3 className={"ProfileH3"}>Profile4</h3>
</div>
<h3 className={"EndCoPro"}>Are you missing any profiles?</h3>
<button id="OpenProfiles" onClick="return(ProfilesOpn());">
<div className={"ProfilesOpen"}><img src={ProfilesOpen} alt="Open Profiles"/></div>
</button>
</div>
//the code in sass for the styling
.Profiles {
position: absolute;
display: flex;
left: 0px;
bottom: 0px;
width: 300px;
height: 900px;
flex-direction: column;
justify-content: flex-start;
align-items: space-between;
background-color: #292929;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
visibility: hidden;
}
Code Sandbox: https://codesandbox.io/s/dazzling-bouman-62hgi?file=/src/App.js:0-1850
Here are 2 approaches to what you are trying to accomplish using react hooks:
The ProfilesOpn function uses a ref to set DOM properties.
The reactWayToShowCat function sets the showCat status using internal component state.
import React, { useState, useRef } from "react";
import "./styles.css";
export default function Explorer() {
const a = useRef(null);
const b = useRef(null);
const [showCat, toggleShowCat] = useState(true);
const ProfilesOpn = () => {
a.current.style.visibility = "hidden";
b.current.style.visibility = "visible";
};
const reactWayToShowCat = () => {
toggleShowCat(!showCat);
};
return (
<div className="Profiles">
{Array(4)
.fill("")
.map((_, i) => {
const num = i + 1;
return (
<div className={`Profile${num}`} key={num}>
<div className={`Profile${num}P`}></div>
<h3 className="ProfileH3">{`Profile${num}`}</h3>
</div>
);
})}
<h3 className="EndCoPro">Are you missing any profiles?</h3>
<button id="OpenProfiles" onClick={ProfilesOpn}>
<div className={"ProfilesOpen"} ref={a}>
<img src="https://placekitten.com/200/300" alt="Open Profiles" />
<p>
Click to see solution that uses refs to accomplish what you were
doing
</p>
</div>
</button>
<button id="CloseProfiles" onClick={reactWayToShowCat}>
<div className={"ProfilesClose"} ref={b}>
<>
{showCat && (
<img src="https://placekitten.com/200/300" alt="Close Profiles" />
)}
<p>
Click to see one react way to show and hide the cat (no styling)
</p>
</>
</div>
</button>
</div>
);
}
The main issue in original code was that onClick needs to be set with this syntax:
<button id="OpenProfiles" onClick={ProfilesOpn}>
Hope this helps!
What I want to do is have something like this:
<button class="addMore">+</button>
Do an effect like this:
https://i.gyazo.com/d353b657df39c0e6ff159bfdb713f6a4.mp4
when you hover over it.
I've been able to find a few different things for this but none that act as I want it to in the video.
Use title in order to display your message:
<button class="addMore" title="click here">+</button>
.addMore{
border: none;
width: 32px;
height: 32px;
background-color: #eee;
transition: all ease-in-out 0.2s;
cursor: pointer;
}
.addMore:hover{
border: 1px solid #888;
background-color: #ddd;
}
<button class="addMore" title="Hover on me!">+</button>
<button type='submit' title='Add New Item'>+</button>
You can set the background color change of button using css as follows,
.addMore:hover {
background-color: #545454; //desired color code
}
and set the tooltip as <button class="addMore" title="click here">+</button>
For all my React.JSers out there, (and for folks that come after), I was able to achieve this by doing (and using the reactstrap lib):
Usage of Tooltip component
import { Button } from 'reactstrap'
<Tooltip
tooltipContent={
'You cannot cancel invoices that were created automatically by memberships!'
}
component={
<span id={'cancelButton'}>
<Button
style={{ pointerEvents: 'none' }}
onClick={...}
disabled
>
Cancel
</Button>
</span>
}
/>
Tooltip.jsx
import React, { useState } from 'react'
import * as Reactstrap from 'reactstrap'
const Tooltip = props => {
const [tooltipOpen, setTooltipOpen] = useState(false)
const toggle = () => setTooltipOpen(!tooltipOpen)
// Warnings for component useage
if (!props.component) {
console.warn('Missing component for tooltip')
}
if (!props.tooltipContent) {
console.warn('Missing content for tooltip')
}
if (props.component && !props.component.props.id) {
console.warn('Component for tooltip has no id (must not have spaces)')
}
return (
<React.Fragment>
{props.component}
{props.tooltipContent && (
<Reactstrap.Tooltip
placement={props.placement ? props.placement : 'top'}
isOpen={tooltipOpen}
target={props.component.props.id}
toggle={toggle}
delay={props.delay ? props.delay : 750}
>
{props.tooltipContent && (
<div className="row p-2">
<div className="col-md-12">{props.tooltipContent}</div>
</div>
)}
</Reactstrap.Tooltip>
)}
</React.Fragment>
)
}
Tooltip.displayName = 'Tooltip'
export default Tooltip
The most important parts are the style={{ pointerEvents: 'none' }} on the <Button /> element and the nesting of the Button within a <span />
I have a button that shows up on the right corner when I make the first scroll down move. I want to make my button disappear after I scroll up on the page.
How can I do this?
So far, my typescript function track($event:any){} looks like this:
import { Component } from '#angular/core';
#Component({
host: {'(window:scroll)': 'track($event)'}
})
export class DirectSearchComponent{
showScrollButton:boolean=false;
beginY: any;
constructor() {}
track($event:any) {
console.debug("Scroll Event", $event);
if (this.beginY == undefined || this.beginY != null) {
if (this.beginY > $event.scrollY) {
this.showScrollButton = false;
}
else {
this.showScrollButton = true;
}
}
else {
this.beginY = $event.scrollY;
this.showScrollButton = true;
}
}
}
And my html code for the button looks like this:
<a href="#" class="scrollup">
<button *ngIf="showScrollButton"
type="button" class="btn btn-primary btn-block pull-right"
style="position: fixed; bottom: 10px; right: 51px;
width:3%; overflow:auto;">
<i class="glyphicon glyphicon-chevron-up" ></i>
</button>
</a>
Thanks in advance!
Looks like this.beginY is not being initialized properly.
Import NgOnInit and in the NgOnInit method, set...
this.beginY = document.documentElement.scrollTop || document.body.scrollTop;
This should properly initialize your variable to the initial page scroll value.