Sridhar Katakam

Genesis and WordPress Tutorials

jQuery Counter on scroll using WOW.js in Genesis

by 5 Comments

In my tutorial requests Trello board, a user asked

I want to create a counter using jquery-counter – http://sophilabs.github.io/jquery-counter/ and put it in a footer widget. Can you create a tutorial to install and configure jquery-counter on a Genesis theme?

This tutorial provides the steps to trigger jQuery.Counter when the section having the counters is scrolled to, using WOW.js.

Animated gif (loops only here, not in the actual implementation):

jquery-counter-animation

Screencast:

While the tutorial has been written for Genesis Sample child theme, it should work in any Genesis child theme.

Step 1

Create a directory named jquery-counter in the child theme directory.

a) Upload

jquery.counter-analog2.css

jquery.counter-analog2.png

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Sridhar,

    Thanks for the great tutorial. Unfortunately, I am having issues getting the counter to render. I followed the tutorial except for two steps—I already have footer widgets on my theme and in Step 4 you say to put the js file in the js directory but then the code in step 5 indicates to put the snippet in a different directory. Aside from that, I can’t figure out what is wrong.

    Also, is this tutorial set up for just the front page? How would I set it up for all the pages on my site?

    My url is https://jam.buzz. I currently am using the eleven40-pro theme. The code is in the footer-4 widget.

    Thanks!
    Chris

    Reply

  • Hey Sridhar,
    Thanks for the trouble-shooting, but I’m still stuck. Here are screenshots of my js and jquery-counter directors and function.php snippet.

    https://mpdropshare.s3.amazonaws.com/functions.php_-_CLE_LI_2016-11-29_09-52-38.png

    https://mpdropshare.s3.amazonaws.com/functions.php_-_CLE_LI_2016-11-29_09-53-16.png

    https://mpdropshare.s3.amazonaws.com/functions.php_-_CLE_LI_2016-11-29_09-58-07.png

    https://mpdropshare.s3.amazonaws.com/jquery-counter-init.js_-_CLE_LI_2016-11-29_09-58-44.png

    Thanks in advance!
    Chris

    Reply
    • >