I'm trying to replicate http://www.milkbardigital.com.au/ as a learning project in react.
Currently I'm struggling to get the PNG image over the top of the background image.
Here's my code,
import React from 'react';
import {Image} from 'react-bootstrap';
export default React.createClass ( {
render() {
var background = {backgroundSize : 'cover'};
var textStyle = {
position: 'absolute',
top: '50%',
left: '50%'
};
return (
<div style={{width: 'auto'}}>
<Image
style={background} responsive
src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Home-Background.jpg">
</Image>
<h1 style={textStyle}>Agile Media Content</h1>
</div>
);
}
});
<Image src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Digital-Media.png" responsive/>
This "Image src" I've tried to place inside the above code but it won't work.
Anyone able to work this out?
It's with React Bootstrap!
Thanks,
Edit - - -
I've worked out how to get it slightly on top, now trying to get it put in the right position.
This is the code, ignore the opacity part,
/**
* Created by Hewlbern on 21-Jan-17.
*/
import React from 'react';
import {Image} from 'react-bootstrap';
export default React.createClass ( {
render() {
var background = {backgroundSize : 'cover',
opacity: '0.5',
};
var textStyle = {
position: 'absolute',
top: '50%',
left: '50%'
};
var ontop = {
display: 'block',
margin: 'auto',
width: '50%',
};
return (
<div style={{width: 'auto'}}>
<Image
style={background} responsive
src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Home-Background.jpg">
</Image>
<h1 style={textStyle}>Agile Media Content</h1>
<Image style={textStyle} responsive src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Digital-Media.png" />
</div>
);
}
});
Related
New to coding, trying to get a modal to work. It is not opening the way I expected it to.
The component is currently loaded within the footer div of my site. And when the button is toggled it simply hides or shows a div within the footer. I want it to appear in the centre of the webpage as a modal.
import React, {useState} from 'react';
import './policy.css'
export default function Policy() {
const [modal, setModal] = useState(false);
const toggleModal = () => {
setModal(!modal);
};
if(modal) {
document.body.classList.add('active-modal')
} else {
document.body.classList.remove('active-modal')
}
return (
<>
<div>
<button onClick={toggleModal} className='btn-modal'>
<p>Privacy Policy</p>
</button>
</div>
{modal && (
<div className="modal">
<div onClick={toggleModal} className="overlay"></div>
<div className="modal-content">
<h2>Privacy Policy</h2>
<p>This is the privacy policy</p>
<button className='close-modal' onClick={toggleModal}>Close</button>
</div>
</div>
)}
</>
);
}
The simplest way to achieve a modal effect is to use some CSS.
You could try a very crude style like (from MUI Modal docs):
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "lightgrey",
border: "2px solid #000",
boxShadow: 24,
padding: 4,
};
Then apply it to your modal:
<div className="modal" style={style}>
Im trying to make my modal (react-modal node package) scrollable (There is an img inside)
here is my code:
content: {
position: 'absolute',
backgroundColor: '#FFF',
padding: '15px',
zIndex: '1000',
width: '90%',
borderRadius: '.5em',
},
overlay: {
position: 'fixed',
display: 'flex',
justifyContent: 'center',
top: '0',
left: '0',
width: '100%',
height: '100%',
backgroundColor: 'rgba(0,0,0, .8)',
zIndex: '1000',
overflowY: 'auto',
},
}
Modal.setAppElement('#__next')
export const langContext = React.createContext()
export default function Home() {
const [isEn, setIsEn] = useState(true)
const [modalIsOpen, setIsOpen] = useState(false)
const { width } = useWindowDimensions()
function openModal() {
setIsOpen(true)
}
function closeModal() {
setIsOpen(false)
}
function updateLang() {
setIsEn((isEn) => !isEn)
}
return (
<langContext.Provider value={{ isEn, updateLang }}>
<div id="modal" className="overflow-hidden relative">
<Header />
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
style={customStyles}>
<div className="relative m-h-[1000px] h-full w-full overflow-y-scroll">
{isEn ? (
<Image
layout="fill"
objectFit={width >= 750 ? 'fill' : ' cover'}
quality={100}
src={
width >= 750 ? '/assets/menu-en.png' : '/assets/Menu_en_m.png'
}
alt="Menu"
/>
) : (
<Image
layout="fill"
objectFit={width >= 750 ? 'fill' : ' cover'}
quality={100}
src={
width >= 750 ? '/assets/menu-he.png' : '/assets/Menu_he_m.png'
}
alt="Menu"
/>
)}
</div>
</Modal>
</div>
</langContext.Provider>
)
}
Any ideas on how can I do it? (I'm trying to play with the overflow and position element but I can't find the proper solution
The scrolling suppose to happen on Mobile and the Image dimensions are: 550*1550 (I can resize it if necessary)
Right now the image is cut
Thanks for the helpers!
I think your modal is good in terms of vertical scrolling, but the problem has may come from this line
objectFit={width >= 750 ? 'fill' : 'cover'}
Your mobile dimension is 500*1550 which means the image will take object-fit:cover;
You can check object-fit:cover; definition here
The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
If you already check the dimension to load the device-respective image, you can remove the condition to check for cover.
object-fit:fill is sufficient for your case
The change can be
objectFit="fill"
Another potential problem I can see here that you have layout="fill" for that image which will make it absolute. The image container has relative which restricts the original size of your image.
To fix it, you may need to remove relative from the image container too.
I am trying to make a different button position for both portrait and landscape versions of the React application I’m working on. I tried learning about event listeners and referred to these two posts, and inspected the console for a message while trying to rotate using an iPhoneX view on Google Chrome. However, I don’t seem to see a message of 'changed orientation'. Does anyone know the problem with my code? Feel free to ask for more clarification.
Welcome.js
import React, { Component} from "react";
import { Link } from "react-router-dom";
import "../style/App.css";
import { Typography, Button, Card, Grid } from "#material-ui/core";
import homepage2 from "../images/homepage2.png";
export default class WelcomeComponent extends Component {
onOrientationChange = (event) => {
console.log('changed orientation');
}
render() {
return (
<div onOrientationChange={this.onOrientationChange}
style={{
minHeight: "100vh",
backgroundImage: `url(${homepage2})`,
backgroundPosition: "center",
backgroundSize: "cover"
}}
>
<div
style={{
textAlign: "center",
verticalAlign: "bottom",
bottom: "0px"
}}
>
<Link to="/Language">
<Button
variant="contained"
color="secondary"
size="large"
style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%,-50%)"
}}
>
CONTINUE
</Button>
</Link>
</div>
</div>
);
}
}
For some reason none of the questions or online videos online is helping me solve my issue. This is my code below and its still displaying my page without an image. If anyone can help me see whats wrong that would be great.
import { Image, Text } from 'react-native';
import React, { Component } from 'react';
class BackgroundImage {
render() {
return (
<Image source={require('../../images/showcase.jpg')} style=
{styles.backgroundImage}>
{this.props.children}
</Image>
);
}
}
class TestBackgroundImage extends Component {
render() {
return (
<BackgroundImage>
<Text style={styles.text}>Fullscreen!</Text>
</BackgroundImage>
);
}
}
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
width: 50,
height: 50,
resizeMode: 'cover'
},
text: {
textAlign: 'center',
color: 'white',
backgroundColor: 'rgba(0,0,0,0)',
fontSize: 32
}
});
const Home = () => (
<div>
<h2>Home page</h2>
</div>
);
export default Home;
This might be because you are setting width and height null. height and width must have value, otherwise image doesn't shows. Please try to assign value of height and width e.g.
backgroundImage: {
flex: 1,
width: 50,
height: 50,
resizeMode: 'cover'
},
Have you tried to import the Image component in BackGroundImage and BackGroundImage in TestBackgroundImage?
// In BackGroundImage.js
import Image from 'path';
// In TestBackgroundImage.js
import BackGroundImage from 'path';
and I think, you want to show all components in Home component.
so
//import all components in Home.js
const Home = ()=> {
return {
<BackgroundImage/>
<TestBackgroundImage/>
}
}
Instead of using image use ImageBackGround directly
class BackgroundImage {
render() {
return (
<ImageBackground source={require('../../images/showcase.jpg')} style=
{styles.backgroundImage}>
{this.props.children}
</ImageBackground>
);
}
}
I'm discovering ReactJS, trying some stuff but i face a problem: my body height is fixed to 76px and i can't do anything to that, i tried a lot a stuff, nothing worked.
Here's the code i'm using
import * as React from 'react';
// This fonction make the color change on the button on the first click
function ChangeStyle() {
var elem = document.getElementById('Button1');
if (elem == null) {
return;
}
elem.style.background = '#ff4848';
}
// Main Class
export class Button extends React.Component {
render() {
// Style sheet of the Button
var buttonStyle = {
fontSize: 50,
background: '#ffb516',
color : '#FFFFFF',
width: 500,
border: 'none',
textAlign: 'center',
display: 'block',
margin: 'auto'
};
// Set the Background color
document.body.style.backgroundColor = '#25353f';
document.body.style.position = 'relative';
document.body.style.height = '100%';
// Try to make the button in center
/*
var centerDiv = {
position: 'absolute' as 'absolute',
top: '50%',
left: '30%',
margin: 'auto'
}
*/
// Test on linearGradient
/*
function degraded() {
<svg width='15' height='71' fill='url(#Gradient-1)'>
<defs>
<linearGradient id='Gradient-1' x2='0%' y2='100%'>
<stop offset='0%' stop-color='#25353f'/>
<stop offset='100%' stop-color='#5b6c72'/>
</linearGradient>
</defs>
</svg>
}
*/
// Create the button
return (
<div id="fullHeight" style={{height: '100%'}}>
<div /*style={centerDiv}*/>
<button
id="Button1"
style={buttonStyle}
onClick={() => ChangeStyle()}
>
Pushtalents
</button>
</div>
</div>
);
}
}
export default Button;
Any idea why? And how to fix this problem?
Maybe it helps if you remove position: relative; from body. It doesn't do anything anyways. Other than that you can try to set the body height to 100vh.