CODEWITHSUNDEEP
javascripttwitter-bootstrap
Henry
Henry

Reputation: 5313

Javascript timing issue on page load - and bootstrap progress bar

I'm not that great with javascript and i found this perfect fiddle that i'd like to use here:

http://jsfiddle.net/5w5ku/1/

The problem I have is that I am trying to make it so that it lasts ten minutes.

I've tried tweaking the code but I can't get it to be 10 minutes. I'm very grateful to all that can help.

Here's the Javascript:

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 40);
    }
    $bar.text($bar.width() / 4 + "%");
}, 800);

Thanks v much

Upvotes: 1

Views: 180

Answers (3)

hereandnow78
hereandnow78

Reputation: 14434

Version 1 (not so reliable, see @flup's comments)

some things to think through

you want your progress to take 10 minutes which is 600 seconds or 600.000 milliseconds.

1000 * 60 * 10 = 600.000

when your bar width is 400px (100%) you can at most do 400 steps (there isnt a smaller unit than 1px)

so if i divide 600.000ms / 400 steps, i get 1500ms, which means i should add every 1.5s one pixel. which sounds quite good.

600.000 / 400 = 1500

that would result in a code like this:

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 1); // add only 1px per step
    }
    $bar.text($bar.width() / 4 + "%");

}, 1500); // wait 1500ms per step

EDIT

Version 2

result of the discussion (thanks @flup) is the probably most reliable version (if you want to reach the 10 mins as accurate as possible):

var mins = 10; //change this to increase or decrease minutes
var tenMinsInMillis = 1000 * 60 * mins;
var finishedTS = (new Date()).getTime() + tenMinsInMillis;
var $bar = $('.bar');
var progressInterval = 1000;
var now, remaining, pWidth;

var setBar = function (pWidth) {
    $bar.width(pWidth + '%');
    $bar.text(Math.floor(pWidth) + "%");
};

var progress = setInterval(function () {
    now = (new Date()).getTime();
    remaining = finishedTS - now;
    pWidth = 100 - (remaining * 100 / tenMinsInMillis);

    setBar(pWidth);

    if (remaining < progressInterval) {
        clearInterval(progress);
        setTimeout(function () {
          setBar(100);
          $('.progress').removeClass('active');
        }, remaining);
    }

}, progressInterval);

http://jsfiddle.net/jLu8S/1/

(note, that i set the duration (var mins) to 1 minute, that you don't have to wait 10 mins in the fiddle...)

Upvotes: 2

user405398
user405398

Reputation:

Check this out!

var date = (new Date()).getTime();
var mins = 10;//change this to increase or decrease minutes
var tenMinsInMillis = 1000 * 60 * mins;

var progress = setInterval(function () {
    var $bar = $('.bar');
    var now = (new Date()).getTime();
    var elapsed = now - date;
    var pWidth = (elapsed / tenMinsInMillis) * 100;
    if (elapsed >= tenMinsInMillis) {
        clearInterval(progress);
        $bar.width('100%');
        pWidth = 100;
        $('.progress').removeClass('active');
    } else {
        $bar.width(pWidth + '%');
    }
    $bar.text(Math.floor(pWidth) + "%");
}, 1000);

Upvotes: 2

jezztech
jezztech

Reputation: 11

Try this fiddle: http://jsfiddle.net/8F492/1/

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 0.66666666666);
    }
    $bar.text($bar.width() / 4 + "%");
}, 1000);

I made it run every second and the total width was 400 so I divided that by 600 (because there's 600 seconds in 10 minutes) which gave me 0.66666666666. I made it increment by 0.66666666666 instead and it looks like it should count up to ten minutes.

Upvotes: 0

Related Questions