0 Replies Latest reply on Oct 5, 2015 12:07 AM by mirg12

    Multiple number counters

    mirg12

      I'm new to edge and want to know how I can create multiple number counters for use on graphs. I have the bars animated to their respective heights and the number counter moves up using marginTop.

      So far I have this:

       

      // animate the graph bars

      sym.$("graph1")

              .animate({"height": "+200px"}, 1000);

      sym.$("graph2")

              .animate({"height": "+50px"}, 1000);

       

      //move the text box up

      sym.$('Text').animate({marginTop: '-=200px'}, 1000);

      sym.$('Text2').animate({marginTop: '-=50px'}, 1000);

       

      //animate the counter

      var counter_delay = 8;

      var max_count = 100;

      var present_count = 0;

      var timer = window.setInterval(stepUp,counter_delay);

      function stepUp(){

      present_count++;

       

      // Change the text of an element

      sym.$("Text").html(present_count+'%');

      if(present_count==max_count)

      clearInterval(timer);

      }

       

      If I duplicate it and change the name of the <div> eg: Text2

      I only get the second instance and it just keeps on counting up.

      Also, how can I get the bars to reset to 0 when the next graph is called for animation?

       

      Any suggestions would be greatly appreciated.