Question

I want a ProgressBar for Password strength, so Is there a way to write text inside progressbar. I have try many way but nothing find, can any one help me to do this with event handler to control. My code is….

$( "#progressbar" ).progressbar({
        value: score
    });

outputResult($( "#progressbar" ), score);

$("#inputPassword").bind("keyup", checkVal);

function outputResult(selecter, value)
{

    selecter.progressbar( "option", "value", value);
        var selector = "#progressbar > div";
        $(selector).css({ 'background': 'Red' });
        $(selecter).text(value + ' %');

}

Answer 1

You could create an inner span element to contain the text:

<div id="progressbar">
    <span class="text">
    </span>
</div>

And then define an appropriate style for that element:

.text { 
    color: white; 
    position: absolute;
}

Then in your outputResult function:

$("#progressbar").progressbar("option", "value", value);
$("#progressbar span.text").text(value + "%");

Here’s a working example: http://jsfiddle.net/v48eP/