I'm working with mapbox and my problem is that it doesn't shows me the map as should be.
If I load the component in render directly (example 1) it works and shows the map perfectly but if I load the component when change the state (example 2) doesn't shows me well.
render() {
return (
<div className="App">
<div className="NavBar">
<NavbarComponent parentNavbar={this.doParentNavbar} />
</div>
<div className="Map">
<MapComponent />
</div>
</div>
);
}
Example 2
render() {
return (
<div className="App">
<div className="NavBar">
<NavbarComponent parentNavbar={this.doParentNavbar} />
</div>
<div className="Map">
{
(this.state.nameMap) ? <MapComponent /> : null
}
</div>
</div>
);
}
CSS File:
.NavBar {
position: relative !important;
z-index: 9999 !important;
}
.Map {
position: absolute !important;
width: 100% !important;
height: 100% !important;
overflow: visible !important;
z-index: -9999 !important;
}
.mapboxgl-canvas {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
sorry, I'm so stupid....
In App.css I forgot this:
body {
height: 100vh;
margin: 0;
padding: 0;
font-family: sans-serif;
}
Related
I have been trying to find a workaround to overflow:hidden not applying to fixed elements, and I came across clip and clip-path. As clip is deprecated, I am trying to use clip-path to create the desired effect. I have successfully created the effect I am looking for in both Firefox and Safari, but the clip-path function does not appear to be working in Chrome.
I've included the current HTML and CSS below; the desired effect is for each title and subtitle to only be visible when their respective parent element is in view. If you are viewing on Firefox or Safari this should be working appropriately. However, if viewing on Chrome you should see that the clip-path function is not applying and therefore you can see both titles and subtitles at the same time when viewing the first parent element (the turquoise rectangle).
As you can see in the code, I am using clip-path: fill-box which works in both Firefox and Safari, but not Chrome. I've also tried inset(0), which still works in FF/Safari but it too fails in Chrome.
* {
padding: 0;
margin: 0;
border: none;
}
html {
background-color: black;
}
.info {
list-style-type: none;
margin-left: 13vw;
padding: 0;
overflow: hidden;
position: fixed;
color: white;
z-index: -1;
top: 80vh;
}
.container {
width: 100%;
height: 110vh;
}
.parent {
position: absolute;
width: 100%;
height: 110vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none;
clip-path: fill-box;
}
.parent_1 {
background-color: turquoise;
}
.parent_2 {
background-color: tomato;
}
.parent_3 {
background-color: purple;
}
.subchild {
position: fixed;
color: white;
width: 60vw;
left: 14vw;
}
.p1, .p3 {
top: 40vh;
}
.p2 {
top: 45vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link href="css/clip.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="container container_1">
<Div class="parent parent_1">
<Div class="child child_1">
<p class="subchild p1">
First Title
</p>
<p class="subchild p2">
First Subtitle
</p>
</Div>
</Div>
</section>
<section class="container container_2">
<Div class="parent parent_2">
<Div class="child child_2">
<p class="subchild p3">
Second Title
</p>
<p class="subchild p2">
Second Subtitle
</p>
</Div>
</Div>
</section>
</body>
</html>
I decided to play a little with Javascript. I've changed a little the HTML and the CSS. The subchilds are positioned top: 150px;.
function getY(element) {
var rect = element.getBoundingClientRect();
return rect.bottom;
}
let container1 = document.querySelector(".container_1");
let container2 = document.querySelector(".container_2");
let container3 = document.querySelector(".container_3");
let subchild1 = document.querySelector(".container_1 .subchild");
let subchild2 = document.querySelector(".container_2 .subchild");
let subchild3 = document.querySelector(".container_3 .subchild");
document.addEventListener('scroll', function() {
let bottom1 = getY(container1);
let bottom2 = getY(container2);
let bottom3 = getY(container3);
if ((bottom1 > 166) && (bottom2 > 166) && (bottom3 > 166)) {
subchild1.style.display = "block";
}
else {
subchild1.style.display = "none";
}
//
if ((bottom1 < 166) && (bottom2 > 166) && (bottom3 > 166)) {
subchild2.style.display = "block";
}
else {
subchild2.style.display = "none";
}
//
if ((bottom1 < 166) && (bottom2 < 166) && (bottom3 > 166)) {
subchild3.style.display = "block";
}
else {
subchild3.style.display = "none";
}
});
* {
padding: 0;
margin: 0;
border: none;
}
html {
background-color: black;
}
.info {
list-style-type: none;
margin-left: 13vw;
padding: 0;
overflow: hidden;
position: fixed;
color: white;
z-index: -1;
top: 80vh;
}
.container {
width: 100%;
height: 110vh;
}
.parent {
position: absolute;
width: 100%;
height: 110vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none;
}
.parent_1 {
background-color: turquoise;
}
.parent_2 {
background-color: tomato;
}
.parent_3 {
background-color: purple;
}
.subchild {
position: fixed;
color: white;
width: 60vw;
left: 14vw;
top: 150px;
}
.container_1 .subchild {
display: block;
}
.container_2 .subchild {
display: none;
}
.container_3 .subchild {
display: none;
}
<section class="container container_1">
<Div class="parent parent_1">
<Div class="child child_1">
<p class="subchild">
First Title
</p>
</Div>
</Div>
</section>
<section class="container container_2">
<Div class="parent parent_2">
<Div class="child child_2">
<p class="subchild">
Second Title
</p>
</Div>
</Div>
</section>
<section class="container container_3">
<Div class="parent parent_3">
<Div class="child child_3">
<p class="subchild">
Third Title
</p>
</Div>
</Div>
</section>
$(document).ready(function() {
$('.carousel').carousel();
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*:focus {
outline: 0;
}
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
background-color: #000000;
}
.carousel {
height: 700px;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.carousel .carousel-item {
cursor: -webkit-grab;
cursor: grab;
width: 400px;
}
.carousel .carousel-item:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.carousel .carousel-item img {
width: 100%;
}
.carousel .carousel-item h3 {
background-color: #ffffff;
color: #000000;
font-size: 2em;
font-weight: bold;
margin: -5px 0 0;
padding: 10px 5px;
text-align: center;
}
<div class="carousel">
<div class="carousel-item">
<img src="./img/gry1.png" alt="Dog" title="Dog" id="Dog">
</div>
<div class="carousel-item">
<img src="./img/img1.png" alt="Cat" title="Cat" id="Cat">
</div>
<div class="carousel-item">
<img src="./img/img1.png" alt="Wolf" title="Wolf" id="Wolf">
</div>
<div class="carousel-item">
<img src="./img/img1.png" alt="Tiger" title="Tiger" id="Tiger">
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js'></script><script src="./script.js"></script>
I'd like to change background for each item in my carousel, materialize adding "active" class for selected item in carousel but I cant figure out how to change bg (for whole page), I was trying to add background image to css for each item but it didnt cover whole page bg.
I think it will be good to solve it by jquery (check which item is "active" and select background for that item, adding it to body class)
The same script available on codepen:
https://codepen.io/crianbluff/details/PMZBVJ
You can do it like that.
I added the dummy data that contains image-url and I added carousel-item--* classes in HTML.
const setBackground = () => {
const number = document.querySelector('.carousel-item.active').classList[1].split('--')[1];
document.body.setAttribute('style', `background-image: url("${dummy[number]}")`);
}
in number variable, I am getting the carousel-item--* number and get the image-url of dummy data through index and add background-image through javascript
Codepen: https://codepen.io/NishargShah/pen/oNzwGwx?editors=1010
My site loads a background image with 100vh as the landing page. Right below out of initial view is the navbar and when the user scrolls down I wan't the navbar to stick to top of the page once it reaches the top. I'm using React.js with Bootstrap 4. Here is the Stackblitz as well as JS and SCSS below. I've put the sticky-top class on the nav element but it's not working, what might I be doing wrong?
This is the index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.scss';
class App extends Component {
render() {
return (
<div className='App'>
<section id='home' className='home'>
<div className='home__background'>
<div className='dark-overlay'>
<h1>Background Image using CSS</h1>
<div className='home__background__content'><h3>Text</h3><button>Go To About</button></div>
</div>
</div>
<nav className='navbar user-nav sticky-top'>
<div className='user-nav__links'>
<a href='#home' className='user-nav__links__link active'>
Home
</a>
<a href='#section2' className='user-nav__links__link'>
Section2
</a>
<a href='#section3' className='user-nav__links__link'>
Section3
</a>
<a href='#section4' className='user-nav__links__link'>
Section4
</a>
<a href='#section5' className='user-nav__links__link'>
Section5
</a>
</div>
</nav>
</section>
<section id='section2' className='section2'>
<p>section2</p>
</section>
<section id='section3' className='section3'>
<p>section3</p>
</section>
<section id='section4' className='section4'>
<p>section4</p>
</section>
<section id='section5' className='section5'>
<p>section5</p>
</section>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Here is the style.scss
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
font-size: 62.5%;
}
.home {
&__background {
height: 100vh;
//background-image: url('./img/bg1.jpg');
background-size: cover;
overflow: hidden;
&__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 30%;
}
}
}
.user-nav {
width: 100%;
background-color: black;
text-transform: uppercase;
padding: 2rem;
margin-right: 2rem;
a {
text-decoration: none;
}
&__links {
height: 100%;
&__link {
height: 100%;
font-size: 1.7rem;
color: white;
margin-right: 5rem;
line-height: 100%;
&:hover {
color: lightblue;
}
}
}
.active {
color: orange;
}
}
.section2 {
height: 400px;
}
.section3 {
height: 500px;
}
.section4 {
height: 400px;
}
.section5 {
height: 500px;
}
Solved! I took the navbar out of the section tag and put it after.
I want to have a spinner on the top layer of my application during an AJAX request. The spinner will disable the mouse interaction with the DOM. I have created the following codepen which resembles the issue I am running on. Jsx looks like this:
class App extends React.Component {
render() {
return (
<div>
<h1>Hello, React and ES6!</h1>
<p>Let's play. :)</p>
<OverLay />
</div>
);
}
}
const OverLay = ({loading}) => {
return (
<div className="load">
<div id="top">
Hello world!
</div>
</div>
)
}
ReactDOM.render(<App />, document.getElementById("app"));
And css:
.load {
opacity: 0.6;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background-color: #000;
z-index: 30;
pointer-events: none;
}
#top {
position: absolute;
left:50%;
top:50%;
z-index: 31;
opacity: 1;
}
Codepen
can I use the n variable inside a calc expression?
For example:
.child:nth-child(n) {
margin-left: calc(n * 46px);
}
My Code:
<div class="share-buttons">
<div class="share-button-main"></div>
<div class="share-button share-facebook">
<img src="facebook.png" alt="" />
</div>
<div class="share-button share-whatsapp">
<img src="whatsapp.png" alt="" />
</div>
<div class="share-button share-email">
<img src="email.png" alt="" />
</div>
<div class="share-button share-sms">
<img src="sms.png" alt="" />
</div>
</div>
CSS (Sass):
.share-buttons {
position: relative;
display: flex;
.share-button-main {
width: 46px;
height: 46px;
z-index: 2;
cursor: pointer;
content: url('share-menu-share-closed.png')
}
.share-button {
position: absolute;
top: 0;
left: 0;
width: 46px;
height: 46px;
z-index: 1;
transition: all .3s ease;
opacity: 0;
}
&.open {
.share-button-main {
content: url('share-menu-share-opened.png')
}
.share-button {
opacity: 1;
}
.share-facebook {
left: 56px;
}
.share-whatsapp {
left: 112px;
}
.share-email {
left: 168px;
}
.share-sms {
left: 224px;
}
}
img {
width: 46px;
height: 46px;
}
}
Javascript (JQuery):
$('.share-button-main').click(function() {
$('.share-buttons').toggleClass('open');
});
I'm basically trying to acheive a dynamic opening effect to the menu so if I add or remove elements it'll still work (and not like now when I set each div's left separately).
Not exactly what you may be after, but you can achieve a similar effect with scss if you know the number of elements. Just bear in mind that this will generate a lot of css:
#for $i from 1 through 7 {
&:nth-child(#{$i}) {
margin-left: calc(#{$i} * 46px);
}
}
No; you can't do that.
The counter feature can almost do that, except that it can't be used with calc() either.
You can't, as mentioned by #SLaks. But this can be solved by placing each next element inside the previous one.
See with divs:
div {
margin-left: 46px
}
<div>test
<div>test
<div>test
<div>test</div>
</div>
</div>
</div>
Or, use jQuery.
var margin=0;
$("div").each(function(){
$(this).css("margin-left",margin+=46)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>