AgentPress Pro theme front page Custom HTML calling jQuery Count Up function

[MaryDu]

I am having problem to use the jQuery function to display dynamic number count up inside the Custom HTML widget. If I put the script inside the HTML code, in the editing mold it shows working but not working when display the page. So I moved the jQuery function into the function.php under the Theme directory and registered the function using:

add_action( 'wp_enqueue_scripts', 'add_counter_script' );
function add_counter_script() {
wp_enqueue_script(
'NumberCounter',
get_template_directory_uri() . '/js/NumberCounter.js',
array('jquery')
);
}

My NumberCounter.js file is like this:
jQuery(document).ready(function($) {
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
})

It is still not working. Which part did I do wrong? Please help!

http://ciciwang.co.nz/

[Brad Dalton]

Works when i test it and there are no js errors.

---

Tutorials for StudioPress Themes.

[MaryDu]

Thank you Braddalton! I fixed the problem by simply changed all $ to JQuery inside the <script>. I figured out the solution by seeing the tips on using JQuery inside WordPress 🙂

[Author]

Posts