I'm using JavaScript to copy all styles of the div#old and use it to the div#young dynamically. I have successful done it, but when I add the transition property, the div#young applies a transition to all styles that I'm copying which I don't want.
Here is my code:
let styles = getComputedStyle(old);
all_style = ['width', 'height', 'background', 'border-radius', 'transition']
for (var i = 0; i < all_style.length; i++) {
young.style.setProperty(`--${all_style[i]}`, styles.getPropertyValue(all_style[i]));
}
.container {
display: flex;
justify-content: space-around;
width: 60%;
}
#old {
width: 110px;
height: 110px;
background: red;
border-radius: 50%;
transition: 1s ease-in-out all;
}
#young {
width: var(--width);
height: var(--height);
background: var(--background);
border-radius: var(--border-radius);
transition: var(--transition);
}
<div class="container">
<div id="old"></div>
<div id="young"></div>
</div>
In summary I don't want the transition on border-radius of div#young and the reason why I'm adding transition is for my animation, so to remove it won't answer my question.
make 0 the transition you don't want to happen. The order is important, the all need to be the first one:
let styles = getComputedStyle(old);
all_style = ['width', 'height', 'background', 'border-radius', 'transition']
for (var i = 0; i < all_style.length; i++) {
young.style.setProperty(`--${all_style[i]}`, styles.getPropertyValue(all_style[i]));
}
.container {
display: flex;
justify-content: space-around;
width: 60%;
}
#old {
width: 110px;
height: 110px;
background: red;
border-radius: 50%;
transition: 1s ease-in-out all,border-radius 0s;
}
#young {
width: var(--width);
height: var(--height);
background: var(--background);
border-radius: var(--border-radius);
transition: var(--transition);
}
<div class="container">
<div id="old"></div>
<div id="young"></div>
</div>
If you don't want any you can update the display value after the styles copy.
let styles = getComputedStyle(old);
all_style = ['width', 'height', 'background', 'border-radius', 'transition']
for (var i = 0; i < all_style.length; i++) {
young.style.setProperty(`--${all_style[i]}`, styles.getPropertyValue(all_style[i]));
}
young.style.display="initial"
.container {
display: flex;
justify-content: space-around;
width: 60%;
}
#old {
width: 110px;
height: 110px;
background: red;
border-radius: 50%;
transition: 1s ease-in-out all;
}
#young {
width: var(--width);
height: var(--height);
background: var(--background,none);
border-radius: var(--border-radius);
transition: var(--transition);
display:none;
}
<div class="container">
<div id="old"></div>
<div id="young"></div>
</div>
Add the transition with very little delay.
let styles = getComputedStyle(old);
all_style = ['width', 'height', 'background', 'border-radius', 'transition']
for (var i = 0; i < all_style.length; i++) {
if (all_style[i] !== 'transition') {
young.style.setProperty(`--${all_style[i]}`, styles.getPropertyValue(all_style[i]));
} else {
setTimeout(() => {
young.style.setProperty(`--${all_style[i]}`, styles.getPropertyValue(all_style[i]));
}, 10); // 1 second / 100
}
}
.container {
display: flex;
justify-content: space-around;
width: 60%;
}
#old {
width: 110px;
height: 110px;
background: red;
border-radius: 50%;
transition: 1s ease-in-out all;
}
#young {
width: var(--width);
height: var(--height);
background: var(--background);
border-radius: var(--border-radius);
transition: var(--transition);
}
<div class="container">
<div id="old"></div>
<div id="young"></div>
</div>
Related
Just like the above image or an idea or reference to achieve this design, I appreciate the help or suggestion given by community thank you
I have got reference of progress bar which is circular but not able find an approach to solve it.
const boxes = document.querySelectorAll(".box");
const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'violet']
boxes.forEach((box) => {
const insideContent = box.innerText;
box.style.border = `6px solid ${colors[insideContent]}`
})
#app {
display: flex;
}
.box {
width: 50px;
height: 50px;
margin: 10px;
background-color: cyan;
display: flex;
justify-content: center;
align-items: center;
}
<div id="app">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
As per your question I think this is what you are trying to achieve.
First define a pseudo class root
:root {
--color-val: blue;
}
Note: In order to use the --color-val you need to write it as color: var(--color-var) in CSS
Second use JavaScript to update the variable --color-val
let colors =
var root = document.querySelector(':root');
const delay = ms => new Promise(res => setTimeout(res, ms));
const colorChange = async () => {
await delay(1000);
color = colors[Math.floor(Math.random() * colors.length)]
console.log(color)
root.style.setProperty('--color-val', color);
};
colorChange()
Note:
Add the color list you want to select from or go to CodePen for a list of 1000+ hex codes.
Promise are used for asynchronous function and can be skipped by using setTimeOut for a delayed loop or if used with another eventlistener.
I apologize if I misunderstood the question. Wrote in a hurry and without beautyful visualisation, if you disassemble the principle, you can customize it.
h1 {
display: block;
margin:0 auto;
text-align: center;
padding-top:20%;
}
.container {
display:flex;
width: 150px;
height: 150px;
border: 1px solid black;
z-index: 110;
margin:0;
margin: -10px;
}
.top {
display:block;
background-color: green;
height: 24px;
width: 150px; /* gorizontal top */
animation: top 1s linear;
animation-fill-mode: forwards;
}
#keyframes top {
0% {
width: 0px;
}
100% {
width: 150px;
}
}
.right {
background-color: green;
height: 0%;/* right */
width: 32px;
animation: right 1s linear;
animation-fill-mode: forwards;
animation-delay: 1s;
z-index: 10;
}
#keyframes right {
0% {
height: 0%;
}
100% {
height: 100%;
}
}
.box {
position: fixed;
top: 32.5px;
left: 32.5px;
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
z-index: 120;
margin: -10px -10px;
}
.bottom {
position: absolute;
top: 123px;
left: 150px;
background-color: green;
width: 0px;
height: 27px;
z-index: 10;
animation: bottom 1s linear;
animation-fill-mode: forwards;
animation-delay: 2s;
/* animation-direction: reverse; */
}
#keyframes bottom {
0% {
transform: translate(0,0);
}
100% {
transform: translate(-250px,0);
-webkit-transform: translate(-250px,0); /** Safari & Chrome **/
-o-transform: translate(-250px,0); /** Opera **/
-moz-transform: translate(-250px,0); /** Firefox **/
width: 250px;
}
}
.left {
position: absolute;
top: 122px;
background-color: green;
width: 25px;
height: 0px;
animation: left 1s linear;
animation-fill-mode: forwards;
animation-delay: 3s;
}
#keyframes left {
0% {
transform: translate(0,0);
}
100% {
transform: translate(0,-250px);
-webkit-transform: translate(0,-250px); /** Safari & Chrome **/
-o-transform: translate(0,-250px); /** Opera **/
-moz-transform: translate(0,-250px); /** Firefox **/
height: 277px;
}
}
<div class='head'>
<div class='container'>
<div class='top'></div>
<div class='box'>
<h1 id='timer'>
1
</h1>
</div>
<div class='right'></div>
<div class='bottom'></div>
<div class='left'></div>
</div>
</div>
<script type="text/javascript">
init()
function init()
{
sec = 0;
setInterval(tick, 1000);
}
function tick()
{ if (sec<3) { sec++
document.getElementById("timer").
childNodes[0].nodeValue = sec;
} else {
clearInterval(0);
}
}
</script>
Also, instead of the SetInterval script, you can take values from your block width and height styles and output a mathematical calculation in h1 instead of a stopwatch.
upd: After your comment, I decided to do what I wrote about above. You can play with values and math, I add a snippet of another solution that changes the progress bar from the entered values within the entered range. (of course, it would be easier on react than on pure js)
function grade () {
let grade = +document.getElementById("grade").value;
let range = +document.getElementById("range").value;
document.getElementById("timer").innerHTML = `${grade}/${range}`;
progress(grade,range)
}
function progress (value, grade) {
document.getElementById('1').style.backgroundColor = `white`
document.getElementById("left").className = "noactive";
document.getElementById('top').style.width = `0%`
document.getElementById('right').style.height = `0%`
document.getElementById('bottom').style.width = `0%`
let GradeValuSide = grade/4;
if (value <= GradeValuSide) {
document.getElementById('top').style.width =
`${value/GradeValuSide*100}%`
} else if (value > GradeValuSide && value <= (GradeValuSide*2)) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height =
`${(value-GradeValuSide)/GradeValuSide*100}%`
} else if (value >= grade/2 && value < (grade/4)*3) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height = `100%`
document.getElementById('bottom').style.width =
`${((((value-(GradeValuSide*2)) / GradeValuSide) *100) / 100) *27}%`
} else if (value >= grade-(grade/4) /* && value < value + 1 */) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height = `100%`
document.getElementById('bottom').style.width = `100%`
document.getElementById('1').style.backgroundColor = `green`
document.getElementById("left").className = "left";
document.getElementById('left').style.height =
`${(40 - (40 * ((((value-(GradeValuSide*3)) * 100) / GradeValuSide)/ 100)))}%`
}
}
h1 {
font-size:20px;
position: absolute;
left: 40px;
display: block;
margin: 0 auto;
align-items: center;
padding-top:10%;
}
.container {
display:flex;
width: 150px;
height: 150px;
border: 1px solid black;
margin:0;
margin: -10px;
}
div.top {
display:block;
background-color: green;
height: 24px;
width: 0%; /* gorizontal top */
z-index:999;
}
div.right {
position:relative;
background-color: green;
height: 0%;/* right */
width: 32px;
z-index: 9999;
}
.box {
position: fixed;
top: 32.5px;
left: 32.5px;
background-color:white;
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
z-index: 120;
margin: -10px -10px;
}
.wrap{
position: relative;
}
div.bottom {
position: absolute;
top: 123px;
background-color: green;
width: 0%; /* 27 = 100% */
height: 27px;
float: right;
right: 78vw;
z-index: 100;
}
div.left {
position: absolute;
background-color: white;
width: 23px;
height: 40%;
top: 23px;
bottom: 10px;
left: 0;
float: top;
}
div.noactive {
position: absolute;
background-color: white;
width: 23px;
height: 0%;
top: 23px;
bottom: 10px;
left: 0;
float: top;
}
.items {
margin-top: 50px;
text-align: center;
}
.grade,
.value {
height: 15px;
width: 50px;
align-items: center;
}
<div class='head'>
<div id='1' class='container'>
<div id='top' class='top'></div>
<div class='box'>
<h1 id='timer'>1</h1>
<div class='items'>
value<input id='grade' class='grade' type=number oninput="grade()"/>
range<input id='range' class='value' type=number oninput="grade()"/>
</div>
</div>
<div id='right' class='right'></div>
<div id='bottom' class='bottom'></div>
<div id='left' class='noactive'></div>
</div>
</div>
<script src='app.js'></script>
I want to create a messenger component that, when the function is called, will create a message and, when pressed or by a timer, will at first make it transparent -> after that, smoothly decrease the height of the wrapper ->, and after the end of the transition, delete the object
How can can I do that
My code is not working correctly
<template>
<div class="message" id="wrapper"></div>
</template>
<style lang="scss">
$height-block: 9vmin;
.message {
position: absolute;
z-index: 10;
right: 1vmin;
bottom: 1vmin;
width: 25vmin;
height: 50vmin;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
.wrapper {
* {
box-sizing: border-box;
}
flex-shrink: 0;
width: 100%;
position: relative;
transition: height 0.5s linear;
transition: margin 0.5s linear;
height: $height-block;
padding: 0.5vmin 0;
&__block {
background: rgba(42, 29, 29, 0.8);
height: 100%;
width: 100%;
font-size: 2vmin;
padding: 1vmin;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.5s linear;
}
}
}
</style>
<script>
export default {
name: "Messenger",
};
//eslint-disable-next-line no-unused-vars
window.msg = function msg(msg) {
let wrapper = document.createElement("div");
wrapper.classList.add("wrapper");
document.getElementById("wrapper").appendChild(wrapper);
let wrapper__block = document.createElement("div");
wrapper__block.classList.add("wrapper__block");
wrapper.appendChild(wrapper__block);
wrapper__block.innerHTML = msg;
setTimeout(() => {
wrapper__block.style.opacity = "0";
}, 1000);
wrapper__block.addEventListener("mousedown", () => {
wrapper__block.style.opacity = "0";
});
wrapper__block.addEventListener("transitionend", () => {
wrapper.parentElement.style.height = "0";
wrapper.parentElement.style.margin = "0";
});
wrapper.addEventListener("transitionend", () => {
wrapper.remove(wrapper__block);
});
};
</script>
I have a website, and I want an element to spin around 360 degrees once when it is clicked. The only way I have heard of to rotate a div element is the CSS transform property. I have tried some different things, like
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
where the notrans class makes the element have a transition time of 0 seconds, and
backward.style.transition = "0s";
backward.style.transform = "rotateZ(0deg)";
backward.style.transition = transtime;
backward.style.transform = "rotateZ(360deg)";
Here is the source code I am using right now:
var backward = document.getElementById("backward");
var Backward = function() {bgm.currentTime -= 10;
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
}
:root {
--color: black;
--hovercolor: white;
--backcolor: white;
--hoverbackcolor: black;
--transtime: 0.5s;
}
#controls {
position: absolute;
left: 0;
top: 45%;
width: 100%;
height: 30%;
font-size: 250%;
border: 1px solid var(--color);
border-radius: 20px;
overflow: hidden;
padding: 0;
background-color: var(--color);
}
.cp {
height: 25%;
width: 0;
overflow: hidden;
background-color: black;
}
.controls {
position: absolute;
top: 0;
width: 25%;
height: 100%;
border: 1px solid var(--color);
background-color: var(--backcolor);
color: var(--color);
line-height: 75%;
transform: rotateZ(0deg);
border-radius: 0;
transition: color var(--transtime), background-color var(--transtime);
text-align: center;
padding: 5%;
}
.controls:hover {
background-color: var(--hoverbackcolor);
color: var(--hovercolor);
}
#pause {
left: 25%;
line-height: 100%;
}
#backward {
left: 0;
line-height: 100%;
}
#autoskip {
right: 0;
}
#forward {
right: 25%;
line-height: 100%;
}
#autoskip {
line-height: 150%;
}
#skipline {
position: absolute;
left: 0;
top: 47.5%;
background-color: red;
height: 5%;
width: 100%;
transform: rotateZ(-45deg);
transition: var(--transtime);
}
<!DOCTYPE html>
<html>
<body>
<div id="controls">
<div id="15" class="cp">
<div id="backward" class="controls"><span class="rot"><span class = "button">↺</span></span>
</div>
</div>
<div id="22" class="cp">
<div id="pause" class="controls"><span class="button">| |</span></span>
</div>
</div>
<div id="33" class="cp">
<div id="forward" class="controls"><span class="rot"><span class = "button">↻</span></span>
</div>
</div>
<div id="44" class="cp">
<div id="autoskip" class="controls"><span class="button">⏩</span>
<div id="skipline"></div>
</div>
</div>
</div>
</body>
</html>
As you can see, the Backward button is not spinning when you press it.
Any help?
FYI: There is a lot of extra stuff in the code snippet, like CSS variables, but those are necessary.
Do you want this behaviour?
var spinner = document.querySelector("#spinner");
document.querySelector("button").onclick = function() {
spinner.style.animationName = "example";
setTimeout(function() {
spinner.style.animationName = "";
}, 4000);
};
#spinner {
width: 100px;
height: 100px;
display: flex;
flex-wrap: wrap;
background-color: red;
border-radius: 50%;
overflow: hidden;
animation-duration: 4s;
position: relative;
justify-content: center;
align-items: center;
}
#spinner div {
width: 50%;
height: 50%;
}
#spinner button {
position: absolute;
cursor: pointer;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
#keyframes example {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
<div id="spinner">
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="yellow"></div>
<button>Spin</button>
</div>
I'm trying to create an infinite horizontal "scroll" like a marquee effect (like this one, for example).
This is my code:
.parent {
border: 1px solid black;
width: 100%;
height: 2rem;
}
.container {
height: 100%;
display: flex;
padding-left: 10%;
border: 1px solid tomato;
animation: marquee 5s linear infinite;
}
#keyframes marquee {
0% {
transform: translate(0%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
.child1 {
width: 10rem;
height: 100%;
background-color: #84B7DF;
}
.child2 {
width: 18rem;
height: 100%;
background-color: #f58db6;
}
.child3 {
width: 13rem;
height: 100%;
background-color: #ffc410;
}
.child4 {
width: 21rem;
height: 100%;
background-color: #C8E7C1;
}
<div class="parent">
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
</div>
As you can see, it works but not perfectly.
I would like that as soon as the green rectangle has shifted, the blue (slightly spaced) one immediately appears, I don't want there to ever be a whole white screen.
I hope is clear what I mean...
Thanks a lot!
You could just add one more container element with same children, and then use display: flex with overflow: hidden on parent element. Also you can set width of the .container element to be larger then the window width using vw units and flex property.
Adjust width and padding properties on container if you have to.
.parent {
border: 1px solid black;
width: 100%;
height: 2rem;
display: flex;
overflow: hidden;
}
.container {
height: 100%;
flex: 0 0 120vw;
display: flex;
padding-right: 10%;
border: 1px solid tomato;
animation: marquee 5s linear infinite;
}
#keyframes marquee {
0% {
transform: translate(0%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
.child1 {
width: 10rem;
height: 100%;
background-color: #84B7DF;
}
.child2 {
width: 18rem;
height: 100%;
background-color: #f58db6;
}
.child3 {
width: 13rem;
height: 100%;
background-color: #ffc410;
}
.child4 {
width: 21rem;
height: 100%;
background-color: #C8E7C1;
}
<div class="parent">
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
<div class="container other">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
</div>
Another solution is to add padding-right width vw units on container.
.parent {
border: 1px solid black;
width: 100%;
height: 2rem;
display: flex;
overflow: hidden;
}
.container {
height: 100%;
display: flex;
padding-right: 50vw;
border: 1px solid tomato;
animation: marquee 5s linear infinite;
}
#keyframes marquee {
0% {
transform: translate(0%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
.child1 {
width: 10rem;
height: 100%;
background-color: #84B7DF;
}
.child2 {
width: 18rem;
height: 100%;
background-color: #f58db6;
}
.child3 {
width: 13rem;
height: 100%;
background-color: #ffc410;
}
.child4 {
width: 21rem;
height: 100%;
background-color: #C8E7C1;
}
<div class="parent">
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
<div class="container other">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
</div>
Javascript / jQuery solution, you can first create clone of the original element and append it to parent. Create a function that will decrease left position of the elements with setInterval function. If the offset is less then -width of the same element that means that element is off the screen. In that case you should move element to the end of the window or to the end of the other element with some offset.
const parent = $(".parent");
const container = $(".container");
const offset = 250;
const clone = cloner(container, parent, offset);
function cloner(element, parent, offset) {
const clone = element.clone();
const width = element.width();
clone.css({left: width + offset})
parent.append(clone)
return clone;
}
function move(element, size = 1) {
const position = element.position().left;
const width = element.width();
if (position < -width) {
const next = element.siblings().first();
const nPosition = next.position().left;
const nWidth = next.width();
const wWidth = $(window).width();
if (nPosition + nWidth < wWidth) {
element.css({left: wWidth})
} else {
element.css({left: nPosition + nWidth + offset})
}
} else {
element.css({left: position - size})
}
}
window.mover = setInterval(() => {
move(container)
move(clone)
}, 5)
.parent {
border: 1px solid black;
width: 100%;
height: 2rem;
display: flex;
overflow: hidden;
position: relative;
}
.parent>div {
position: absolute;
left: 0;
}
.container {
height: 100%;
display: flex;
border: 1px solid tomato;
}
.child1 {
width: 10rem;
height: 100%;
background-color: #84B7DF;
}
.child2 {
width: 18rem;
height: 100%;
background-color: #f58db6;
}
.child3 {
width: 13rem;
height: 100%;
background-color: #ffc410;
}
.child4 {
width: 21rem;
height: 100%;
background-color: #C8E7C1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
</div>
.marquee {
position: relative;
width: 100%;
height: 1.5em;
line-height: 1.5em;
overflow: hidden;
> div {
position: absolute;
display: flex;
flex-wrap: nowrap;
animation: marquee 10s linear infinite;
transform: translateX(100%);
> * {
display: inline;
white-space: nowrap;
&:last-child {
padding-right: 100%;
}
}
}
}
#keyframes marquee {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
I am just playing around trying to get a simple 3 slide slider working but run into some issues with the javascript. All i want to happen is on click of the slider colour i would like the current slider to slide out and the selected one to slide in. I am trying to do it by adding an active class to the slider number that I have clicked to show. I just cant quite work out where I have gone wrong. I don't want to use jQuery as I am trying to learn vanilla javascript.
Thanks as always
window.onload = onPageLoad();
function onPageLoad() {
document.querySelector('.red').classList.add('active');
};
document.querySelector('.box').addEventListener('click', function() {
document.querySelector('.red').classList.toggle('active');
document.querySelector('.green').classList.toggle('active');
document.querySelector('.yellow').classList.toggle('active');
});
* {
padding: 0;
margin: 0;
}
.main__wrapper {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.red,
.green,
.yellow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
transform: translateX(-100%);
transition: transform 1.2s;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.active {
transform: translateX(0) !important;
transition: transform 1s !important;
}
.slide__select {
position: absolute;
bottom: 0;
right: 0;
width: 60%;
height: 20%;
z-index: 10;
display: flex;
}
.box {
position: relative;
flex: 1 0 0;
color: $color-white;
display: flex;
align-items: center;
cursor: pointer;
background-color: #A68D71;
}
.box span {
display: block;
position: relative;
z-index: 11;
}
.box::after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: yellow;
width: 100%;
height: 0;
transition: height .3s;
}
.box:hover::after {
height: 100%;
transition: height .3s;
}
<div class="main__wrapper">
<section class="red">
</section>
<section class="green">
</section>
<section class="yellow">
</section>
<div class="slide__select">
<div class="box">
<span>red</span>
</div>
<div class="box">
<span>green</span>
</div>
<div class="box">
<span>yellow</span>
</div>
</div>
</div>
You're only adding an event listener to the first box and you're toggling every box's active class in order, and the last one is yellow, so you result with a yellow background.
querySelector returns the first DOM element it finds, which is the red box.
For the functionality that you want, you have to add event listeners to each box (querySelectorAll)
window.onload = onPageLoad();
function onPageLoad() {
document.querySelector('.red').classList.add('active');
};
document.querySelector('.redbox').addEventListener('click', function() {
document.querySelector('.red').classList.add('active');
document.querySelector('.green').classList.remove('active');
document.querySelector('.yellow').classList.remove('active');
});
document.querySelector('.greenbox').addEventListener('click', function() {
document.querySelector('.red').classList.remove('active');
document.querySelector('.green').classList.add('active');
document.querySelector('.yellow').classList.remove('active');
});
document.querySelector('.yellowbox').addEventListener('click', function() {
document.querySelector('.red').classList.remove('active');
document.querySelector('.green').classList.remove('active');
document.querySelector('.yellow').classList.add('active');
});
* {
padding: 0;
margin: 0;
}
.main__wrapper {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.red,
.green,
.yellow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
transform: translateX(-100%);
transition: transform 1.2s;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.active {
transform: translateX(0) !important;
transition: transform 1s !important;
}
.slide__select {
position: absolute;
bottom: 0;
right: 0;
width: 60%;
height: 20%;
z-index: 10;
display: flex;
}
.box {
position: relative;
flex: 1 0 0;
color: $color-white;
display: flex;
align-items: center;
cursor: pointer;
background-color: #A68D71;
}
.box span {
display: block;
position: relative;
z-index: 11;
}
.box::after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: yellow;
width: 100%;
height: 0;
transition: height .3s;
}
.box:hover::after {
height: 100%;
transition: height .3s;
}
<div class="main__wrapper">
<section class="red">
</section>
<section class="green">
</section>
<section class="yellow">
</section>
<div class="slide__select">
<div class="redbox box">
<span>red</span>
</div>
<div class="greenbox box">
<span>green</span>
</div>
<div class="yellowbox box">
<span>yellow</span>
</div>
</div>
</div>
Here is a primitive example solution. It's overly verbose but shows you what is needed. This can be condensed.
To get an idea of how it can be condensed, all three listeners CAN be condensed into a single listener how you had it, listen just to the .box selector. But if you do that, you need a way to identify which box was clicked. This can be done via a data attribute or by looking at the html text. A data attribute would be my preferred method, as it separates the content from the logic a bit, but either would work.
Another less verbose solution:
window.onload = onPageLoad();
function onPageLoad() {
document.querySelector('.red').classList.add('active');
};
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
boxes[i].addEventListener('click', toggleSections);
}
var colors = ['red', 'green', 'yellow'];
function toggleSections(ev) {
var color = ev.currentTarget.innerText;
for (var c = 0; c < colors.length; c++) {
var colorElem = document.querySelector('.' + colors[c]);
if (colors[c] != color) {
colorElem.classList.remove('active');
} else {
colorElem.classList.add('active');
}
}
}
* {
padding: 0;
margin: 0;
}
.main__wrapper {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.red,
.green,
.yellow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
transform: translateX(-100%);
transition: transform 1.2s;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.active {
transform: translateX(0) !important;
transition: transform 1s !important;
}
.slide__select {
position: absolute;
bottom: 0;
right: 0;
width: 60%;
height: 20%;
z-index: 10;
display: flex;
}
.box {
position: relative;
flex: 1 0 0;
color: $color-white;
display: flex;
align-items: center;
cursor: pointer;
background-color: #A68D71;
}
.box span {
display: block;
position: relative;
z-index: 11;
}
.box::after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: yellow;
width: 100%;
height: 0;
transition: height .3s;
}
.box:hover::after {
height: 100%;
transition: height .3s;
}
<div class="main__wrapper">
<section class="red">
</section>
<section class="green">
</section>
<section class="yellow">
</section>
<div class="slide__select">
<div class="box">
<span>red</span>
</div>
<div class="box">
<span>green</span>
</div>
<div class="box">
<span>yellow</span>
</div>
</div>
</div>
To achieve expected result, use below option
Use one section to avoid looping of section elements
Use querySelectorAll or elementsByClassName instead of querySelector to fetch all elements in array
Use forEach to loop through all elements of class- box and add addEventListener and run another loop with forEach for span elements
Use classList to add or remove
window.onload = onPageLoad();
function onPageLoad() {
document.querySelector('.red').classList.add('active');
};
// use querySelectorAll to get all elements of class-box and forEach to loop through
document.querySelectorAll('.box').forEach(function(ele){
//Add clici event through addEventListener
ele.addEventListener('click', function() {
// use another querySelectorAll to get all elements of tag span and forEach to loop through
document.querySelectorAll('span').forEach(function(e){
e.classList.remove('active');
//use querySelector for section element and empty classList to remove active and red/green/yellow class names
document.querySelector('section').className ='';
});
//toggle active class for clicked element
ele.children[0].classList.toggle("active");
//add active class for section
document.querySelector('section').classList.add('active');
//add class red/yellow/green using span innerHTML
document.querySelector('section').classList.add(ele.children[0].innerHTML);
});
});
* {
padding: 0;
margin: 0;
}
.main__wrapper {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.red,
.green,
.yellow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
transform: translateX(-100%);
transition: transform 1.2s;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.active {
transform: translateX(0) !important;
transition: transform 1s !important;
}
.slide__select {
position: absolute;
bottom: 0;
right: 0;
width: 60%;
height: 20%;
z-index: 10;
display: flex;
}
.box {
position: relative;
flex: 1 0 0;
color: $color-white;
display: flex;
align-items: center;
cursor: pointer;
background-color: #A68D71;
}
.box span {
display: block;
position: relative;
z-index: 11;
}
.box::after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: yellow;
width: 100%;
height: 0;
transition: height .3s;
}
.box:hover::after {
height: 100%;
transition: height .3s;
}
<div class="main__wrapper">
<section class="red">
</section>
<div class="slide__select">
<div class="box">
<span>red</span>
</div>
<div class="box">
<span>green</span>
</div>
<div class="box">
<span>yellow</span>
</div>
</div>
</div>
code sample - https://codepen.io/nagasai/pen/vRoPwp