CODEWITHSUNDEEP
javascriptprogress-barionic-framework
Tss
Tss

Reputation: 88

ionic change progressBar bar color in javascript

The code below is not workING in my application

HTML:

<div class="progressBar">
    <div class="progressBarIndicator">
    </div>
</div>

CSS:

.progressBar{background-color: #fff; height:20px;}
.progressBarIndicator{background-color: #000; height:20px;}

JAVASCRIPT:

$('.progressBarIndicator').css({"background-color" : "red"});

Upvotes: 1

Views: 3395

Answers (2)

Nana Partykar
Nana Partykar

Reputation: 10548

First Check, whether jquery.min.js is present or not.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

If yes, change your script like this way.

<script>
$(document).ready(function(){
   $('.progressBarIndicator').css("background-color","red");
});
</script>

$('.progressBarIndicator').css({"background-color" : "red"});
                               ^                   ^      ^
                            remove  replace with comma   Remove

For more info, check this Jquery CSS Method - W3 Schools & Background CSS Using Jquery - Web Developer Forum

My Updated Code. Do the needful changes if required.

<html>
    <head></head>

<body>
    <style>
        .progressBar{
          width: 100%;
          height: 20px;
          background: #fff;
          border-radius: 2px;
          border: 1px solid rgba(199, 197, 197, 1);
        }

        .progressBarIndicator{
          height: 20px;
          background: #019F45;
          overflow: hidden;
          border-radius: 2px;
        }
    </style>

    <div class="progressBar">
        <div class="progressBarIndicator">
    </div>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function(){
         $('.progressBarIndicator').css("background", "red");
    });
</script>
</html>

Upvotes: 1

Tss
Tss

Reputation: 88

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

HTML:

<div class="progressBar">
 <div class="progressBarIndicator">
</div>

CSS:

.progressBar{
  width: 100%;
  height: 20px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid rgba(199, 197, 197, 1);
}

.progressBarIndicator{
  height: 20px;
  background: #019F45;
  overflow: hidden;
  border-radius: 2px;
}

JAVASCRIPT:

$(document).ready(function(){
     $('.progressBarIndicator').css("background", "red");
});

Upvotes: 0

Related Questions