How to fix the issue with adding css classes?

Question

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);
      }
    }

It doesn't look like you ever take away any of the color classes; you just add them. Once something has class "red" or "orange" they'll override whatever the "green" class does because they come later in the CSS. — Pointy
– Pointy, Commented Apr 18, 2019 at 21:49
use RemoveClass $(".progress").parent().removeClass().addClass("green"); — imvain2
– imvain2, Commented Apr 18, 2019 at 21:50

imvain2 · Accepted Answer · 2019-04-18 22:05:38Z

2

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");

answered Apr 18, 2019 at 22:05

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to fix the issue with adding css classes?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related