1

I have this in my html. I want to apply the background dynamically based on %.

If I pass 30, the 30% of the div should be green. If it's 60, 60% of the div should be green

    <div id="progress_bar" class="meter-bg">
        by default white
    </div>

by default its background white. But when I click the button.

    <input type="submit" value="30"/>

It has to apply 30% of the green color to the progress_bar. How can I do that in Jquery

Thanks.

minboost
  • 2,555
  • 1
  • 15
  • 15
Chakradhar
  • 753
  • 6
  • 14
  • 29
  • 1
    are you looking for this http://stackoverflow.com/questions/6013067/dynamically-change-the-color-of-jquery-progress-bar ? – robasta Dec 05 '11 at 09:13
  • 1
    You could use the jQuery implementation here: http://jqueryui.com/demos/progressbar/#default. If you wanted to write your own you could use this as a reference. Note that the colours can be controlled by the jQuery theme. – dash Dec 05 '11 at 09:13

2 Answers2

2

background-size

You could use the background-size property for browsers that support it.

$('input').click(function(){
    $('#progress_bar').css('background-size', '30%');
});

More compatible

Otherwise I would use a div within #progress_bar to contain the actual background like so:

<div id="progress_bar">
    <div id="progress_bar_line" class="meter-bg"></div>
</div>

Then you can just set the width property of the inner div:

$('input').click(function(){
    $('#progress_bar_line').css('width', '30%');
});
Treffynnon
  • 21,365
  • 6
  • 65
  • 98
0

Another option would be to overlay a div (div2) with a green background on top of the white div (div1) and set it's width to div2.width = div1.width * .30

Leslie Hanks
  • 2,347
  • 3
  • 31
  • 42