jQuery - make div get wider every second

Question

First of all, I have to warn you, my English is not so good...

OK, here is my problem: I have a progress bar that gets wider every second based on percents.

Every second I want to add 1.67 / [max] percent. [max] = 100% (how many minutes it'll take). (if [max] = 10 - the progress bar will take 10 minutes)

My code WORKS, but only if the number (after dividing) is bigger than 0.3 (something like that).

So it means that if the progress bar will take 1 minute ( [max] = 1 ) the code will work, because the number is 1.67 after dividing. But if I make max to be 15 minutes, it wont work - WHY?!

This is my code: (I added some comments to make it easier)

<script>
function updateProgress() {
  /*Get Progress Width (in percents)*/ var progress = ( 100 * parseFloat($('#arena_bar').css('width')) / parseFloat($('#arena_bar').parent().css('width')) );
  var corrent = progress;
  var max = 1; // one minute
  var add = 1.67 / max;

  if (progress < 100) {
      corrent += add;
      $("#arena_bar").css("width", corrent + "%");
      setTimeout(updateProgress, 1000); // update every second
  }
}
updateProgress();
</script>

Please Help !

Answer 1

The problem is that you're not making the width grow enough for the percentage to change in CSS, so it stays constant (at least that's what it looks like). The thing is, you don't really need all that.

Here's a js fiddle of your code, changed to work. I changed the time delay to make it run faster, you can change it back to 1000ms if you want.

And the code:

HTML:

<div style="width:400px; background-color:black">
<div id="arena_bar" style="background-color:navy; width:10px">&nbsp;</div>
</div>

JS:

  /*Get Progress Width (in percents)*/ var corrent = ( 100 * parseFloat($('#arena_bar').css('width')) / parseFloat($('#arena_bar').parent().css('width')) );
function updateProgress() {
  var max = 15; // one minute
  var add = 1.67 / max;
  if (corrent < 100) {
      corrent += add;
      $("#arena_bar").css("width", corrent + "%");
      setTimeout(updateProgress, 50); // update every second
  }
}
updateProgress();

Answer 2

For the record, jQuery is not setting your computed widths as real percentage values, it sets them using pixel values.

In this example you can see your written widths and the read ones.

function updateProgress() {
    var progress = (parseInt($('#arena_bar').css('width')) / parseInt($('#arena_bar').parent().css('width')))*100;
    $('.progress').text('Read: ' + progress + ' %');

    var max = 1;
    var add = 1.67 / max;

    if (progress < 100) {
       progress += add;
       $('.debug').html('Written: ' + progress + ' %');
       $("#arena_bar").css("width", progress + "%");
       setTimeout(updateProgress, 1000); // update every second
    }
}
updateProgress();

http://jsfiddle.net/9PjqZ/1/

As you can see there is a difference to the values when you read them in the next function call. There are no problems when the difference between written and read values is above an unknown limit. When they come too close to each other your idea won't work anymore.

You need to save the current percentage outside the css and only write to css but not read from css.