Add Animated Counter Up SOLVED!

I Need Help
1

I am trying to ad this counter to a site [https://codepen.io/semenchenko/pen/ReGpVG](http://Code is Here)

I put the html in a html code brick uploaded the css and put the js in the header and it doesnt do anything. Can someone help out? This is a great counter up that can be used for anything

Thanks

1 Like
2

Hello @cableguy30 you can add like this:

Open a HTML bric and add the following code:

<script src="js/waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
  <span class="counter">1,234,567</span>
    <script src="js/index.js"></script>

Then in the HTML Code of the page add the following code in the Header:

<meta charset="UTF-8">
  <title>CounterUp</title>
    <link rel="stylesheet" href="css/normalize.min.css">  
      <link rel="stylesheet" href="css/style.css">

Then add the folowing files to the Header Files Attachments:
Files.zip (86.4 KB)

Try if it works…

1 Like
3

Awesome it works!! Thanks so much hopefully someone else looking for a counter up animation will find this useful

4

@cableguy30 add in your topic what this script do so anyone can find this, add - Animated Counter or something similar… and the SOLVED word…

5

one other thing How would I make this responsive?

6

Yes use this file instead:
style.css.zip (712 Bytes)

Remove the style.css and replace by this one…

Check if it works…

7

Absolutely perfect. somebody should make all of this into a bric How would you control the speed?

8

Try please if it work…
I just don’t know how to make it interact with the different fonts and sizes…

COUNTER.bex (119.6 KB)

1 Like
9

WOW !!! It works awesome !! This should be added to brics section you are a rockstar!

10

You can style it anyway using custom class just need to find out how to center it probally put it in a div ?

11

almost!! There is noway to change the numbers?

12

Thats what I say to you, I don’t know how to make interact the fields from the different files.
Don’t use the bric but the first way… then in the html you can change the number.

13

Good evening community.

I am using the @Pealco solution for an animated counter, but I have a problem: placing four counters in the same block, only one of them works (the last one).

Any serious solution would be appreciated.

thanks for your help

Spanish:
Buenas noches comunidad.

Estoy utilizando la soluciĂłn de @Pealco para un contador animado, pero tengo un problema: al colocar cuatro contadores en el mismo bloque, solo funciona uno de ellos (el ultimo).

Alguna soluciĂłn seria de agradecer.

Gracias por su ayuda

14

Hello @Wam,
instem of using the html code above use this one:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
<link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="./css/style.css">

<div class="container">
  <div class="row">
    <div class="col-sm">
      <center><h1><span class="counter">2,523</span></h1>
      <h3>Counter 1</h3>
      <i class="fa fa-users"></i>
    </center></div> 
    <div class="col-sm">
      <center><h1><span class="counter">63,075</span></h1>
      <h3>Counter 2</h3>
      <i class="fa fa-desktop"></i>
    </center></div>
    <div class="col-sm">
      <center><h1><span class="counter">12,218</span></h1>
      <h3>Counter 3</h3>
      <i class="fa fa-coffee"></i>
    </center></div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.counterup/1.0/jquery.counterup.min.js"></script>
<script src="./js/index.js"></script>

Tell me if it works for you…

15

Hi @Pealco

thanks for your help.

Your code works perfectly if it is used in a single widget with the 3 counters.
But if you use a second widget in another block with the same code, then neither widget works.

It seems that I can only use your code once.

Spanish:
Hola @Pealco

gracias por tu ayuda.

Tu cĂłdigo funciona perfectamente si se utiliza en un solo widget con los 3 contadores.
Pero si utilizas un segundo widget en otro bloque con el mismo cĂłdigo, entonces no funciona ninguno de los dos widget.

Parece que solo puedo usar tu cĂłdigo una sola vez.

16

how many you need? and are they together or have to be in different places in the same page?

17

I need 4 counters in one group and then on the same page but in another area I need a group of 3 counters.

Thanks for your help

Spanish:
Necesito 4 contadores en un grupo y luego en la misma pagina pero en otra zona necesito un grupo de 3 contadores.

Gracias por tu ayuda

18

Ok, lets try then the following:

  • Delete everything that I told you and files I send you

  • Create in wherever you want a H1, H2, H3, paragraph whatever and give it the class “counter”

  • In the page definitions, add the following code:

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.counterup/1.0/jquery.counterup.min.js"></script>

  <script>
      jQuery(document).ready(function( $ ) {
          $('.counter').counterUp({
              delay: 10,
              time: 1000
          });
      });
  </script>

And that’s it, then you can costumize everything font, color, alignment, etc…

Try and let me know…

2 Likes
19

Everything has worked very well.

I can use the number of counters I need on the same page and even placed in different blocks.
And you can customize everything: typeface, color alignment, insert an icon, headers of any type, etc …

As always, very grateful for your help.

With best regards.

Spanish:

Todo ha funcionado muy bien.

Puedo utilizar el numero de contadores que necesite en la misma página e incluso colocados en diferentes bloques.
Y se puede customizar todo: tipo de letra, color alineación, insertarle un icono, cabeceras de cualquier tipo, etc….

Como siempre muy agradecido por tu ayuda.

Un cordial saludo.

20

You’r welcome.

Here to help when I can…

2 Likes