Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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!

    #1416893

    Hey CharlieTh,
    Thank you for the link to your site, I see that you are getting this error Uncaught TypeError: $ is not a function because jQuery was not declared in your code.
    Try this function instead

    function my_custom_function() { ?>
      <script>
    (function($) {
    setTimeout(function() {
    $('.ribbon').addClass('active');
    }, 500);
    }(jQuery));
    </script>
      <?php
    }
    add_action('wp_footer', 'my_custom_function');

    Best regards,
    Mike

    #1416894

    Thanks, Mike, for looking at it. I changed this code function, cleared cache, no logo is showing. Any other ideas?

    #1416896

    Hi,
    When I checked your child theme functions.php you still had the old script:
    Enfold_Support_3033.jpeg
    I replaced it with the script above and now the logo shows:
    Enfold_Support_3035.jpeg
    please clear your browser cache and check.

    Best regards,
    Mike

    #1416901

    Wonderful!! 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!

    #1416903

    Hi,
    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Add simple javascript’ is closed to new replies.