Counting numbers did not work in HubSpot Module

[FAlluqmani]

Hello, I'm new to HubSpot development. I used html + css + js(I have used a jQuery plugin and waypoints.js.) to make counting numbers function dynamically. It is working fine normally but when I tested the module html + css + js code on HubSpot, the counting numbers did not work.
Could somebody please assist me in determining the cause and offering a solution? Thank you in advance!

https://www.loom.com/share/93d7829546c947de961a7efa66837e21

[himanshurauthan]

Hello @FAlluqmani,

Please include JQuery CDN above all CND's in html inside the module like this

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

or you can go through this link also:-

https://knowledge.hubspot.com/website-pages/include-jquery-across-your-hubspot-pages

Regards,

[FAlluqmani · Accepted solution]

Actually, The problem was about the js file linking in HubSpot.
the solution:
I have uploaded the required js file in a folder and add three file:
1.a jQuery file (JavaScript library) .
2.waypoint js (which is a helper file to detect screen position for the counter)
3.counter js (which is a file for the counter itself)
and then add that file link to a specific module. In our case in the counter module.

Thank you all for your assistance.

[Anton]

Hi @FAlluqmani, 

could you please post the whole HTML part of the module here? I saw an

</body>

and

</html>

 tag in the last loom video. And those things might break the functionality. 

best, 

Anton

[ChehakWadhdwa]

hi @FAlluqmani 

You have to paste all your CDN inside module instead of  base.html  then it will work proper for you in preview mode like this as shown in below image
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js"></script>

<script>

$('.counter').counterUp({

  delay: 10,

  time: 2000

});

</script>

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

[FAlluqmani]

I try to add this but does not work☹️

https://www.loom.com/share/451c7b1068644d1dbf97e3d42153527b

[ChehakWadhdwa]

hi @FAlluqmani 

Please create one separate Custom module(for testing purpose) and paste below code in (html+hubl) with no any change , if it works proper for you then make modification as per your requirements.

<div class="row-fluid">

  <div class="counter-module">

   <h2><span class="counter">3000</span> <span> </span></h2>    

    <h6>Counting Number</h6>    

  </div>

</div>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js"></script>

<script>

$('.counter').counterUp({

  delay: 10,

  time: 2000

});

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

</script>

[dennisedson]

@FAlluqmani , are you getting any errors reported in your console? 

My first guess is that the library is being called before jquery. 

Look for anything like $ is undefined or jquery is undefined