I've the following example below. When you click the yellow box, an overlay will be shown and it works fine. But when i then scroll down it ofc stays because it has a position fixed.
How can i make sure the overlay stay ontop of the .div when i scroll, aka so it "don't move"?
$('.modal').css("top", $(".div").offset().top).css("left", $(".div").offset().left).css("width", $(".div").css("width")).css("height", $(".div").css("height"));
$(".div").click(function() {
$('.modal').addClass("loading");
})
.div {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 300px;
background-color: yellow;
content: "";
}
body {
height: 500px;
background-color:black;
}
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
.modal.loading {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
<div class="modal"></div>
Change your position to absolute.
.modal {
display: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
Change the fixed position of the modal with a absolute position , place the .modal in the .div
$(".div").click(function() {
$('.modal').addClass("loading");
})
.div {
margin: 100px auto 0;
height: 300px;
width: 300px;
background-color: yellow;
position: relative;
}
body {
height: 500px;
background-color: black;
}
.modal {
display: none;
position: absolute;
top:0;
left:0;
z-index: 2;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
.modal.loading {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
.div content
<div class="modal"></div>
</div>
I think you want something like this, tell if i'm doing something wrong.
First you need to change position: fixed; with position: absolute; in modal class.
Then put modal class div into class div like this
<div class="div">
<div class="modal"></div>
</div>
check snippet for running in action
$(".div").click(function() {
$('.modal').addClass("loading");
})
.div {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 300px;
background-color: yellow;
position: relative;
}
body {
height: 500px;
background-color: black;
}
.modal {
display: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
.modal.loading {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="modal"></div>
</div>
Related
JSFiddle link
z-index cannot be set to -1, positioning cannot be changed for first and second div.
* {
box-sizing: border-box;
}
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
.first {
position: absolute;
left: 0;
top: 0;
z-index: 0;
height: 100px;
width: 120px;
background-color: blue;
}
<div class="first"></div>
<div class="second"></div>
Apply a transformation (without visible effects) on the second div e.g.
transform: scale(1);
https://jsfiddle.net/cbeaw84h/
Position your second div:
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
position: relative; // This
}
You should use position: relative and they'll overlay.
.second {
position: relative;
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
If you cannot touch the CSS code really, simply nest the second div inside the first.
* {
box-sizing: border-box;
}
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
.first {
position: absolute;
left: 0;
top: 0;
z-index: 0;
height: 100px;
width: 120px;
background-color: blue;
}
<div class="first">
<div class="second"></div>
</div>
I have a transparent header which can't be a image or a color, it needs to be transparent. Whenever some divs slides under my header I want to hide only the part which is below it.
Problem
body {
margin: 0;
width: 100%;
background-color: yellow;
height: 100vh;
}
.header {
height: 5rem;
top: 0;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.content {
margin-top: 25rem;
height: 200px;
background-color: blue;
color: white;
}
.footer {
margin-top: 30rem;
height: 5rem;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
<div class="header"> Header</div>
<div class="content"> DONT SHOW THIS DIV UNDER HEADER</div>
<div class="footer">footer</div>
Actually you can achieve this without javascript at all. You can put element "under" the .header with body's background, and set the proper z-index in order to keep it under.
Something like that:
body {
margin: 0;
width: 100%;
background-color: yellow;
height: 100vh;
}
.header {
height: 5rem;
top: 0;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 3;
}
.content {
margin-top: 25rem;
height: 200px;
background-color: blue;
color: white;
z-index: 1;
}
.footer {
margin-top: 30rem;
height: 5rem;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
/* this will act as a mask to hide the content when it get "under" the header: */
#contentMask {background: inherit; z-index: 2; position: fixed; top: 0; left: 0; height: 5em; width: 100%;}
<div class="header"> Header</div>
<div class="content"> DONT SHOW THIS DIV UNDER HEADER</div>
<div id="contentMask"></div>
<div class="footer">footer</div>
Edit (as for comment):
You can play with z-index property in order to achieve it. This is a general example:
body {
margin: 0;
width: 100%;
background-color: yellow;
height: 100vh;
}
.header {
height: 5rem;
top: 0;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 4;
}
#contentMask {
background: inherit;
position: fixed;
top: 0;
left: 0;
height: 5em;
width: 100%;
z-index: 2;
}
.content {
position: relative;
margin-top: 25rem;
height: 200px;
background-color: blue;
color: white;
z-index: 1;
}
.under { z-index: 3; }
.above { z-index: 5; }
.footer {
margin-top: 30rem;
height: 5rem;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
<div class="header"> Header</div>
<div id="contentMask"></div>
<div class="content"> DONT SHOW THIS DIV UNDER HEADER</div>
<div class="content under"> SHOW THIS DIV UNDER HEADER</div>
<div class="content above"> SHOW THIS DIV ABOVE HEADER</div>
<div class="footer">footer</div>
I think this will be a problem really difficult to solve...
I created a speedometer that shows number of earthquakes occured in my city.
I want to animate this speedometer in two way:
background-color (green when there aren't quakes and red when there are 3000 quakes) and width of this colored div (the div where i animate background-color).
So the width will be 0 when there aren't quakes and will be 100% when there are 3000 quakes.
The animation is 2 seconds, so for example if i have 1500 quakes:
Add the class for animate speedometer
$('#first').addClass('first-start');
And using setTimeout i add a class to stop the animation after 1 second
setTimeout(function() {
$('#first').addClass('first-pause');
}, 1000);
This code almost always works great.
Now i add a snippet:
$('#first').addClass('first-start');
setTimeout(function() {
$('#first').addClass('first-pause');
}, 1000);
#page {
margin-top: 50px;
width: 300px;
height: 300px;
background-color: #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 4;
overflow: hidden;
}
#box-first{
width: 200px;
height: 100px;
background-color: #fff;
border-radius: 200px 200px 0 0;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-start;
z-index: 3;
overflow: hidden;
}
#first{
border-radius: 200px 200px 0 0;
margin: 0;
background: red;
width: 200px;
height: 100px;
transform: rotate(180deg);
transform-origin: 50% 100%;
position: absolute;
top: 0px;
right: 0px;
border: 0;
z-index: 1;
}
#n1{
font-size: 20px;
color: #fff;
font-weight: bold;
position: absolute;
left: 50px;
right: 0;
text-align: center;
top: 50px;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100px;
height: 50px;
background: #000;
border-radius: 100px 100px 0 0;
z-Index: 1;
overflow: hidden;
}
#keyframes first {
0% {
background-color: green;
transform: rotate(180deg);
}
33% {
background-color: yellow;
transform: rotate(240deg);
}
66% {
background-color: orange;
transform: rotate(300deg);
}
100% {
background-color: red;
transform: rotate(360deg);
}
}
.first-start {
animation: first 2s linear;
}
.first-pause {
animation-play-state: paused;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<div id="box-first">
<div id="first">
</div>
<div id="n1">
1500
</div>
</div>
</div>
https://jsfiddle.net/hoymds97/
The problem is that i use this code in a big file (4000 lines) with a lot of events and in the same function there are 8 speedometers.
I noticed that sometimes (when there are more events) setTimeout not start immediately after added class for animate speedometer.
As a result, the animation will stop after ...
In our case, for example, it is as if it blocked after 1700 milliseconds and not 1000 seconds. Sometimes it stops even after 2 seconds.
I think the problem is the many events in the queue.
So how can i solve this problem ?
Is possible to solve using always setTimeout or without it?
I hope you can help me and sorry for my english.
Here is a complete new idea that relies on transition instead of animation and where you can easily adjust the state without synchronization issue.
The main trick is to use a gradient for the background coloration and adjust its position in order to have the needed color.
Here is a simple code to illustrate the coloration:
.box {
background: linear-gradient(to right, green, yellow, orange, red);
background-size: 2000% 100%;
transition:1s;
background-repeat: no-repeat;
background-position: 0 0;
height: 200px;
}
.box:hover {
background-position: 100% 0;
}
<div class="box">
</div>
As you can see, I defined a gradient with the 4 colors and we simply need to adjust the background-size in order to have the coloration (0% for green and 100% for red). This won't be exactly the same visually because we will not have a solid color like with animation and for this reason I made the background-size big enough to create the illusion of a solid color.
Now, we simply need to find the values of the background-position and the degree which is pretty easy. The backround-position is a value between 0% and 100% and the degree is a value between 180deg and 360deg. For the state 50% we will logically use 50% for the background-position and 270deg for the transformation and for an x% state we will use respectively x% and x%*(360deg - 180deg) + 180deg = x%*180deg + 180deg = 180deg(x% + 1)
Here is an example with 50% (hover to see)
#page {
margin-top: 50px;
width: 300px;
height: 300px;
background-color: #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 4;
overflow: hidden;
}
#box-first{
width: 200px;
height: 100px;
background-color: #fff;
border-radius: 200px 200px 0 0;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-start;
z-index: 3;
overflow: hidden;
}
#first{
border-radius: 200px 200px 0 0;
margin: 0;
background: linear-gradient(to right, green, yellow, orange, red);
background-size: 2000% 100%;
background-repeat:no-repeat;
background-position:0% 0%;
transition:1s;
width: 200px;
height: 100px;
transform: rotate(180deg);
transform-origin: 50% 100%;
position: absolute;
top: 0px;
right: 0px;
border: 0;
z-index: 1;
}
#box-first:hover #first{
transform: rotate(270deg);
background-position:50% 0%;
}
#n1{
font-size: 20px;
color: #fff;
font-weight: bold;
position: absolute;
left: 50px;
right: 0;
text-align: center;
top: 50px;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100px;
height: 50px;
background: #000;
border-radius: 100px 100px 0 0;
z-Index: 1;
overflow: hidden;
}
<div id="page">
<div id="box-first">
<div id="first">
</div>
<div id="n1">
1500
</div>
</div>
</div>
In order to make this dynamic, we need to adjust the values using JS and the transition will do the job. For this we can define a data-attribute for the state that we convert to the needed value.
Here is an example where I also simplified the html and used pseudo element and CSS variables
setTimeout(function() {
$('.box').each(function() {
var d = $(this).data('state');
$(this).attr("style", "--s:" + d);
});
}, 1000);
body {
margin: 0;
background: #000;
}
.box {
width: 200px;
height: 100px;
background-color: #fff;
border-radius: 200px 200px 0 0;
margin: 10px;
position: relative;
display: inline-flex;
z-index: 0;
overflow: hidden;
}
.box:before {
content: "";
position: absolute;
z-index: -1;
border-radius: 200px 200px 0 0;
background: linear-gradient(to right, green, yellow, orange, red);
background-size: 2000% 100%;
background-repeat: no-repeat;
background-position: calc(var(--s, 0) * 1%) 0%;
transition:2s linear;
width: 200px;
height: 100px;
transform: rotate(calc((var(--s, 0)/100 + 1)*180deg));
transform-origin: 50% 100%;
top: 0px;
right: 0px;
}
.box:after {
content: attr(data-number);
font-size: 20px;
color: #fff;
font-weight: bold;
text-align: center;
margin: auto auto 0;
width: 100px;
height: 50px;
line-height: 50px;
background: #000;
border-radius: 100px 100px 0 0;
z-Index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-number="1500" data-state="50"></div>
<div class="box" data-number="1000" data-state="20"></div>
<div class="box" data-number="3000" data-state="80"></div>
<div class="box" data-number="6000" data-state="100"></div>
You may notice that all will have the same duration since the transition is the same for all. In case you want a different duration and keep the same speed, simply use the CSS variable within the transition also.
setTimeout(function() {
$('.box').each(function() {
var d = $(this).data('state');
$(this).attr("style", "--s:" + d);
});
}, 1000);
body {
margin: 0;
background: #000;
}
.box {
width: 200px;
height: 100px;
background-color: #fff;
border-radius: 200px 200px 0 0;
margin: 10px;
position: relative;
display: inline-flex;
z-index: 0;
overflow: hidden;
}
.box:before {
content: "";
position: absolute;
z-index: -1;
border-radius: 200px 200px 0 0;
background: linear-gradient(to right, green, yellow, orange, red);
background-size: 2000% 100%;
background-repeat: no-repeat;
background-position: calc(var(--s, 0) * 1%) 0%;
transition: calc(2s * var(--s, 0)/100) linear;
width: 200px;
height: 100px;
transform: rotate(calc((var(--s, 0)/100 + 1)*180deg));
transform-origin: 50% 100%;
top: 0px;
right: 0px;
}
.box:after {
content: attr(data-number);
font-size: 20px;
color: #fff;
font-weight: bold;
text-align: center;
margin: auto auto 0;
width: 100px;
height: 50px;
line-height: 50px;
background: #000;
border-radius: 100px 100px 0 0;
z-Index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-number="1500" data-state="50"></div>
<div class="box" data-number="1000" data-state="20"></div>
<div class="box" data-number="3000" data-state="80"></div>
<div class="box" data-number="6000" data-state="100"></div>
Currently I have a container with a hover overlay that darkens the entire container. I wish to show an edit button alongside the overlay right in the middle.
.service-inner {
text-decoration: none;
color: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pale-grey;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.service-inner:hover > .overlay {
position: absolute;
display: block;
top: 0;
width: 100%;
height: 100%;
left: 0;
background-color: black;
opacity: 0.8;
z-index: 100;
}
<div class="service-inner">
<div class="overlay"></div>
</div>
What would be the best way to go about this?
Add a div class="button" on the same level as your overlay and give it the same positioning properties but a higher z-index, then activate it on hover the same as your overlay element.
.button {
display:none;
}
.container:hover > .button{
position: absolute;
display: block;
top: 50%;
width:20%;
left: 40%;
background-color: green;
color:black;
z-index: 200;
}
I want to create a css class for loading operations. I have div panels that contains ajax request operations. I will overlay loading blur on panel. but not working. This is my working code
Text and buttons not appearing under the loading incon. my transparent is 0.4
.main{
height: 250px;
width: 300px;
border: solid 1px red;
overflow: hidden;
float:left;
margin-right:10px;
}
.medium{
height: 250px;
width: 100px;
border: solid 1px blue;
overflow: hidden;
}
.loading {
position:relative;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 205, 205, 205, 0.4 )
url('http://www.easyshopindia.com/images/loading.gif')
50% 50%
no-repeat;
}
body .loading{
display:block;
overflow:hidden;
}
<div class="main">
<div class="loading">
</div>
<button>show images</button>
<p>This is my paragraph.</p>
</div>
<div class="medium">
<div class="loading">
</div>
<button>show info</button>
<p>hello this is small box</p>
</div>
i think you want to set loading as overlay, for that you have to give the parent element as position: relative and give child loading element position: absolute to fill the parent element.
.main{
height: 250px;
width: 300px;
border: solid 1px red;
overflow: hidden;
float:left;
margin-right:10px;
position: relative;
}
.medium{
height: 250px;
width: 100px;
border: solid 1px blue;
overflow: hidden;
position: relative;
}
.loading {
position: absolute;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 205, 205, 205, 0.4 )
url('http://www.easyshopindia.com/images/loading.gif')
50% 50%
no-repeat;
}
See this updated jsfiddle :- http://jsfiddle.net/pvvo7kre/7/