Customizing the width of the JQuery $ui.progressbar by overriding its properties

After spending some time, I successfully overrode the function that controls the width of the progress bar element in the jQuery UI widget version 1.12.1 from September 14, 2016.

Initially, I needed the progress bar to completely fill a column in a table. However, the default behavior of the "ui.progressbar" widget sets the width of the element to "100%", whereas I required it to be "calc(100% + 30px)".

I faced this issue and later found a solution which I am sharing here, hoping it will benefit someone else as it did for me.

Initial Situation: JQuery UI was setting the width of the first div to 102%

<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): The specific line in jQuery UI responsible for this behavior

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

Representation of the progress bar below

https://i.stack.imgur.com/bX44u.png

Inquiry: How can I adjust the width set by the $ui.progressbar widget to use "calc(percentage + increment)" instead of just "100%"?

javascriptjqueryhtmlcssjquery-ui

Answer №1

Here is my approach:

1) I devised a custom function called _calc and modified the existing _refreshValue function as shown below: 

$.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 set up my progress bar within a column:

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

3) The visual representation of the progress bar looks like this:

https://i.stack.imgur.com/6vEt3.png

4) For further information, you can explore these resources: Extending widgets 1 or Extending widgets 2

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Maximizing Space: A Guide to Setting BootStrap Navbar on the Right Side of the Page with Dropdown Width

Take a look at the image below. There is a navbar toggle button on the upper right corner of the page. When I expand it, the dropdown items occupy the entire width of the page, causing an issue where clicking anywhere within the red box triggers the dropdo ...

htmlcssangulartwitter-bootstrap

Issue with Bootstrap 4 columns overlapping upon screen resizing

Whenever I use a row with 4 columns within a container that has 3 columns, the text file overlaps with the column containing an image when the screen size is reduced or viewed on an iPhone. Take a look at the code snippet and screen capture provided below ...

htmlcsstwitter-bootstrapbootstrap-4

I am having trouble locating elements, both in the browser inspector tool and through Selenium automation

I've been attempting to capture elements from a specific website listed here: However, when I navigate to the element, right-click, inspect, and attempt to copy the CSS selector, ID, or XPath to search for the element using Ctrl + F, it seems impossi ...

htmlgoogle-chromeselenium-webdriverweb-inspector

Nuxt router directing to incorrect URL upon refreshing the page

Let me show you exactly what I mean by setting up a demo Nuxt blog at https://example.com/nuxtblog/. This demonstration includes articles populated by the @nuxt/content package. The website has been generated statically using the nuxt generate command. Fol ...

javascriptvue.jsnuxt.jsserver-side-rendering

Ways to authenticate custom kinds in JSON schema?

When working with JSON Schema, one of the challenges I have faced is the limitation on supporting ‘double’ and ‘float’ types for numeric values. While using AJV in JavaScript to validate a schema, it fails due to this restriction. Is there a way to ...

javascriptjsonvalidationschema

The issue with JqueryDataTable is that it does not retain the page number when the page is

Utilizing the Jquery Data table to showcase information, specifically with merged rows on the grid being loaded from a JSON variable. Everything is functioning as intended - however, there is a request to add a new row to the current grid. I've updat ...

jquerydatatables

What is the best way to include a swf video in a list of hyperlinks?

My current code displays an image inside a box, and I am looking to replace the image with either a swf video or .AVI video. I have the object video code to play a swf video, but I need the video to be played within the box where the image is currently l ...

javascripthtmlflashswfobject

Tips for eliminating the menu bar in the external window generated by an Electron application's URL

Looking for a solution to remove the menu bar from a window that opens with an external URL in an Electron application? Check out the code snippet below: windowObject.webContents.setWindowOpenHandler(() => ({ action: 'allow', overrideBrows ...

javascriptreactjselectronmenubarelectron-react

How can we show a div element when hovering over another element using css-in-js?

Is there a way to use material ui withStyles component in order to show information only on hover for a specific div? ...

javascriptreactjsmaterial-uicss-in-js

How to make the slides in a Bootstrap 4 carousel slide in and out with animation

I'm currently utilizing the bootstrap 4 carousel and have made some customizations to fit my project needs. The main requirement is: When I click on the next slide, the current next slide should become active and a new next slide should load with ...

javascripthtmljquerycssbootstrap-4

Animating a JQuery Slider using code from scratch

I'm attempting to dynamically alter/animate a JQuery slider. In this scenario, there are two arrays present: one for the values that need to be modified and another for the durations between modifications. By monitoring the console, you'll observ ...

javascriptjqueryanimationjquery-ui-slider

Display a custom toast from a list using Bootstrap 5

I've been utilizing the toast feature from Bootstrap, and it works perfectly when displaying a single toast. However, I encountered an issue when trying to display a specific toast, like an error toast, from a list of predefined toasts. It ended up sh ...

csstoastbootstrap-5

Elements in Bootstrap Container class failing to align properly

Hello Everyone, I am attempting to achieve the same layout as demonstrated in [original image] where the "browse collection" div and the "request brochure" div are aligned with the four items above them. My approach involves using Bootstrap, and I assume ...

htmlcsstwitter-bootstrap

Having issues with the functionality of the jQuery HTML function

I'm working on this jQuery code snippet: $('#wrapper').html('<img src="/loading.gif">'); var formdata = $("#validateuserform").serialize(); $.post("/userformdata.php",formdata,function(html){ if(html) ...

javascriptjqueryhtml

Challenge with NodeJS, Angular Seed, Gulp, Jasmine, and Karma

Starting an Angular Seed project and everything was working fine. I managed to launch the Jasmine browser, but encountered issues with my specs not working. In an attempt to fix this, I added a karma.conf file, which unfortunately broke the Jasmine browser ...

javascriptnode.jsangularjsgulpkarma-jasmine

"Efficient Querying with MYSQL XDEVAPI Through Multiple OR (II) Requests

Currently, I am utilizing the XDEVAPI and attempting to incorporate the or(||) statement in JavaScript. However, it appears to malfunction after 1 or/(||) statements have been included. I need to fetch data from the database based on 5 distinct statuses: . ...

javascriptmysqlmysql-x-devapi

Create unique error messages using Vue validators

Two fields named text and email are included in my template. Below is the structure of the template: HTML <!DOCTYPE html> <html> <head> <title>Vue - Validations</title> <script src="Libraries/vue/vue.min.js&qu ...

javascriptvue.jsvalidationvue-validator

Vue.js / Nginx / Node.js - Error 413: Payload Too Big

My frontend is built using Vue.js and is hosted on an nginx server in production. Here's a snippet of my nginx.conf configuration: server { listen 80; server_name localhost; root /usr/share ...

javascriptnode.jsexpressfile-uploadmulter

Dynamic HTML Generation using ASP.NET

Below is the code snippet that needs to be optimized: <asp:TemplateField HeaderText="Item Data"> <ItemTemplate> <%# DataBinder.Eval(Container.DataItem, "ItemData1") %> <br />&nbsp;&nbsp; <%# D ...

c#asp.nethtmldata-bindingitemtemplate

Display hyperlinks upon hovering over text

In the sign-up form, there are options for two different types of users: teachers and students. When the sign-up option is selected, a drop-down menu with choices for teacher and student will appear. However, I would like it to function more like other w ...

javascriptphpcss