I'm working on a react.js project.Aos animation does not work when i refresh the page.It works when I open another page and come back.
import 'aos/dist/aos.css';
import AOS from 'aos';
function MenuCard(props) {
AOS.init();
AOS.refresh();
return (
<>
<div className="row">
<div className="col">
<div class="card bg-dark text-white" id="cardBody" data-aos="flip-left" data-aos-duration="800">
<img src={photos[`${props.id}`]} id="image" class="card-img" alt="..." />
<div class="card-img-overlay" id="cardImg">
<div id="baslik">
<a class="card-title" href={`#${props.title}`} id="cardTitle">{props.title}</a>
</div>
</div>
</div>
</div>
</div>
</>
)
}
I solved this issue with this code
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() { AOS.refresh(); }, 500);
});
it refreshes AOS after 0.5 seconds.
Related
I'm a beginner in React Js, and I'm using React Js with BootStrap 5.2.0
My product cards are not getting displayed in a row
I want to display 4 product cards in a row.
Adding Codes:
Home Page code:
<div className="container-fluid mb-2">
<Carousel />
<div className="mt-2">
<div className="row">
<div className="col-md-2">
<GetAllCategories />
</div>
<div className="col-md-10">
<div className="row row-cols-1 row-cols-md-4 g-4">
<div className="col">
{products.map((product) => {
return <ProductCard item={product} />;
})}
</div>
</div>
</div>
</div>
</div>
</div>
PRODUCT CARD CODE:
const ProductCard = (product) => {
return (
<div class="card border-color rounded-card card-hover product-card custom-bg">
<img
src={"http://localhost:8080/api/product/" + product.item.imageName}
class="card-img-top rounded mx-auto d-block m-2"
alt="img"
style={{
maxHeight: "270px",
maxWidth: "100%",
width: "auto",
}}
/>
<div class="card-body text-color">
<h5 class="card-title d-flex justify-content-between">
<div>
<b>{product.item.title}</b>
</div>
<CategoryNavigator
item={{
id: product.item.category.id,
title: product.item.category.title,
}}
/>
</h5>
<p className="card-text">
<b>{product.item.description}</b>
</p>
</div>
<div class="card-footer">
<div className="text-center text-color">
<p>
<span>
<h4>Price : ₹{product.item.price}</h4>
</span>
</p>
</div>
<div className="d-flex justify-content-between">
<Link
to={`/product/${product.item.id}/category/${product.item.category.id}`}
className="btn bg-color custom-bg-text"
>
Add to Cart
</Link>
<p class="text-color">
<b>
<i>Stock :</i> {product.item.quantity}
</b>
</p>
</div>
</div>
</div>
);
};
export default ProductCard;
From the past 4 days, I'm struggling to resolve this issue.
Please help me to fix this.
Thank You
You need to move <div className="col"> from home page to ProductCard as first element in return statement. Sample code at https://codesandbox.io/s/falling-thunder-swzukd
I'm currently making a website and am trying to put a picture within a column. On the left, there is some text. The website only displays a broken image:
This is my code so far:
import React from "react";
function Home() {
return (
<div className="home">
<div class="container">
<div class="row align-items-center mb-2">
<div class="col-lg-5 my-5">
<h1 class="font-weight-light ">Home</h1>
<p>redacted</p>
</div>
<div class="col-lg-7 my-5">
<img src="/Users/megan/meganwebsite/src/components/20220502_144614.jpg" alt="photo" class="rounded float-end img-fluid"/>
</div>
</div>
</div>
</div>
);
}
export default Home;
You can change with a way:
import image from './src/components/20220502_144614.jpg'
<img src={image} alt="photo" class="rounded float-end img-fluid"/>
I was able to use the map method to display my static data in each container. There's a Modal template I created in order to provide more object/values info but if I click the button it opens all the modals of each containers at the same time because Modal tag wasn't assigned with unique index number when I mapped through my static data. Big brothers, please look at my codes and teach me how I can open only one associated Modal.
I created function Modal (template) and import to function Projects
function Modal({closeModal}) {
return (
<div className="modal-main">
<div className='modal-card'>
<img src="" />
<div className='modal-info'>
<div className='modal-title'>
<p className="title">title</p>
</div>
<div className='modal-body'>
<p className="tech">tech</p>
<p className="description">description</p>
<p className="github">github</p>
<p className="website">website</p>
</div >
<Button>detail</Button>
<Button onClick={()=> closeModal(false)}>close</Button>
</div>
</div>
</div>
)
}
export default Modal
function Projects() {
const [openModal, setOpenModal] = useState(false);
const [oneProject, setOneProject]
= useState(list_of_projects)
return (
<div className="section-header text-center mt-5">
<h4>projects</h4>
<p>list of proejcts</p>
<div className="proj-container">
{oneProject.map((item, index)=> {
return(
<div className='proj-map mx-2 my-2'key={index} >
<button type='button' className="btn btn-link " onClick={() => setOpenModal(true)}>
<div className=" proj-card card">
<img className='proj-img' src={item.thumbnail} style={{ width:300, height:300 }}/>
<div className="proj-text card-text">
<h3 className='title'>{item.title}</h3>
<h5 className='description'>description</h5>
<br/>
<h4>+</h4>
</div>
</div>
</button>
{openModal && <**Modal** closeModal={setOpenModal} /> }
</div>
)
})}
</div>
</div>
I have a toggle example that I have done with Jquery before. Now I want to do it with react, but I don't know how.
I'm putting my Jquery code and React design code below.
React Design Code
Sidebar.js
`
import React from 'react';
import profileImage from '../../../assets/img/profil.jpg';
import iconImage from '../../../assets/img/icon.jpg';
import businessManImage from '../../../assets/img/business-man-white.svg';
import preferencessImage from '../../../assets/img/cogs-white.svg';
import logoutImage from '../../../assets/img/logout.svg';
import toggleImage from '../../../assets/img/toggle-icon.png';
import profileWhite from '../../../assets/img/profile-white.svg';
import classes from '../Sidebar/Sidebar.module.css';
const Sidebar = (props) => {
let url = ""
return (
<div>
<div className={classes['side-bar']}>
<div className={classes['side-bar-top']}>
<div className={classes['side-bar-icon']}>
<img src={iconImage} alt="profileresmi" />
</div>
</div>
<div className={classes['side-bar-row']} style={{height: '100px'}} >
<div className={classes['side-bar-icons']} style={{width: '100px'}} >
<div className={classes['side-bar-profile-image']}>
<img src={profileImage} alt="profileresmi" />
</div>
</div>
<div className={classes['side-bar-profile-content']}>
<h3><b>Mert EKİNCİ</b></h3>
<h4>mert#akturk.de</h4>
</div>
</div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={businessManImage} alt="profileresmi" />
</a>
</div>
<div className={classes['side-bar-text']}>
<a href={url}>Processes</a>
</div>
</div>
<div style={{ clear: 'both' }} ></div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={preferencessImage} alt="profileresmi" />
</a>
</div>
<div className={classes['side-bar-text']}>
<a href={url}>Preferences</a>
</div>
</div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={profileWhite} alt="profileresmi" />
</a>
</div>
<div className={classes['side-bar-text']}>
<a href={url}>User</a>
</div>
</div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={logoutImage} alt="profileresmi" />
</a>
</div>
<div className={classes['side-bar-text']}>
<a href={url}>Logout</a>
</div>
</div>
</div>
<div className={classes['side-toggle']}>
<span className={classes['side-bar-toggle']} >
<img src={toggleImage} alt="profileresmi" />
</span>
</div>
</div>
);
}
export default Sidebar;
`
Here I made the toggle by hiding and showing my divs.
Jquery Sidebar Toggle Code
Script.js
`
var isToggled = true;
var toggleDelay = 50;
var onclickSideToggle = function () {
isToggled = !isToggled;
toggleSidebar(isToggled);
};
$('#side-bar-toggle').on('click', onclickSideToggle);
var toggleSidebar = function (toggle) {
if (toggle) {
$('.side-bar-text').show(toggleDelay);
$('.side-bar-profile-content').show(toggleDelay);
} else {
$(".side-bar-text").hide(toggleDelay);
$('.side-bar-profile-content').hide(toggleDelay);
}
};
`
Can you give me some information on how to do it with React?
If you want just hide/show without any animation you can use the following approach.
More info about usage of useState hook you can find here: https://reactjs.org/docs/hooks-reference.html#usestate
import React, { useState } from 'react';
import profileImage from '../../../assets/img/profil.jpg';
import iconImage from '../../../assets/img/icon.jpg';
import businessManImage from '../../../assets/img/business-man-white.svg';
import preferencessImage from '../../../assets/img/cogs-white.svg';
import logoutImage from '../../../assets/img/logout.svg';
import toggleImage from '../../../assets/img/toggle-icon.png';
import profileWhite from '../../../assets/img/profile-white.svg';
import classes from '../Sidebar/Sidebar.module.css';
const Sidebar = props => {
const [isContentToggled, setIsContentToggled] = useState(true);
let url = ""
return (
<div>
<div className={classes['side-bar']}>
<div className={classes['side-bar-top']}>
<div className={classes['side-bar-icon']}>
<img src={iconImage} alt="profileresmi" />
</div>
</div>
<div className={classes['side-bar-row']} style={{height: '100px'}} >
<div className={classes['side-bar-icons']} style={{width: '100px'}} >
<div className={classes['side-bar-profile-image']}>
<img src={profileImage} alt="profileresmi" />
</div>
</div>
{isContentToggled && (
<div className={classes['side-bar-profile-content']}>
<h3><b>Mert EKİNCİ</b></h3>
<h4>mert#akturk.de</h4>
</div>
)};
</div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={businessManImage} alt="profileresmi" />
</a>
</div>
{isContentToggled && (
<div className={classes['side-bar-text']}>
<a href={url}>Processes</a>
</div>
)}
</div>
<div style={{ clear: 'both' }} ></div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={preferencessImage} alt="profileresmi" />
</a>
</div>
{isContentToggled && (
<div className={classes['side-bar-text']}>
<a href={url}>Preferences</a>
</div>
)}
</div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={profileWhite} alt="profileresmi" />
</a>
</div>
{isContentToggled && (
<div className={classes['side-bar-text']}>
<a href={url}>User</a>
</div>
)}
</div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={logoutImage} alt="profileresmi" />
</a>
</div>
{isContentToggled && (
<div className={classes['side-bar-text']}>
<a href={url}>Logout</a>
</div>
)}
</div>
</div>
<div className={classes['side-toggle']}>
<span onClick={() => setIsContentToggled(prevIsContentToggled => !prevIsContentToggled)} className={classes['side-bar-toggle']}>
<img src={toggleImage} alt="profileresmi" />
</span>
</div>
</div>
);
}
export default Sidebar;
If you want to toggle with the animation code will be almost the same.
You will need just to create some additional className like .hidden with styles for hidden elements and replace
{isContentToggled && (
<div className={classes['side-bar-profile-content']}>
<h3><b>Mert EKİNCİ</b></h3>
<h4>mert#akturk.de</h4>
</div>
)};
with adding/removing this className depending on the isContentToggled value.
I am implementing Materialize modal in react but it does not show anything. I separated the modal into component and the button that calls the modal in the parent container.
Here is my code:
Parent.js:
return (
<div>
<div>
<HelpForm />
</div>
<div className="container">
<ul className="collection">
{items.map(item =>
<a refs="modalTrigger" className="modal-trigger"
key={item.id}
data-target="#modal1">
<HelpFeedItem key={item.id} item={item} />
</a>
)}
</ul>
<HelpFeedModal />
</div>
</div>
);
Modal.js
render() {
return (
<div id="modal1" className="modal modal-fixed-footer">
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div className="modal-footer">
Agree
</div>
</div>
);
Is there something obvious that I am missing?
Thanks!
I got this to work by including jQuery in my project and then adding the suggested jQuery code at the top the render function in a component.
index.html:
<html>
<body>
//Any other html
<script src="jquery cdn of your choice"></script>
</body>
</html>
ModalComponent.js:
class Modal extends Component {
render() {
//You must use window.$ or $ will be undefined
window.$(document).ready(function() {
window.$('.modal').modal();
});
return (
<div>
//this is the trigger
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
//this is the modal
<div id='modal1' className='modal'>
<div className='modal-content'>
<h4>Modal Header</h4>
<p>Text in the modal body</p>
</div>
</div>
</div>
)
}
}
You need to use react-materialize in order to use Materialize's javascript components. https://github.com/react-materialize/react-materialize