CODEWITHSUNDEEP
javascriptjquery-uiprogress-bar
Thorsten
Thorsten

Reputation: 13181

Display value in jQueryUI ProgressBar

I've set up a simple jQuery UI ProgressBar:

<script type="text/javascript">
    $(function() {
        $("#progressbar").progressbar({
                value: 35
        });
    });
</script>
<div id="progressbar">  </div>

Among other things, I'd like to display some text in the progress-bar (for starters, I'd just use the "value").

I can't seem to get this to work.

Bonus Question: How do I format the displayed text (e.g. color, alignment)?

Upvotes: 26

Views: 27693

Answers (6)

basitjee
basitjee

Reputation: 21

    <style>
        #progress {
            height: 18px;
        }

        #progress .ui-progressbar {
            position: relative;
        }

        #progress .ui-progressbar-value {
            margin-top: -20px;
        }

        #progress span.caption {
            display: block;
            position: static;
            text-align: center;
        }

    </style>
</head>
<body>
    test
    <div id="progressbar"></div>
    <br>
    test2
    <div id="progressbar2"></div>

    <script>
        $("#progressbar").progressbar({
            max : 1024,
            value : 10
        });

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

        $(document).ready(function() {
            $("#progressbar ").children('div.ui-progressbar-value').html('10');
            $("#progressbar2 ").children('div.ui-progressbar-value').html('50%');

        });

    </script>

</body>

Upvotes: 0

rynop
rynop

Reputation: 53709

Instead of introducing another element (span) and a new style, leverage what is already there like this:

var myPer = 35;
$("#progressbar")
    .progressbar({ value: myPer })
    .children('.ui-progressbar-value')
    .html(myPer.toPrecision(3) + '%')
    .css("display", "block");

The css("display", "block") is to handle the case where the value is 0 (jQuery UI sets a display: none on the element when the value is 0).

If you look at the source of The demo, you'll notice that a <div class="ui-progressbar-value"> is added. You can simply override this class in your own CSS, like:

.ui-progressbar-value {
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    padding-left: 10px;
}

Upvotes: 34

user1477388
user1477388

Reputation: 21440

I used this:

<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>

Upvotes: 0

lucianolev
lucianolev

Reputation: 529

After fiddling around with some solutions, based on the answers here, I've ended up with this one:

Html:

<div id="progress"><span class="caption">Loading...please wait</span></div>

JS:

$("#progress").children('span.caption').html(percentage + '%');

(To be called inside the function that updates the progressbar value)

CSS:

#progress {
  height: 18px;
}

#progress .ui-progressbar {
  position: relative;
}

#progress .ui-progressbar-value {
  margin-top: -20px;
}

#progress span.caption {
  display: block;
  position: static;
  text-align: center;
}

Advantages:

  • Caption is centered with no harcoded positioning (necessary if caption width changes dinamically)
  • No JS strange manipulation
  • Simple and minimal CSS

Upvotes: 7

Clay
Clay

Reputation: 11635

This solution allows for a flexible width based on the text as well as centering the text, styling the text, etc. Works in Chrome, FF, IE8, and IE8 in compatibility mode. Didn't test IE6.

Html:

 <div class="progress"><span>70%</span></div>

Script:

$(".progress").each(function() {
    $(this).progressbar({
        value: 70
    }).children("span").appendTo(this);
});

CSS:

.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}​

Working sample: http://jsfiddle.net/hasYK/

Upvotes: 2

Tri
Tri

Reputation: 535

The way I did it was:

<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>

You can adjust the margin-top and margin-left so that the text is in the center of the progress bar. Then you apply the progressbar plugin for the elements which have class progressbar in the javascript section of the page

Hope this help

Upvotes: 8

Related Questions