Streaming live at 10am (PST)

How to transfer this JQuery code over to Webflow, counting up of numbers


#1

http://www.jqueryscript.net/animation/Animating-Numbers-Counting-Up-with-jQuery-Counter-Up-Plugin.html

What sections to the above code in the above link get pasted into Webflow's custom code??

thanks


#2

Hi, you can implement this, you will need to add the jquery code in the jquery.counterup.min.js and waypoint.min.js file to the Before Body panel of your Custom Code settings.

You can just copy the entire contents of those scripts from the source, and then paste that into your custom code as pictured:

Remember to wrap your script in the script tags. After that, then paste in this script as the last script in the Before Body section:

<script>
jQuery(document).ready(function( $ ) {
$('span').counterUp({
delay: 10, // the delay time in ms
time: 1000 // the speed time in ms
});
});
</script>

Save changes in the Custom Code settings page. Next go into your design mode, and create some layout you like, and add three text boxes to the page, where you want those positioned. Select each text box and select the default text, and click the Wrap with Span button. Do that for each Text Block text that you are turning into a span.

Next, select each of the spans, and give each one a class name, that tell what kind of data it is:

integers
floats
numbers with commas

So each span should now be named and shown in your navigator panel:

You can change the text in the spans to be the number you want the script to count up to. I put

For integers: 30000
For floats: 300.00
For numbers with commas: 300,000

Save your site and publish, it should work. If you want to adjust the speed of the countdown, you do that in the script that kicks off the plugins:

delay: 10, // the delay time in ms
time: 1000 // the speed time in ms

You can style the actual spans anyway you want in Webflow, now that you have the custom code in place. Try it out and see if it works for you...

Hope that helps... Cheers !


#3

thanks heaps @cyberdave , managed to get it to work!

Now something else have arisen from this.

First, it seems some of my headings throughout my site have changed to 'NaN'. I have no idea what that is supposed to represent, but i'm sure its caused by the jquery script that was used. Have a look at the published site to this see issue, http://yspn.webflow.com

edit: Ok, i just noticed that all 'spans' used on my site, regardless of class name, is displaying this 'NaN' error.
So its definitely something to do with the jquery script used.

thanks


#4

Hi @Amreet, yes that javascript code you found, which I just implemented per the instruction, is modifying the contents of your spans on your page to count from zero to some number you use to count up to. If some other span is encountered on your page, then if there is no valid number, the value is set to NaN. You would have to investigate this with the script code or get some coder to help you...

Normally we do not support custom script code, for situations exactly like this, where the script has updated something else (although unintentionally or not forseen) on your page that you do not intend. I provided this code above, as an example, how you would integrate a jQuery plugin, but when it comes to the jQuery plugin itself, how it works, and how it affects other things on your pages, then you would need to solve that yourself or with help from the forum...

My advice, is that if you need to implement this script code with the counting up numbers, is to learn a little jQuery from code academy:

http://www.codecademy.com/en/tracks/jquery

And then try to make those jQuery updates yourself, so that only the spans you target will be affected. If you still need help, you can always reach out on the forum to see if you can get some assistance for these custom code scripts etc.

I hope that can help direct you to next step...

Cheers, Dave


#5

@cyberdave

Solved!

Just had to add the specific class name to the end of the last script.

$('span.MYCLASSNAME').counterUp({

cheers for all your help Dave!


#6

Hi Dave, i couldnt find the waypoint js file in the link provided above. It seems without that j.s this won't work. Please can you help me out? Thanks


#7

This topic is now unlisted. It will no longer be displayed in any topic lists. The only way to access this topic is via direct link.


#8

This topic is now listed. It will be displayed in topic lists.


#9

Hi @brilliantlights, you can add the following line to the very beginning of the Footer in Custom Code:

<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>

Cheers,
Dave


#10

Thank You very much, smile smile


#11