Tagged: add class to div, functions.php, javascript
-
AuthorPosts
-
August 22, 2023 at 8:13 pm #1416883
I am trying to add javascript to functions.php to enable a codepen example in a webpage.
The codepen is: https://codepen.io/codehound/pen/NWePGQW
The page I’m trying it on is: https://naturalpainx.com/test-big-logo/I exported the codepen.
The exported css (style.scss), I put it in a Codeblock.
I put the html (div part) in another codeblock.
So far, so good.Then I tried to add the javascript (which is the “magic” that makes it work.)
But…didn’t work for me.I tried to use info on How to add a custom function in
The script.js exported from Codepen, was fairly simple:
$(document).ready(function() {
setTimeout(function() {
$(‘.ribbon’).addClass(‘active’);
}, 500);
});So, I tried to put it in the suggested function like this:
// WordPress custom function
function my_custom_function(){
?>
<script>
$(document).ready(function() {
setTimeout(function() {
$(‘.ribbon’).addClass(‘active’);
}, 500);
});</script>
<?php
}
add_action(‘wp_footer’, ‘my_custom_function’);It just doesn’t appear to do anything. I am not adept at javascript…obviously. Can you see what step I’m missing?
Any direction would be appreciated!
August 23, 2023 at 12:17 am #1416893Hey CharlieTh,
Thank you for the link to your site, I see that you are getting this errorUncaught TypeError: $ is not a function
because jQuery was not declared in your code.
Try this function insteadfunction my_custom_function() { ?> <script> (function($) { setTimeout(function() { $('.ribbon').addClass('active'); }, 500); }(jQuery)); </script> <?php } add_action('wp_footer', 'my_custom_function');
Best regards,
MikeAugust 23, 2023 at 12:21 am #1416894Thanks, Mike, for looking at it. I changed this code function, cleared cache, no logo is showing. Any other ideas?
August 23, 2023 at 1:04 am #1416896August 23, 2023 at 1:50 am #1416901Wonderful!! I guess I ended up replacing the old version with the old version by mistake. Sorry to cause you delay.
But JAZZED with results.
Now I know how to make this one work, think I will understand the process.
Thank you…sort of teaching how to fish versus giving a fish…this concept I can use over and over.Feel free tp close this success story now!
August 23, 2023 at 2:04 am #1416903Hi,
Glad we were able to help, in the future if you find jQuery scripts with the dollar sign ($) try wrapping it with this:(function($) { // script here }(jQuery))
If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike -
AuthorPosts
- The topic ‘Add simple javascript’ is closed to new replies.