Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Aligning the text

When I use the above command, the value is shown below the progress bar; center justified. However, I would like to change and place it in the middle of progress_bar_inner; center justified. Can somebody please help
related to an answer for: Manipulating the progress bar
asked Aug 17 by Sonal Budhiraja

2 Answers

0 votes
 
Best answer
Does this suit your needs?

<style>
.progress_bar_inner {
    text-align: center;
}

.progressSpan {
    color: white;
    font-size: 10px;
}
</style>

<script>
$(document).ready(function(){
    var inner = $('.progress_bar_inner');
    var progress = $(inner).attr('style').replace(/[^0-9%]/g, '');
    $(inner).append('<span class="progressSpan">' + progress + '</span>');
})
</script>


The color and font size can be adjusted in the CSS near the top.
answered Aug 17 by Zachary Platinum Sawtooth Software, Inc. (156,375 points)
No, I tried updating this. But can't see the values.
Hey we could work with this code after minor changes. Thanks!!
Can you share your .ssi with support@sawtoothsoftware.com so I can better see what's going on?
0 votes
Hi Sonal,

Please try using below script:

<script>
$(document).ready(function(){
    var outer=$(".progress_bar_outer").width();
    var inner=$(".progress_bar_inner").width();
    var percent=Math.round((inner/outer)*100);

    $("td.middle_cell").append("<table class='val'><tr><td>"+percent+"%</td></tr><table>");
    $("table.val").css("width",inner);
});
</script>


Regards,
Rahul Mittal
answered Aug 18 by Rahul Mittal Gold (11,135 points)
...