hi, how can I have a transition-changing card when I clicked on perv and the next buttons in react.js?
I want to change my card with smooth transition or fade it
card image
return (
<article className="review">
<div className="img-container">
<img src={image} alt={name} className="person-img" />
<span className="quote-icon">
<FaQuoteRight />
</span>
</div>
<h4 className="author">{name}</h4>
<p className="job">{job}</p>
<p className="info">{text}</p>
<div className="button-container">
<button className="prev-btn" onClick={prevPerson}>
<FaChevronLeft />
</button>
<button className="next-btn" onClick={nextPerson}>
<FaChevronRight />
</button>
</div>
<button className="random-btn" onClick={randomPerson}>
Random Member
</button>
</article>
);
};
I have tried a small POC with fade effect but you can use the same logic to add other transition effect as well.
https://codesandbox.io/s/condescending-microservice-vhsvq
Related
When I try to link my main.js folder into my react component, I get this error message
"TypeError: Cannot read property 'addEventListener' of null"
I want implement the JS to the modals into my work section, I am having trouble doing that. I am very new to React so I am not totally sure what the rules and best practices are. I am tryint turn my old portfolio site into a new SPA site.
Code:
// select the open-btn button
let openBtn = document.getElementById('open-btn');
// select the modal-background
let modalBackground = document.getElementById('modal-background');
// select the close-btn
let closeBtn = document.getElementById('close-btn');
// shows the modal when the user clicks open-btn
openBtn.addEventListener('click', function () {
modalBackground.style.display = 'block';
});
// hides the modal when the user clicks close-btn
closeBtn.addEventListener('click', function () {
modalBackground.style.display = 'none';
});
// hides the modal when the user clicks outside the modal
window.addEventListener('click', function (event) {
// check if the event happened on the modal-background
if (event.target === modalBackground) {
// hides the modal
modalBackground.style.display = 'none';
}
});
// select the open-btn button
let openBtn2 = document.getElementById('open-btn2');
// select the modal-background
let modalBackground2 = document.getElementById('modal-background2');
// select the close-btn
let closeBtn2 = document.getElementById('close-btn2');
// shows the modal when the user clicks open-btn
openBtn2.addEventListener('click', function () {
modalBackground2.style.display = 'block';
});
// hides the modal when the user clicks close-btn
closeBtn2.addEventListener('click', function () {
modalBackground2.style.display = 'none';
});
// hides the modal when the user clicks outside the modal
window.addEventListener('click', function (event) {
// check if the event happened on the modal-background
if (event.target === modalBackground2) {
// hides the modal
modalBackground2.style.display = 'none';
}
});
React Code:
import React, { Component } from 'react';
import toDoListApp from '../mockups/to-do-list-img..jpg';
import pokeMockup from '../mockups/mockup-poke.jpg';
import ExpatColMock from '../img/colombia_logo.png';
import DogAPIMock from '../mockups/mockup-doggie.gif';
import modals from '../js/main.js';
class Work extends Component {
render() {
return (
<>
<section>
<div>
{/* Modal Background and Modal */}
<div className="mCustomScrollbar" data-mcs-theme="dark" id="modal-background">
<div id="modal">
<span id="close-btn">×</span>
<img className="modal-img" src="mockups/mockup.png" alt="expatcolombia" />
<h2 className="modal-title">Expat Colombia</h2>
<div className="modal-text">
<h3>Description</h3>
<p>Expat Service for people moving to Colombia. They provide consultations, tours, and assist in housing.</p>
<h3>Dependencies</h3>
<p>HTML, CSS, Javascript</p>
</div>
<div className="buttons">
Visit
Github
</div>
</div>
</div>
{/* Modal Background and Modal */}
<div className="mCustomScrollbar2" data-mcs-theme="dark" id="modal-background2">
<div id="modal2">
<span id="close-btn2">×</span>
<img className="modal-img2" src="mockups/poke-mockup.jpg" alt="expatcolombia" />
<h2 className="modal-title">PokemonAPI</h2>
<div className="modal-text2">
<h3>Description</h3>
<p>Pokemon-themed App with a that includes names, images, and stats of different Pokemons.</p>
<h3>Dependencies</h3>
<p>Javascript, JQuery, Ajax</p>
</div>
<div className="buttons2">
Demo
Github
</div>
</div>
</div>
</div>
<div>
<header className="ScriptHeader">
<div>
<h1 className="work-title">My Work</h1>
</div>
</header>
<section id="work">
{/*****Image size (height) is paramount to keep the photos formatted properly*****/}
{/* Image row 1 */}
<div className="row">
<div className="column">
<div className="container">
<img src={toDoListApp} className="image" alt="to-do-list-api" />
<a href="https://github.com/Drxl95/To-Do-List" target="_blank">
<div className="overlay">
<div className="text">Simple jQuery To Do List App</div>
</div>
</a>
</div>
</div>
<div className="column">
<a id="open-btn2">
<div className="container">
<img src={pokeMockup} className="image" alt="PokemanAPI" />
<div className="overlay">
<div className="text">Pokemon-themed API app <br /></div>
</div>
</div>
</a>
</div>
<div className="column">
<a id="open-btn">
<div className="container">
<img src={ExpatColMock} className="image" alt="expatcolombia.com" />
<div className="overlay">
<div className="text">Expat Colombia</div>
</div>
</div>
</a>
</div>
<div className="column">
<a href="https://github.com/Drxl95/DogAlbum" target="_blank">
<div className="container">
<img src={DogAPIMock} className="image" alt="dogAPI-mockup" />
<div className="overlay">
<div className="text">Dog Album API</div>
</div>
</div>
</a>
</div>
</div>
{/* Image row 2 */}
{/* <div class="row">
<div class="column">
<a href="#">
<div class="container">
<img src="img/image-4.jpg" class="image">
<div class="overlay">
<div class="text">Example 4</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<img src="img/image-5.jpg" class="image">
<div class="overlay">
<div class="text">Example 5</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<img src="img/image-6.jpg" class="image">
<div class="overlay">
<div class="text">Example 6</div>
</div>
</div>
</a>
</div>
</div> */}
{/* partial */}
</section>
</div>
</section>
<script src={modals}>
</script>
</>
)
}
}
export default Work
In my web page i set the screen reader automatically read some content. When screen reader read last content(percentage) then after press down arrow key then focus on next element(footer) but screen reader move to first element(header).
I need to focus on next element instead of first element. For this I am using angular 11.
<app-header></app-header>
<div>
<span role="alert">
<span> Preparing environment...</span>
</span>
</div>
<div>
<span [attr.aria-label]="Your environment ready in {{minutes}} minutes {{second}} seconds">
<span aria-hidden="true">
<span>Your environment ready in </span>
<countdown *ngIf="!min" [config]="minutes" (event)="handleCountDown($event)"></countdown>
<span> {{ minutes }}</span>
</span>
</span>
<div class="progress" >
<div class="indeterminate"></div>
</div>
<div class="progress">
<div class="progress-bar">
{{ percentage }} %
</div>
</div>
</div>
<app-footer></app-footer>
header code
<div role="banner" class="navbar navbar-expand-lg py-0 headerBg" role="banner">
<img class="logo" aria-label="company logo" src="./logo.jpg" />
</div>
footer code
<footer id="footer" role="contentinfo" aria-label="footer" class="footerBottom">
<div class="row">
<p class="mb-0">
<span> footer...</span>
</p>
</div>
</footer>
Today, I started a ridiculously simple task that grew as a problem the more I worked on it. You see, I am trying to make a JS functional sidebar that will filter elements in a container according to the filtering property in each element. If it is a part of the (Filtering rule) the element should display. Else, It should display none
<ul id="filteringSidebar">
<li>Color Is Green</li>
<li>Color Is Yellow</li>
<li>Color Is Blue</li>
<li>Color Is Violet</li>
<li>Color Is Magenta</li>
<li>Color Is Orange</li>
<li>Color Is Indigo</li>
<li>Color Is Gray</li>
<li>Color Is Black</li>
</ul>
<div id="elementsContainer">
<div> Blue </div>
<div> Magenta </div>
<div> Magenta </div>
<div> Yellow </div>
<div> Blue </div>
<div> Orange </div>
<div> Orange </div>
<div> Indigo </div>
<div> Blue </div>
<div> Gray </div>
<div> Blue </div>
<div> Black </div>
<div> Orange </div>
</div>
This is a very raw explaination of what i'm aiming to achieve, but the whole idea is for one to be able to click one or more of the list items in the UL with ID of filteringSidebar and expect the results according to user input. (IF YELLOW AND ORANGE IS PRESSED, THERE SHOULD ONLY BE YELLOW AND ORANGE ELEMENTS DISPLAYING IN THE DIV WITH ID OF elementsContainer)
In here I have give a different id for each <li> item and then used bootstrap for styling. Then each <div> hide via using bootstrap d-none. Using Query each button was assigned to a different function and these functions will toggle the d-none. This is just a basic and there may be more easy way to do this.
<html>
<head>
</head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
<script>
function showDivGreen() {
$("#green").each(function() {
$('#green').toggleClass('d-none');
})
}
function showDivYellow() {
$('#yellow').toggleClass('d-none');
}
function showDivBlue() {
$('#blue').toggleClass('d-none');
}
</script>
<ul id="filteringSidebar">
<button class="btn btn-success" id="btnGreen" onclick="showDivGreen();" value="green"><li>Color Is Green</li> </button>
<button class="btn btn-warning" id="btnYellow" onclick="showDivYellow();" value="yellow"><li>Color Is Yellow</li>
<button class="btn btn-primary" id="btnBlue" onclick="showDivBlue();" value="blue"><li>Color Is Blue</li>
</ul>
<div class="row">
<div id="blue" class="bg bg-primary col-md-4 hidden d-none " > Blue </div>
<div id="yellow" class="bg bg-warning col-md-4 d-none" > Yellow </div>
<div id="green" class="bg bg-success col-md-4 d-none" > Green </div>
</div>
</div>
</body>
</html>
I have a modal component which take a trigger to open the modal, and the content to go inside the modal.
<Modal>
<button className="btn btn--primary">Open modal</button>
<div>
<p>Modal content</p>
<p>More modal content</p>
</div>
</Modal>
And in the Modal component:
return (
<div className="Modal">
{props.children[0]}
<div className="Modal__container">
<div className="Modal__header">
<button className="Modal__close btn btn--secondary btn--small">
Close
</button>
<h1 className="Modal__heading">Here is my modal</h1>
</div>
<div className="Modal__content">{props.children[1]}</div>
</div>
</div>
);
This is working but very fragile as Im using an index on props.children. Can I instead name the components I pass to Modal? So something like:
<Modal>
<Modal.Trigger>
<button className="btn btn--primary">Open modal</button>
</Modal.Trigger>
<Modal.Content>
<p>Modal content</p>
<p>More modal content</p>
</Modal.Content>
</Modal>
I suggest you use props instead:
declare your Modal like so:
<Modal action={<button className="btn btn--primary">Open modal</button>}>
<div>
<p>Modal content</p>
<p>More modal content</p>
</div>
</Modal>
and your render method will then look something like
return (
<div className="Modal">
{props.action}
<div className="Modal__container">
<div className="Modal__header">
<button className="Modal__close btn btn--secondary btn--small">
Close
</button>
<h1 className="Modal__heading">Here is my modal</h1>
</div>
<div className="Modal__content">{props.children[1]}</div>
</div>
</div>
);
You can mark your children with a boolean flag that will serve as a name.
Within Modal you find the child marked as trigger and the child marked as content:
// within Modal
render() {
let trigger, content;
React.Children.forEach(this.props.children, child => {
if (!child) return;
if (child.props.trigger) { trigger = child }
if (child.props.content) { content = child }
})
return (
<div className="Modal">
{trigger}
<div className="Modal__container">
<div className="Modal__header">
<button className="Modal__close btn btn--secondary btn--small">
Close
</button>
<h1 className="Modal__heading">Here is my modal</h1>
</div>
<div className="Modal__content">
{content}
</div>
</div>
)
}
And you mark the appropriate children when rendering Modal:
<Modal>
<button trigger className="btn btn--primary">Open modal</button>
<div content>
<p>Modal content</p>
<p>More modal content</p>
</div>
</Modal>
We wrote a library called seapig that you might find useful for this use case.
somebody has an idea why this button in the
"(nav class="sidebar-collapse")"
not worth the "toggled" on there?
So in the end it looks like
"(nav class="sidebar-collapse toggled")".
EDIT: to the left is a vertical menu, and above from the menu is a button when you click the button the menu will fold in and out.
Button
<button type="button" id="menu-toggle" class="toggler"></button>
Sidebar:
<nav id="sidebar" class="sidebar-collapse">
<div class="side-widgets overflow">
<!-- Profile Menu -->
<div class="text-center s-widget m-b-25 dropdown" id="profile-menu">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<div class="s-widget m-b-25">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<!-- User 2 -->
<div class="s-widget m-b-25">
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
<!-- User 3 -->
<div class="s-widget m-b-25">
<jdoc:include type="modules" name="user4" style="xhtml"/>
</div>
</div>
<jdoc:include type="modules" name="menu" />
just want to know why the code does not work yet.
when I click the button, the class of a div to change.
and jquery does not work
$(document).ready(function(){
$(".toggler").click(function(){
$(".sidebar-collapse").toggleClass("toggled");
});
});