Progress Script - many instances?

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Progress Script - many instances?

Post by MorningLight »

Hi All,

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>
The "block" works as a charm and it's easy to copy/paste its bars to any amount.
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.
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Progress Script - many instances?

Post by MorningLight »

I found a PARTIAL solution - perhaps a "dirty" one - but it functions. I just added a "2" into each variable-name of the script, as shown:

Code: Select all

<style>
.progress-label2 
{
   position: absolute;
   left: 50%;
   top: 4px;
   font-weight: bold;
   font-size: 14px;
   font-family: Arial;
   color: #FFFFFF;
}
</style>

<script>
$(document).ready(function()
{
   var $progressbars2 = $('.ui-progressbar');
   
   $progressbars2.each(function() 
   {
     var $obj = $(this);
     $obj.data('value', $obj.progressbar2('option', 'value'));
     $obj.data('done', false);
     $obj.progressbar2('option', 'value', 0);
    
     $obj.css('position', 'relative');
     $obj.append('<div class="progress-label2">0%</div>');
   });
   $(window).bind('scroll', function() 
   {
      $progressbars2.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.progressbar2('option', 'value', val);
                  $obj.find('.progress-label2').text(val + '%').css('color', (val > 50) ? "#FFFFFF" : "#265A88");
               }
            });
         }
      });
   }).triggerHandler('scroll');
});
</script>
The problem is that it functions ONLY if in different LAYOUT-GRIDs.
If both are in different columns of a same LayoutGrid, everything stops its functioning... :(

Do you know how to implement this a same grid?
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Progress Script - many instances?

Post by Pablo »

I'm sorry I cannot help you with programming related questions.
For me updating the script may also take several hours.
The provides script was designed to be used only once.
Post Reply