I am really new to React, and I have code set up like below, I want to click the button and make the content disappear.Wish someone could help me with this. I tried use state, but I did not get the results I want, I also tried https://jsfiddle.net/uwadhwnr/ not work. I am really frustrating right now.
<div id="content" style="height:1000px">
<script type="text/jsx">
var styles = {
container: {
height: '100vh',
width: '100%',
backgroundColor: 'blue',
},
title: {
textAlign: 'center',
},
modal: {
display: 'block',
position: 'fixed',
zIndex: '1',
paddingTop: '100px',
left: '0',
top: '0',
width: '100vw',
height: '100vh',
overflow: 'auto',
backgroundColor: 'rgb(0,0,0)',
backgroundColor: 'rgba(0,0,0,0.4)',
},
modalContent: {
position: 'relative',
backgroundColor: '#fefefe',
margin: 'auto',
padding: '0',
border: '1px solid #888',
width: '80vw',
},
modalHeader: {
padding: '2px 16px',
backgroundColor: '#5cb85c',
color: 'white',
},
modalBody: {padding: '2px 16px'},
modalFooter: {
padding: '2px 16px',
backgroundColor: '#5cb85c',
color: 'white',
},
upload: {
position: 'absolute',
right: '5%',
top: '5%',
},
};
var PopUp = React.createClass({
render: function() {
return (
<div>
<i className="fa fa-plus-circle fa-3x" aria-hidden="true" style={styles.upload} onClick={this.handleClick}></i>
<div id="myModal" className="modal" style={styles.modal}>
<div className="modal-content" style={styles.modalContent}>
<div className="modal-header" style={styles.modalHeader}>
<h2>Modal Header</h2>
</div>
<div classN="modal-body" style={styles.modalBody}>
<p>Some text aa the Modal Body</p>
<p>Some other text...</p>
</div>
<div className="modal-footer" style={styles.modalFooter}>
<h3>Modal Footer</h3>
</div>
</div>
</div>
</div>
);
}
});
var FilterableProductTable = React.createClass({
render: function() {
return (
<div>
<PopUp />
</div>
);
}
});
React.render(
<FilterableProductTable />,
document.getElementById('content'));
</script>
What's the difficult in that?
Just setup a CSS class with this property:
display: none
and switch the class by setting a new state on button click.
Here's an example: https://jsfiddle.net/8aoue71m/
Related
I have an editor and several buttons above it on the right. I would like to have a panel just under Button2 that overlays the editor. Then, clicking on Button2 will expand and collapse the panel (which will be easy to implement).
I have written the following code: https://codesandbox.io/s/fervent-mclaren-3mrtyj?file=/src/App.js. At the moment, the panel is NOT under Button2 and does NOT overlay the editor.
Does anyone know how to amend the CSS?
import React from "react";
import { Stack } from "#fluentui/react";
export default class App extends React.Component {
render() {
return (
<div>
<Stack horizontal horizontalAlign="space-between">
<div>Title</div>
<div>Button1 Button2 Button3</div>
</Stack>
<div
style={{
backgroundColor: "yellow",
width: "350px",
height: "50px"
}}
>
A floating panel which is supposed to be always under "Button2" and
overlays the editor.
</div>
<div
style={{
backgroundColor: "gray",
width: "100%",
height: "300px"
}}
>
An editor
</div>
</div>
);
}
}
You need to use position:absolute on floating pane and add it in the editor div which will have position:relative.You can see the result it works fine
On clicking button 2 the floating panel hides/shows alternatively
This will work.
var btn=document.querySelector('.drop_btn');
btn.onclick=function()
{
document.querySelector('.dropdown').classList.toggle('block');
}
*
{
font-family: 'arial';
margin: 0px;
padding: 0px;
}
.menu_pane
{
display: flex;
background: #151515;
color: white;
padding:5px 10px;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.menu_pane h3
{
font-weight: normal;
font-size: 18px;
flex-grow: 1;
}
.menu_pane .btn button
{
position: relative;
background: #0971F1;
color: white;
border-radius: 5px;
border:none;
cursor: pointer;
padding: 8px 20px;
margin-right: 10px;
}
.dropdown
{
display: none;
height: 100%;
width: 100%;
top: 0;
left: 0;
color: white !important;
position: absolute;
background: #242424;
border-radius: 0 0 10px 10px;
}
.menu_pane .btn .dropdown p
{
font-size: 14px;
}
.editor_pane
{
position: relative;
background:#151515;
color: white;
min-height: 50vh;
border-radius: 0 0 10px 10px;
padding: 10px;
color: #512DA8;
}
.block
{
display: block;
}
<div class="container">
<div class="menu_pane">
<h3>Title</h3>
<div class="btn">
<button>Button-1</button>
</div>
<div class="btn">
<button class="drop_btn">Button-2</button>
</div>
<div class="btn">
<button>Button-3</button>
</div>
</div>
<div class="editor_pane">
<p>An editor</p>
<div class="dropdown">
<p>A floating panel which is supposed to be always under "Button2" and overlays the editor.</p>
</div>
</div>
</div>
How does this look?
https://codesandbox.io/s/hidden-platform-q3v4kc?file=/src/App.js
I moved the floating pane into the button, made the button position relative, and made the floating pane position absolute.
Note: notice there's no top property on the floating pane. One neat thing about position absolute is if you don't set top, left, bottom, right those positions will be where that box would be if it wasn't position absolute.
Update
I noticed that the overlay needed to cover the "editor" area only and have the example updated with hopefully the right placement of it.
Updated live example: codesandbox
import React from "react";
import { Stack } from "#fluentui/react";
export default class App extends React.Component {
state = { showOverlay: true };
handleToggle = () =>
this.setState((prev) => ({ showOverlay: !prev.showOverlay }));
render() {
return (
<div>
<Stack
horizontal
horizontalAlign="space-between"
style={{ padding: "12px" }}
>
<div>Title</div>
<Stack horizontal>
<button>Button1</button>
<button onClick={this.handleToggle}>
{`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
</button>
<button>Button3</button>
</Stack>
</Stack>
<div
style={{
backgroundColor: "gray",
width: "100%",
height: "300px",
position: "relative"
}}
>
An editor
<div
style={{
position: "absolute",
inset: "0",
backgroundColor: "rgba(0, 0, 0, 0.70)",
display: this.state.showOverlay ? "flex" : "none",
justifyContent: "center",
alignItems: "center",
color: "#fff"
}}
>
A floating panel which is supposed to be always under "Button2" and
overlays the editor.
</div>
</div>
</div>
);
}
}
Keeping the original example (it had overlay on the whole component except for "Button 2") just in case if it might be useful.
Original
Not sure if I fully understand the desired result, but here is the component implemented with a toggle overlay controlled by Button2.
The overlay is currently set on top of and blocking all child elements except for Button2, so that it works as a "start editing" button, but it can be further adjusted to specify which element it covers to better suit the use case.
Quick demo of the example: codesandbox
import React from "react";
import { Stack } from "#fluentui/react";
export default class App extends React.Component {
state = { showOverlay: true };
handleToggle = () =>
this.setState((prev) => ({ showOverlay: !prev.showOverlay }));
render() {
return (
<div style={{ position: "relative", zIndex: "1" }}>
<Stack
horizontal
horizontalAlign="space-between"
style={{ padding: "12px" }}
>
<div>Title</div>
<Stack horizontal>
<button>Button1</button>
<button style={{ zIndex: "75" }} onClick={this.handleToggle}>
{`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
</button>
<button>Button3</button>
</Stack>
</Stack>
<div
style={{
position: "absolute",
inset: "0",
backgroundColor: "rgba(0, 0, 0, 0.70)",
zIndex: "50",
display: this.state.showOverlay ? "flex" : "none",
justifyContent: "center",
alignItems: "center",
color: "#fff",
}}
>
A floating panel which is supposed to be always under "Button2" and
overlays the editor.
</div>
<div
style={{
backgroundColor: "gray",
width: "100%",
height: "300px",
}}
>
An editor
</div>
</div>
);
}
}
When I vertically scroll the moving div, some of the content freezes. I'm wondering how I would fix this. It isn't consistent either, as clicking the start/stop button sometimes fixes the issue for a few seconds. Very confused.
import { useEffect, useRef, useState } from "https://cdn.skypack.dev/react"
import ReactDOM from "https://cdn.skypack.dev/react-dom"
const Graph = ({ references: { trackerRef, wholeRef } }) => {
return (
<div
ref={wholeRef}
style={{
overflow: 'scroll',
height: '400px',
backgroundColor: '#333',
cursor: 'default',
userSelect: 'none'
}}
>
<div style={{ position: 'relative' }}>
<div>
{(() => {
const items = []
for (let i = 1; i < 100; i++) {
items.push(
<div
key={i}
style={{
position: 'absolute',
left: i * 1000,
height: '100%',
display: 'flex',
}}
>
<div
style={{
width: '1px',
backgroundColor: '#888',
}}
></div>
<div style={{ color: '#ddd', marginLeft: 8, fontSize: 14 }}>
{i}s
</div>
</div>
)
}
return items
})()}
{(() => {
const items = []
for (let i = 1; i < 1000; i++) {
if ((i * 100) % 1000 === 0) continue
items.push(
<div
key={i}
style={{
position: 'absolute',
left: i * 100,
height: '100%',
display: 'flex',
}}
>
<div
style={{
width: '1px',
backgroundColor: '#555',
}}
></div>
<div style={{ color: '#aaa', marginLeft: 5, fontSize: 10 }}>
{i * 100}ms
</div>
</div>
)
}
return items
})()}
<div
ref={trackerRef}
style={{
position: 'absolute',
height: '100%',
display: 'flex',
width: '1px',
backgroundColor: 'lightgreen',
}}
></div>
</div>
<div>
<div style={{ height: '2000px', width: '20px' }}></div>
</div>
</div>
</div>
)
}
const App = () => {
const trackerRef = useRef(null)
const wholeRef = useRef(null)
const [paused, setPaused] = useState(false)
const animationFrames = useRef([]).current
const intervals = useRef([]).current
const time = useRef(0)
useEffect(() => {
// Increase time when unpaused
intervals.push(setInterval(() => !paused && (time.current += 1), 1))
}, [paused])
useEffect(() => {
const refreshTrackbar = () => {
if (trackerRef.current && wholeRef.current && !paused) {
trackerRef.current.style.left = time.current + 'px'
wholeRef.current.scrollLeft = time.current - 100
requestAnimationFrame(refreshTrackbar)
}
}
animationFrames.push(requestAnimationFrame(refreshTrackbar))
}, [paused])
return (
<>
<h1>Scrollbug</h1>
<button
onClick={() => {
if (paused) {
setPaused(false)
} else {
setPaused(true)
animationFrames.forEach(frame => cancelAnimationFrame(frame))
intervals.forEach(interval => clearInterval(interval))
}
}}
>
{paused ? 'Start' : 'Stop'}
</button>
<br />
<br />
<Graph references={{ trackerRef, wholeRef }} />
</>
)
}
ReactDOM.render(<App />, document.getElementById("root"))
Here is a codepen to test the issue yourself
https://codepen.io/springer268/pen/PomjVvw
EDIT: So I tried this codepen on my mac, and the bug does not happen, which leads me to believe this is a Chrome version/platform specific issue, and not a me issue.
I'm not really sure how to make it stop freezing, but if you added an overflow:scroll; to your #root with a bigger height than your side-way scrolling div, you could scroll over it without freezing.
Making the side-way scrolling div a specific height and overflow-y: hidden; could help as well.
Kind of a workaround, but it works.
I'm trying to implement google AMP to the project but I keep getting error messages related to tags errors, I'm using Next.js for frontend and Laravel for backend
This is my code in Next.js
export const config = { amp: true }
const useStyles = makeStyles(() => ({
container: {
maxWidth: 1120,
margin: '0 auto',
padding: '0 4vw'
},
content: {
margin: '0 auto'
},
postFeatureImage: {
'&>img': {
margin: '0 0 3vw',
width: '100%',
objectFit: 'contain',
overflow: 'hidden',
height: '100%'
}
},
postFullContent: {
maxwidth: 720,
margin: '0 auto',
background: '#fff',
fontFamily: "'tahoma'",
},
contentTitle: {
margin: '0 0 0.8em'
/* font-size: 5rem; */
},
contentBody: {
display: 'flex',
flexDirection: 'column',
fontFamily: `var(--font-serif)`,
'&> .kg-card.kg-image-card': {
// width: '100%',
justifyContent: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
'&>img': {
maxWidth: '80%'
}
},
}
}))
const Blog = ({ data }) => {
if (router.isFallback) {
return <div>Loading...</div>
}
const post = data && data.posts[0]
return (
<headers>
<SEO
title={post.meta_title}
image={post.feature_image}
url={`https://automart.ph/blog/${post.slug}`}
description={post.meta_description}
/>
<div className={classes.container}>
<article className={classes.content}>
{post.feature_image ?
<figure className={classes.postFeatureImage}>
<img className={classes.featureImage} src={post.feature_image} alt={post.title} />
</figure> : null}
<section className={classes.postFullContent}>
<h1 className={classes.contentTitle}>{post.title}</h1>
{/* The main post content */}
<section
className={classes.contentBody + ' load-external-scripts'}
dangerouslySetInnerHTML={{ __html: post.html }}
/>
</section>
</article>
</div>
</headers>
)
}
export default Blog
But I'm getting these errors in the console:
How can I solve this? P.S I don't have these tags mentioned in the error in the code above.
hello i'm trying to put a boxshadow in my header, but for some reason my carousel is not letting my shadow box even appear in the div:
without my caroussel component:
code:
export default function App() {
var settings = {
dots: true,
arrows: false,
autoplay: true,
draggable: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div className="App">
<div
style={{
width: "100%",
position: "relative",
height: "auto",
position: "relative",
boxShadow: " 3px 3px 3px #000",
background: "green"
}}
>
header
</div>
<Slider {...settings}>
<div>
<div style={{ background: "blue", height: "200px", width: "100%" }}>
testing
</div>
</div>
</Slider>
</div>
);
}
example:
https://codesandbox.io/s/flamboyant-allen-nr3t0
I am trying to layer two containers on top of one another, but instead it is being placed in a column
I have looked into z-index and layering, but it does not seem to be working.
My code:
class App extends Component {
render() {
let bigContainer = {
height: '30vh',
}
let containerOne = {
height:'100%',
zIndex:1,
position: 'relative'
}
let containerTwo = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 100,
height: '100%',
position: 'relative'
}
let innerStyleOne = {
backgroundColor: 'black',
height: '15vh',
position: 'relative',
order: '2',
width: '100%'
}
let innerStyleTwo = {
backgroundColor: 'blue',
height: '15vh',
position: 'relative',
order: '2',
width: '100%'
}
let innerStyleLayer = {
backgroundColor: 'green',
position: 'relative',
height: '25px',
width: '25px'
}
return (
<div className="App" style={bigContainer}>
<div style = {containerOne}>
<div style={innerStyleOne}> </div>
<div style={innerStyleTwo}> </div>
</div>
<div style = {containerTwo}>
<div style={innerStyleLayer}></div>
</div>
</div>
);
}
}
This is the result I'm getting
but i am trying to get the green square in the middle of the blue and black bars
Edit: after changing container2 to position:absolute
using
position: relative for bigContainer and
position: absolute for containerTwo.