CODEWITHSUNDEEP
javascriptjqueryjquery-ui
hilarl
hilarl

Reputation: 6880

changing the values of jquery ui progress bar

i am trying to change the values of the progress bar widget to accept a json string i am getting which is something like:

{
  'totalDays' : 31,
  'daysTaken' : 20
}

so i want the 'totalDays' to be the total value of the progress bar (total length) and the 'daysTaken' to fill the progress bar.

according to the default docs, only the filled value is possible to change:

$(document).ready(function() {
  $("#progressbar").progressbar({ value: 37 });
});

Upvotes: 7

Views: 19582

Answers (2)

sharat87
sharat87

Reputation: 7526

This is how you set the value of jquery-ui's progress bar

$( ".selector" ).progressbar( "option", "value", 37 );

Source, the documentation at http://jqueryui.com/demos/progressbar/#option-value

Upvotes: 1

Matt Ball
Matt Ball

Reputation: 359826

There is a separate method to set the value after init.

var obj = {totalDays: 31, daysTaken: 20};
$("#progressbar").progressbar('value', obj.daysTaken/obj.totalDays * 100);

There is no configurable max value, but it's really not necessary since it is easy normalize values.

http://jqueryui.com/demos/progressbar/

Upvotes: 11

Related Questions