Blogs

This article explains how to display the percentage info in a Progressbar. You need to reference the jQWidgets scripts and styles.

<link rel="stylesheet" href="jqx.base.css" type="text/css" />
<script type="text/javascript" src="jqxcore.js"></script>
<script type="text/javascript" src="jqxprogressbar.js"></script>

Initialize the Progressbar: Add a DIV element to the HTML markup with Id = jqxProgressBar and use the script below to initialize the progressbar and set its value.

$("#jqxProgressBar").jqxProgressBar({ width: 250, height: 25, value: 50 });

Create a function that will display the percentage info. In the ‘displaytext’ function below we get the value of the progressbar with this code:

$("#jqxProgressBar").jqxProgressBar('value')

Then we create a new SPAN element and add the progressbar text to it. We append the SPAN element to the document’s body. To position the element with the percentage info in the middle of the progressbar, we need to get its size and the progressbar offset. After that, we set the appropriate values to the element’s left and top css properties.

var displaytext = function () {
   var text = $("#jqxProgressBar").jqxProgressBar('value') + '%';
   var element = $("<span style='position: absolute;'>" + text + "</span>");
   $(document.body).append(element);
   var width = element.width();
   var height = element.height();
   var location = $("#jqxProgressBar").offset();
   element.css({ left: location.left + $("#jqxProgressBar").width() / 2 - width / 2, top: location.top +    $("#jqxProgressBar").height() / 2 - height / 2 });
}

Finally we call the displaytext function.

displaytext();

Here’s the result: