خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

Matching progress bar display to percent display

Hi, i have this progress bar that i have been tinkering with. The issue is that the #% which displays on the bar does not match the length of the bar. For example the percent displays 30% but the bar itself is not 30% of the total width. I must be missing something here.

a few items to know here:

1. the total bar length itself via css is static at 400px so regardless of the other input, 400 = 100% of the bar length
2. totsec is the total seconds it should take to get to 100%
3. count is just a loop count to calculate how much has been done already
4. perc is the percentage that displays on the page.

I am fairly sure the perc is correct, i did try to use the same formula for the progressBarWidth but it just didnt work very well at all.

What am i missing here that im not seeing?

Code:

function startTimerBar(howlong, $element)
{
   
    var totalsec = parseInt(howlong);  //total sec it will take
    var count = 0;
    var perc;
 
    function timerbar()
    {
       
      count = count + 1;
      perc = ((count/400) * 100);
      perc = Math.round(perc);
       
      if(count < totalsec)
      {
        //continue the loop
        progressBarWidth = ((count * $element.width()) / totalsec);
        $element.find('div').animate({ width: progressBarWidth }, 500).html(perc + "% ");
         
      }else{
             
              clearInterval(sb);
         
            }//close else

  };
  timerbar(); 
  var sb = setInterval(timerbar, 1000);
   
}//close function
Im thinking we only need 3 things for the project

1. static value which would be 100% of target (what are we trying to reach)
2. incremental value - counter
3. result - where are we

so in this line:

Code:
progressBarWidth = ((count * $element.width()) / totalsec);

//total sec is our static value
//increment is the count
//the result is progressBarWidth

//im not sure where $element.width fits in ?? 

//so im thinking it should actually be

progressBarWidth = ((count / $element.width()) * totalsec); //because totalsec acts as our max value


Thanks :)




UPDATE: I think i might have it after reconsidering the static value for each and focusing on what the intent for each is.

Code:
//for example
//one i realized that all we are trying to do is get a simple percent which has nothig to do with the progress bar at all, then it came to me.

    perc = ((count/totalsec) * 100);
      perc = parseInt(perc);

//so instead of using 400 which is the static length of the bar, i use totalsec which serves as our static max value for the percent.

//and then
progressBarWidth = ((count / $element.width()) * 100);

//again i was mixing the two processes together which they should be individual.
// so instead of using totalsec we just use 100 and we apply the same foruma to this as we did for the percentage above.  where_are_we / where_we_need_to_be * 100
This sounds right and first test looked good, ill test it with a larger file.

NOPE grrrrr, the percent is right but the bar is wrong.... what am i missing here on the bar width code ?

so the perc is the percent of totalsec
while the progressBarWidth is the percent of 400 and this is what is tossing me a curve because its the percent of 400 but 400 is represented as 100% by totalsec. Ill check out a math forum and see if i can find some math examples. :)

OK i think i have it now... the bar is half way up the progress display at 50%

The issue was i was using the loop counter for the bar percent calculation and i should have been using the perc result, this way we can convert the percent of totalsec to percent of 400.

WHEWWW!!! my brain is tired lol

Code:
progressBarWidth = (( perc * $element.width()) / totalsec);
I think i still have more work to do on this - it appears fine on the screen but it dont come out right on paper. So if the perc is 20 percent of total sec i need to convert that into 20 percent of 400 for the bar.

well that seems to work after dif files sizes in testing... so i guess ill go with that.

برچسب: نویسنده: آیلین رضوانی تاريخ: سه شنبه 26 دی 1396 ساعت: 9:14

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه