Question

I have the following snippet :

<div class="progress" data-value="10" data-show-value="true"></div>

It’s a progress bar that’ i’m trying to refresh to show progress of a background process.

A live example of code can be found here : http://themes.vivantdesigns.com/vpanel/demo/styles

I’d like to update the ‘data-value’ attribute; i’m using :

<script>
$(".progress").everyTime(1000,function(i) {
    var val = $(this).attr('data-value');
    val = val + 20;
    $(this).attr('data-value', val);
});
</script>

“val” is 10, right but it doesn’t change the attribute. Any idea why ?

Answer 1

Try something like this:

<script type="text/javascript">
$(".progress").everyTime("1s", function(i) {   
    $(this).attr('data-value', parseInt($(this).attr('data-value'), 10) + 20);   
});      
</script>

EDIT

If you’re looking to create a progress bar, you can check out the jQuery Progressbar:

$("#progressbar").progressbar({ value: ( STORED_DATA / TOTAL_DATA) });

EDIT

If you’re looking to display a progress bar in HTML5, it might be simpler to just use the Progress tag:

$("#progressBar").everyTime("1s", function(i){
    $(this).attr("value", parseInt($(this).attr("value"), 10) + 10);
});

<progress id="progressBar" max="100" value="0" />