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
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
I've got the following code. When the user hovers over the div, it should drop and stay that way until the user has hovered off of the div. When on the div, even if you move your mouse a bit, the hover action keeps firing.
html
<div class="whitelabelfeatures">
<div class="box1 requirements responsibilities">
<div class="responsibilitiesbox">
<div class="responsibility">
<div class="section1">
Pricing
</div>
<div class="section1a">
Pricing test
</div>
</div>
</div>
</div>
</div>
css
.box1.requirements.responsibilities {
height: 300px;
overflow: hidden;
}
.responsibility .section1 {
background-color: #c2bbb1;
height: 300px;
color: white;
font-weight: 700;
position: relative;
z-index: 2;
transition: all .3s ease;
}
.responsibility .section1:hover {
transform: translateY(300px);
}
.responsibility .section1a {
position: absolute;
z-index: 1;
top: 0;
}
codepen
https://codepen.io/jasonhoward64/pen/YzKNxVN
Thanks!
You can use javascript here. Please see below code.
var targetDiv = document.getElementsByClassName("section1")[0];
targetDiv.addEventListener('mouseenter', function(){
targetDiv.classList.add('section1mouseover');
});
var testDiv = document.getElementsByClassName("section1a")[0];
testDiv.addEventListener('mouseenter', function(){
targetDiv.classList.remove('section1mouseover');
});
.box1.requirements.responsibilities {
height: 300px;
overflow: hidden;
}
.responsibility .section1 {
background-color: #c2bbb1;
height: 300px;
color: white;
font-weight: 700;
position: relative;
z-index: 2;
transition: all .3s ease;
}
.section1mouseover {
transform: translateY(300px);
}
.responsibility .section1a {
position: absolute;
z-index: 1;
top: 0;
}
<div class="whitelabelfeatures">
<div class="box1 requirements responsibilities">
<div class="responsibilitiesbox">
<div class="responsibility">
<div class="section1">
Pricing
</div>
<div class="section1a">
Pricing test
</div>
</div>
</div>
</div>
</div>
The problem is that your :hover needs to be actuated higher in the DOM. With your current code, when you hover over the .section1 element, once the CSS transform takes place and translates the .section1 element vertically, the cursor is both "off" and "over" the transforming element, which causes the :hover to trigger on and off in response.
So in your codepen, on line 17, change your hover to the parent element and it should work.
Instead of:
.responsibility .section1:hover, try .responsibility:hover .section1
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;
}
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>