0

I want to increase the width of a progressbar by 10% each time I click on a button:

<div id="#progressBar" style="width:50%"> </div>

I want to increase the width of the progress bar above by 10% when I click on a button.

I tried this but it doesn't work:

$("#increaseButton").click(function() {
     $("#progressBar").css("width",$("#div2increase").width + 10 );
});

Please help !

The current width of progress bar can be any value from 0% to 100%. And it's unknown at the time of increasing it by 10%

Shika Taga Nai
  • 73
  • 1
  • 3
  • 11
  • CSS width is returned as a string and you can't add a string to an integer. Therefore you have to get the value of the CSS width, turn it into an integer, add it and then set the value. Look at this here http://www.w3schools.com/jsref/jsref_parseint.asp – Max Baldwin Sep 19 '14 at 17:40
  • When you define a width without percentage for css, you have to add 'px' to the end. – Kuzgun Sep 19 '14 at 17:54

2 Answers2

0

The following code increases a bar of 10% at click on a button. When bar reachs 100%, you cannot increase size any longer.

It is very basic one, but I hope it help you start.

http://jsfiddle.net/x8w2fbcg/6/

 <div id="progressBar">bar</div>
    <div id="progressBarFull"> &nbsp;</div>
    <button id="btn" type="button">enlarge</button>



    $( "#btn" ).click(function() {
        var curSize = $("#progressBar").width();
        var fullSize = $("#progressBarFull").width();
        if(curSize < 100) {
            var increment = fullSize/ 10;
       $("#progressBar").css('width', '+=' + increment);
        }
    });


    #progressBar {
        position: fixed;
        height: 20px;
        width: 0px;
        background-color: red;
    z-index: 10;    
    }
    #progressBarFull {
        position: fixed;
        height: 20px;
        width: 100px;
        background-color: gray;    
    }
    #btn {
          position: fixed;
        top: 100px;  

    }
GibboK
  • 71,848
  • 143
  • 435
  • 658
0

For you're using %, an element will inherit the % from it's parent width, so you need to get the actual % width of the progressBar before adding 10%

$("#increaseButton").click(function() {
  var $bar = $("#progressBar");
  var $barParent = $bar.parent();
  var perc = ~~($bar.width() * 100 / $barParent.width());
  if(perc<100) $bar.css({ width : (perc+10) +"%" });
});
*{margin:0;}
#progressBar{height:30px; background:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progressBar" style="width:50%"></div>
<button id="increaseButton">INCREASE</button>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313