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
MorningLight
 
 
Posts: 95
Joined: Tue Jul 04, 2017 12:15 pm

Progress Script - many instances?

Post by MorningLight » Mon Jul 17, 2017 10:39 pm

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.

MorningLight
 
 
Posts: 95
Joined: Tue Jul 04, 2017 12:15 pm

Re: Progress Script - many instances?

Post by MorningLight » Mon Jul 17, 2017 11:04 pm

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: 19282
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Progress Script - many instances?

Post by Pablo » Tue Jul 18, 2017 5:19 am

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

Who is online

Users browsing this forum: No registered users and 4 guests