Overriding the JQuery $ui.progressbar to change its width

Question

After a few hours, I was able to override the function responsible for changing the element width that corresponds to the progress bar widget, managed by jQuery UI v1.12.1 - 2016-09-14.

First I wanted the progress bar (completed) to fill completely within the column of a table. However, by default, the "ui.progressbar" widget writes "100%" in the width of the element. However, I needed the width to be "calc(100% + 30px)".

Below the problem, and then I will give the answer to my problem. I hope it will be useful to someone, as it was for me.

Default cenary: JQuery UI set 102% to the width of the first div

<td class="ui-progressbar ui-widget ui-widget-content ui-progressbar-indeterminate" id="divProgress-255" role="progressbar" aria-valuemin="0">
   <div class="ui-progressbar-value ui-widget-header" style="width: 102%;">
         <div class="ui-progressbar-overlay"></div>
   </div>
 </td>

jquery-ui.js (line 133467): Line of JQuery UI responsible for this writing

this.valueDiv.toggle( this.indeterminate || value > this.min ).width( percentage.toFixed( 0 ) + "%" );

The progress bar image is as below

Question: How to make the $ui.progressbar widget set the width of this element with "calc(percentage + increment)" and no more "100%"?

score 2 · Answer 1 · answered Sep 22 '18 at 08:15

My solution

1) I created a _calc function and overrided the _refreshValue function as bellow:

$.widget("ui.progressbar", $.ui.progressbar, {
    _calc: function(percentage) {
        percentage = percentage.toFixed(0);
        return this.options.calc ? ("calc("+percentage+"% + "+this.options.calc_inc+"px)") : percentage+"%";
    },
    _refreshValue: function() {
        this._super();
        this.valueDiv.width( this._calc(this._percentage()) );
    }
});

2) I configured my progress bar in a column:

function progressBarSettings() {
    $('td[id^=divProgress]').progressbar("option", {
       calc: true,
       calc_inc: 30
    });
}

3) The progress bar image is as below:

4) My references: Extending widgets 1 or Extending widgets 2

Overriding the JQuery $ui.progressbar to change its width

1 Answers1