I have the vertical label "PINK" aligned in the middle of a section.
When I scroll down to the next section the "PINK" is being covered by the next section which is having an higher z-index.
div.back1 {
background-color: #FF00FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 10;
}
div.text1 {
transform: rotate(-90deg);
position: fixed;
top: 50%;
background-color: #FFFFFF;
z-index: 20;
}
div.back2 {
background-color: #0000FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 30;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="text1">PINK</div>
<div class="back1"></div>
<div class="back2"></div>
</body>
</html>
I would like to have a second title "BLUE" in the second section to appear as shown in the following mockup.
Is it possible to arrange the z-indexes to achieve this result?
Is there another better way to clip the labels, keeping their alignment at 50% of the viewport?
Thanks a lot in advance for any contribution!
Try this code
since you tagged jquery,i used it to add class fixed
$(document).ready(function(){
$('.blue-text').hide();
$(window).scroll(function() {
if ($('.blue').offset().top <= $('.pink-text').offset().top + 40)
{
$('.blue-text').show();
if($('.blue').offset().top <= $('.pink-text').offset().top){
$('.blue-text').addClass('fixed');
}
}
else{
$('.blue-text').removeClass('fixed');
$('.blue-text').hide();
}
});
});
div.back1 {
background-color: #FF00FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 10;
}
div.text1.fixed {
transform: rotate(-90deg);
position: fixed;
top: 50%;
background-color: #FFFFFF;
z-index: 20;
}
div.back2 {
background-color: #0000FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 30;
}
.blue,.pink {
position: relative;
}
.text1 {
position: absolute;
top: 10px;
z-index: 31;
transform: rotate(-90deg);
background-color: #FFFFFF;
}
.text1.blue-text.fixed{
z-index: 31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="color">
<div class="pink">
<div class="text1 pink-text fixed">PINK</div>
<div class="back1"></div>
</div>
<div class="blue">
<div class="text1 blue-text">BLUE</div>
<div class="back2"></div>
</div>
</div>
Related
I wonder if I can appear block absolute above block relative which is a later element
Here is my code:
Purpose is to display child 1, 2, 3 (block absolute) above wrap (relative).
Probleme is from block wrap which appear after block absolute.
Do you have any idea for this? Thank you !
.wrap {
border: 5px solid lightcoral;
padding: 1rem;
height: 50vh;
> style {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
body {
margin: 2rem;
}
* {
box-sizing: border-box;
}
.child {
background: darkorange;
}
<div class="child child-1">
<style contenteditable>
.child-1 {
position: absolute;
top: 0;
left: 0;
}
</style>
</div>
<div class="child child-2">
<style contenteditable>
.child-2 {
position: absolute;
top: 30%;
right: -25px;
}
</style>
</div>
<div class="child child-3">
<style contenteditable>
.child-3 {
position: absolute;
bottom: 5px;
left: 10px;
}
</style>
</div>
<div class="wrap">
<style contenteditable>
.wrap {
position: relative; // problem is here
background: violet;
}
</style>
</div>
I tried z-index. But it doesn't work.
**Update: Problem solved. I put all child in relative element. And use z-index: 999 for child's element.
I'm working on make a twitter website. But I can't solve the this problem. When I want to click this button:
I expect a result like this:
Its background will look like this and it will pop a form on the screen. What should I use to solve this problem? I'm not bad with HTML DOM, but I couldn't figure out the algorithm in my head.
An other way for achieving that, would be with a modal box (div) that already exists but will only be displayed after clicking a certain button.
Here's a quick example, I've also added an overlay, which will appear behind the div. If you click on the overlay while the modal box is visible, it will disappear again.
$('#button').click(() => {
var display = $('#popup').css('display');
if (display === "none") {
$('#popup').show();
$('#overlay').fadeIn();
}
else {
$('#popup').hide();
$('#overlay').fadeOut();
}
});
$('#overlay').click(() => {
$('#popup').hide();
$('#overlay').fadeOut();
});
* {
margin: 0;
padding: 0;
}
#popup {
position: absolute;
background-color: #fff;
padding: 6%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
border-radius: 30px;
z-index: 10;
display: none;
}
#overlay {
position: fixed;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay"></div>
<div id="button">Click me</div>
<div id="popup">Text</div>
</body>
</html>
To do that you can use JavaScript or jQuery.
Exemple:
$(".mybutton").click(() => {
$("body").append(`
<div class="modals">
Copy your code here
</div>
`)
})
.modals{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
padding: 40px 30px;
background-color: #e2e2e2;
border-radius: 4px;
}
<button class="mybutton">Open</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$('#button').click(() => {
var display = $('#popup').css('display');
if (display === "none") {
$('#popup').show();
$('#overlay').fadeIn();
}
else {
$('#popup').hide();
$('#overlay').fadeOut();
}
});
$('#overlay').click(() => {
$('#popup').hide();
$('#overlay').fadeOut();
});
* {
margin: 0;
padding: 0;
}
#popup {
position: absolute;
background-color: #fff;
padding: 6%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
border-radius: 30px;
z-index: 10;
display: none;
}
#overlay {
position: fixed;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay"></div>
<div id="button">Click me</div>
<div id="popup">Text</div>
</body>
</html>
/*when you click on the picture it should open an overlay, which closes if you click anywhere*/
<script type="text/javascript">
function on() {document.getElementById("over1").style.display="block";}
function off() {
document.getElementById("over1").style.display = "none";
}
function on() {document.getElementById("over2").style.display="block";}
function off() {
document.getElementById("over2").style.display = "none";
} </script>
<style>
.container{
background-color: #94AB98;
height:370px;
width:280px;
margin: 30px;
margin-bottom: 60px;
float: left;
display: inline-block;
}
.container .bildbt1{
width: 230px;
height: 230px;
margin: 25;
border: none;
background: url(pic1);
}
.container .bildbt2{
width: 230px;
height: 230px;
margin: 25;
border: none;
background: url(pic2);}
#over1{
display: none;
width: 100%;
height: 100%;
background-color: rgba(65, 84, 80, 0.95);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: :0;
line-height: 130%;
}
#over2{
display: none;
width: 100%;
height: 100%;
background-color: rgba(65, 84, 80, 0.95);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: :0;
line-height: 130%;
}
#text1{
position: absolute;
top:50%;
left:50%;
color: white;
font-size: 20;
transform: translate(-50%,-50%);
-ms-transform: translate (-50%,-50%);
}
#text2{
position: absolute;
top:50%;
left:50%;
color: white;
font-size: 20;
transform: translate(-50%,-50%);
-ms-transform: translate (-50%,-50%);
}
</style>
/*those are my containers, with buttons*/
<body>
<div class="container">
<div id="over1" onclick="off()">
<a id="text1">some text</a></div>
<button class="bildbt1" onclick="on()">
</button>
<h2>text too</h2>
</div>
<div class="container">
<div id="over2" onclick="off()">
<a id="text2">
also text</a>
</div>
<button class="bildbt2" onclick="on()"></button>
<h2>and there is also text</h2>
</div>
</body>
It only shows Overlay 2, i tried various options but it doesn't work.
Can you help me?
I'don't know why I can't poste this question...
It looks like your post is mostly code; add some more details...
i think there are enough details.
I am trying to create a loader for my website using css and javascript and it has to look something like
so far i am able to create the slider but I am unable to put the box behind the slider. what should I do.
Edit- Sorry if was not clear but I want the orange slider as an animated loader
HTML -
<div style="margin-left:400px; margin-right:400px " class="progress-wrap
progress" data-progress-percent="20">
<div class="progress-bar progress"></div>
</div>
CSS -
#import "compass/css3";
.red{
background:black;
margin-left:300px;
top:100px;
}
.box{
width:100px !important;
height:100px !important;
z-index:-1;
}
.progress {
width: 100%;
height: 10px;
}
.progress-wrap {
background: #f80;
margin: 200px 0;
overflow: hidden;
position: relative;
.progress-bar {
background: white;
left: 0;
position: absolute;
top: 0;
}
}
Javascript-
moveProgressBar();
$(window).load(function() {
moveProgressBar();
});
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 6500;
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
}
So far I am able to create the slider but I am unable to put the box behind the slider. What should I do?
One solution is to set the progress bar to position: absolute and position it over the boxes.
As for the progress percent. You're updating a data attribute so you can just set the width of the bar based on that value. The animation can be handled by a CSS transition transition: width 1s.
Live demo: http://jsfiddle.net/rg0bq23p/45/
Javascript
var progress = document.getElementById('progress');
var bar = progress.querySelector('.bar');
bar.style.width = progress.dataset.progress + '%';
HTML
<div class="wrapper">
<div id="progress" class="progress" data-progress="20">
<div class="bar"></div>
</div>
<div class="box dark-gray"></div>
<div class="box gray"></div>
</div>
SCSS
.wrapper {
width: 400px;
margin: 0 auto;
display: flex;
position: relative;
.progress {
position: absolute;
top: 150px;
left: -100px;
z-index: 1;
width: 90%;
background-color: #fff3e2;
.bar {
width: 0;
height: 15px;
background-color: #ffa41c;
transition: width 1s;
}
}
.box {
width: 200px;
height: 200px;
&.gray {
background-color: #bbb;
}
&.dark-gray {
background-color: #888;
}
}
}
I solved the problem using only HTML and CSS:
The result will be exactly as you want in the example you mentioned
.main{
float: right;
}
.box{
position: relative;
}
.bar{
position: absolute;
top: 105px;
right: 111px;
}
.left{
width: 143px;
height: 143px;
background: #595d59;
display: inline-block;
margin-right: -2px;
}
.right{
width: 143px;
height: 143px;
background: #b8b9b8;
display: inline-block;
margin-left: -2px;
}
.progress-bar{
width: 268px;
height: 11px;
background: #f26522;
}
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="main" >
<div class="box">
<div class ="left"></div>
<div class ="right"></div>
</div>
<div class="bar">
<div class="progress-bar"></div>
</div>
</div>
</body>
</html>
For animation, you can use a setInterval to increase the width of the progress bar every 200 milliseconds.
.main{
float: right;
}
.box{
position: relative;
}
.bar{
position: absolute;
top: 105px;
right: 111px;
width: 100%;
border: 1px solid black;
}
.left{
width: 143px;
height: 143px;
background: #595d59;
display: inline-block;
margin-right: -2px;
}
.right{
width: 143px;
height: 143px;
background: #b8b9b8;
display: inline-block;
margin-left: -2px;
}
.progress-bar{
width: 5%;
height: 11px;
background: #f26522;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="main" >
<div class="box">
<div class ="left"></div>
<div class ="right"></div>
</div>
<div class="bar">
<div class="progress-bar"></div>
</div>
</div>
<script>
var width = 5;
var progress;
progress= setInterval(function(){
$('.progress-bar').css("width", width + "%");
width += 5;
if(width>=105){
clearInterval(progress);
}
}, 200);
</script>
</body>
</html>
JSFiddle: http://jsfiddle.net/21jdo8q7/1/
I am working w/a slideshow that works similar to this: https://jsfiddle.net/trbwxyso/
<!doctype HTML>
<html>
<head>
<title></title>
<style>
* { margin: 0; padding: 0; }
body { background: #000; }
#wrapper { margin: 0 auto; width: 500px; }
#project_ctr { position: relative; width: 1500px; height: 576px; display: block; background: #000; overflow: hidden; }
.project { position: absolute; width: 500px; height: 576px; display: block; }
.ease { transition: 750ms ease all; }
</style>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="project_ctr">
<div class="project" style="background: #f00; left: 0;">
</div>
<div class="project" style="background: #fff; left: 500px;">
</div>
<div class="project" style="background: #00f; left: 1000px;">
</div>
</div>
</div>
<script>
$(document).ready(function() {
setTimeout(function() {
$('.project').addClass('ease').css({
'transform': 'translate3d(-500px, 0, 0)'
});
setTimeout(function() {
$('.project').addClass('ease').css({
'transform': 'translate3d(-1000px, 0, 0)'
});
}, 2000);
}, 2000);
});
</script>
</body>
</html>
In Safari (on OS X) if you resize your browser you will see a 1px shift and bleed of the previous background. I have tried every css trick to no avail. It appears to be a Safari only bug that's replicable and I can confirm it has been happening for at least two years.
Are there any workarounds?
currentColor to the rescue. I'm aware of how ugly this Safari-only CSS is:
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ #media {
.project:before {
content: "";
display: block;
position: absolute;
left: -1px;
top: 0;
bottom: 0;
height: 100%;
width: 1px;
z-index: 999;
background: currentColor;
}
}
}
Here, the value currentColor set on background assumes whatever the current slide color is, making the fix scale pretty well.
https://jsfiddle.net/dgt4uqc4/2/