Sara Ree
Reputation: 3543
How to fix the issue with adding css classes?
I have a code which is inspired by this Code Pen.
It's a liquid bubble progress bar!
I've attached my whole code with a little difference to the original code ( I'm dynamically assigning different values to val).
The problem: Here is where my code doesn't add classes: (it runs the code but it doesn't add classes )
setTimeout(function(){
if (val < 50) {
console.log("less than 50%: " +window.valOld);
$(".progress").parent().addClass("red");
} else if (50 <= val && val <= 80 ) {
console.log("50-80: " +window.valOld);
$(".progress").parent().addClass("orange");
} else {
console.log("100%: " +window.valOld);
$(".progress").parent().addClass("green");
}
}, 2000)
it is expected that if for example, val is less than 50 then addClass("red") make the water color to red, and if val value goes over 80 addClass("green") happen right!
My problem is on the original code this expected behavior happens each time but in my code even if val value is 100 addClass("green") doesn't work and I see the red or orange water bubble... Why on earth this happens? I'm totally confused please help me...
Here is my code:
JS
window.valOld = 0;
runFunc();
setInterval(function(){
console.log('Imported: ' + parent.window.confedenceVar);
var valUpdate = parent.window.confedenceVar;
console.log("valUpdate: " + valUpdate);
console.log("valOld: " + window.valOld);
if(valUpdate !== window.valOld){
console.log("val Changed");
window.valOld = valUpdate;
runFunc();
};
}, 5000);
function runFunc(){
$(".progress").parent().addClass("red");
var val = window.valOld;
setTimeout(function(){
if (val < 50) {
console.log("less than 50%: " +window.valOld);
$(".progress").parent().addClass("red");
} else if (50 <= val && val <= 80 ) {
console.log("50-80: " +window.valOld);
$(".progress").parent().addClass("orange");
} else {
console.log("100%: " +window.valOld);
$(".progress").parent().addClass("green");
}
}, 2000)
// Set the initial percent
$(".progress .percent").text(0 + "%");
// Set animation start
$(".progress .water").css("top", 100 + "%");
// Trigger animation in 2000ms (2 seconds)
setTimeout(function(){
$(".progress .percent").text(val + "%");
$(".progress .water").css("top", 100 - val + "%");
}, 2000)
console.log("valOld End: " +window.valOld);
}
HTML
<script src="jquery-3.4.0.min.js"></script>
<link rel="stylesheet" href="Style.css">
<div class="wrapper">
<div class="green">
<div class="progress">
<div class="inner">
<div class="water"></div>
<div class="glare"></div>
</div>
</div>
</div>
</div>
<script src="Script.js"></script>
CSS
html {
overflow: hidden;
width: 200px;
height: 100%;
transform :scale(0.21);
margin-top: -34px;
margin-left: -86px;
}
body {
height: 100%;
}
body {
background-color: transparent;
font-family: sans-serif;
font-size: 15px;
color: #ccc;
}
.wrapper {
display: -ms-flexbox;
display: box;
display: flex;
-o-box-align: center;
align-items: center;
-o-box-pack: center;
justify-content: center;
-o-box-orient: vertical;
flex-direction: column;
height: 100%;
}
.green {
margin-top: 15px;
}
.green .progress .inner,
.red .progress .inner,
.orange .progress .inner {
position: absolute;
overflow: hidden;
z-index: 10;
border-radius: 50%;
background-color: transparent;
}
.green .progress .inner,
.red .progress .inner,
.orange .progress .inner {
width: 240px;
height: 240px;
}
.green .progress .inner,
.red .progress .inner,
.orange .progress .inner {
transition: all 1s ease;
}
.green .progress .inner .water,
.red .progress .inner .water,
.orange .progress .inner .water {
position: absolute;
z-index: 1;
width: 200%;
height: 200%;
left: -50%;
border-radius: 40%;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: spin;
animation-name: spin;
}
.green .progress .inner .water {
top: 25%;
}
.green .progress .inner .water {
background: rgba(83,252,83,0.7);
}
.green .progress .inner .water,
.red .progress .inner .water,
.orange .progress .inner .water {
transition: all 1s ease;
}
.green .progress .inner .water,
.red .progress .inner .water,
.orange .progress .inner .water {
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.green .progress .inner .water {
box-shadow: 0 0 20px #03bc03;
}
.green .progress .inner .glare,
.red .progress .inner .glare,
.orange .progress .inner .glare {
position: absolute;
top: -120%;
left: -120%;
z-index: 5;
width: 200%;
height: 200%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 50%;
}
.green .progress .inner .glare,
.red .progress .inner .glare,
.orange .progress .inner .glare {
background-color: rgba(255,255,255,0.15);
}
.green .progress .inner .glare,
.red .progress .inner .glare,
.orange .progress .inner .glare {
transition: all 1s ease;
}
.green .progress .inner .percent,
.red .progress .inner .percent,
.orange .progress .inner .percent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-weight: bold;
text-align: center;
}
.green .progress .inner .percent,
.red .progress .inner .percent,
.orange .progress .inner .percent {
line-height: 240px;
font-size: 48px;
}
.green .progress .inner .percent {
color: #03c603;
}
.green .progress .inner .percent {
text-shadow: 0 0 10px #029502;
}
.green .progress .inner .percent,
.red .progress .inner .percent,
.orange .progress .inner .percent {
transition: all 1s ease;
}
.red {
margin-top: 15px;
}
.red .progress .inner .water {
top: 75%;
}
.red .progress .inner .water {
background: rgba(237,59,59,0.7);
}
.red .progress .inner .water {
box-shadow: 0 0 20px #9b0e0e;
}
.red .progress .inner .percent {
color: #a30f0f;
}
.red .progress .inner .percent {
text-shadow: 0 0 10px #7a0b0b;
}
.orange {
margin-top: 15px;
}
.orange .progress .inner .water {
top: 50%;
}
.orange .progress .inner .water {
background: rgba(240,124,62,0.7);
}
.orange .progress .inner .water {
box-shadow: 0 0 20px #a0400c;
}
.orange .progress .inner .percent {
color: #ffffff;
}
.orange .progress .inner .percent {
text-shadow: 0 0 10px #7e320a;
}
#copyright {
margin-top: 25px;
background-color: transparent;
font-size: 14px;
color: #b3b3b3;
text-align: center;
}
#copyright div {
margin-bottom: 10px;
}
#copyright a,
#copyright a:link {
color: #808080;
text-decoration: none;
border-bottom: 1px solid #808080;
padding-bottom: 2px;
}
#copyright a:active {
color: #b3b3b3;
}
#copyright a:hover {
color: #b3b3b3;
border-bottom: 1px solid #b3b3b3;
padding-bottom: 4px;
}
.instructions {
display: inline-block;
margin: 5px 0;
font-size: 16px;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Upvotes: 0
Views: 78
Answers (1)
imvain2
Reputation: 15847
In order to overwrite a class, you will need to remove the old classes first. By not passing anything to removeClass you will remove all of the classes of that object.
$(".progress").parent().removeClass().addClass("green");
Upvotes: 2
Related Questions
- CSS styles doesn't change after adding class with JavaScript
- How to add class via Javascript instead of work with css inside js code?
- How do i add a class to style my javascript in css classlist.add not working
- how can I resolve this css class issue in JS project?
- Javascript classList.add is not working
- Javascript - Adding Class and Style Prescience
- Issues with addclass and selectors
- jQuery/ JavaScript Problems with adding css class
- Add a class with Javascript
- Problem with adding css class using Javascript