Hi @Pealco. How do I add a “%” to the counter code? I can’t get it working.
I need a counter to go up from 0% to 27.7%.
Hope it is clear enough
Hello @r_botman, there you go:
- In page preferences add the following code, (as was before, except the styling):
<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>
OPTION1
- Instead of create a H1, H2 and give it the class counter, do the following:
-
Add a “HTML Widget”
-
Insert inside the following code:
I'm increasing <span class="counter">27.7</span> % this year.
To style it add a class as you want and change everything, font, color, etc.
Or
- Add a H1, H2 what ever you want and add a text:
I’m increasing 27.7 % this year.
- Then with your mouse select only the
27.7and in the selected press the little icon “Wrap in Span”
- Then Select only the Span in the left side:
- Give it the class on the right:
counter.
And there you have (both options):
Hope it helps you…
I still have a question @Pealco. Is it possible to do one counter in a column and copy that column and change the details of the counter?
If I try this only the last counter in the last column works.
With each counter in a different column it is more easy I think to style them in the different breakpoints. So not all 4 in a row but 2 next to each other and the other 2 below
Is there a way?
Hello @r_botman do you mean something like this:?
The only thing you need is in each “SPAN” add 2 classes:
- “counter” - same class for each counter you have independently where they are in the page
- “class1”; “class2”, “class3” or whatever class you want to give to the counter to change style for each counter.
The example I give you there are the classes I give them:
Resuming: Class “counter” for each counter and an adicional class to style them individually, “font1”, “font2”, “font3”, etc…
EDIT:
Or you can add the “styling” class to the H1, H2, etc and you affect the complete phrase not only the SPAN.
Hope it helps you.
2 Likes
Thanks again @Pealco. It works great. Only when I put the code in the page settings I get a warning about a duplicate. Any idea what can cause this?
Hey @r_botman,
Looks like you have the script in the page header. Have you also got the same script in the page footer?
I have 2 other scripts in the footer. not the same
Oh I just saw the warning in the image. You don’t need to add jQuery because Blocs already adds it. (It appears to be loading twice, if I’m correct)
If I remove this:
the counter doesn’t work anymore.
Hello @r_botman, all the CDN calling jQuery are needed to this counter works, effectively you and @PeteSharp have reason when you said that Blocs already have jQuery. But check here what @Norm said about custom brics:
So the only line you could take from code is this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
All the others need to be there to this snippet code works.
But for my experience UNTIL NOW I have a lot of references for this duplicated library and never had any problem with it…
1 Like
Thanks @Pealco. When I preview in Blocs now the Typing script does not work, when I preview in Safari it works, but when I upload it to the internet it doesn’t work in Safari. Any suggestions?
what are the preferences when you export it? Do you have lazy load checked? Normally I have problems with my snippets when I check lazy load…
1 Like