In Miscelaneous group I saw a script to build horizontal bars to show progress values.
I see its name is "Progress Script" and the HTML code is the following:
Code: Select all
<style>
.progress-label
{
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
font-size: 16px;
font-family: Arial;
color: #FFFFFF;
}
</style>
<script>
$(document).ready(function()
{
var $progressbars = $('.ui-progressbar');
$progressbars.each(function()
{
var $obj = $(this);
$obj.data('value', $obj.progressbar('option', 'value'));
$obj.data('done', false);
$obj.progressbar('option', 'value', 0);
$obj.css('position', 'relative');
$obj.append('<div class="progress-label">0%</div>');
});
$(window).bind('scroll', function()
{
$progressbars.each(function()
{
var $obj = $(this);
if (!$obj.data('done') && $(window).scrollTop() + $(window).height() >= $obj.offset().top)
{
$obj.data('done', true);
$obj.animate({scroll: 1},
{
duration: 3000,
step: function(now)
{
var $obj = $(this);
var val = Math.round($obj.data('value') * now);
$obj.progressbar('option', 'value', val);
$obj.find('.progress-label').text(val + '% das amostras').css('color', (val > 50) ? "#000000" : "#265A88");
}
});
}
});
}).triggerHandler('scroll');
});
</script>
But if we try to put two different "blocks" of this script in the same page, both stop working.
I want to put one block showing SECONDS values and, in other part of page, another "block" showing MEGABYTES.
Do you know how to put more than one instance of this "block" in a same page?
Thank you for any help.