CODEWITHSUNDEEP
jquery-ui
Imran Khan
Imran Khan

Reputation: 2401

jQuery-UI ProgressBar

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 + ' %');

}

Upvotes: 1

Views: 3491

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

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/

Upvotes: 3

Related Questions