Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Support request] Trouble implementing Jquery + Javascript in footer hook

Home Forums Support [Support request] Trouble implementing Jquery + Javascript in footer hook

Home Forums Support Trouble implementing Jquery + Javascript in footer hook

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #542636
    JANEK

    First off I should point out I’m a javascript/jquery rookie and am trying my best to implement scripts that others have written. I’m currently working on a mock site in my spare time, which I’m basing off an existing site. Im doing this just to build my skills so its completely non-commercial.

    Currently I’ve got a nice scroll reveal script loaded that fades in my content as you scroll. I found that pretty easy to implement, however now I’m trying to load in a script I found here:
    https://jsfiddle.net/cse_tushar/Dxtyu/141/
    I’ve added the following to my footer hook in a <script></script> tag:

    $(document).ready(function () {
        $(document).on("scroll", onScroll);
        
        //smoothscroll
        $('a[href^="#"]').on('click', function (e) {
            e.preventDefault();
            $(document).off("scroll");
            
            $('a').each(function () {
                $(this).removeClass('active');
            })
            $(this).addClass('active');
          
            var target = this.hash,
                menu = target;
            $target = $(target);
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top+2
            }, 500, 'swing', function () {
                window.location.hash = target;
                $(document).on("scroll", onScroll);
            });
        });
    });
    
    function onScroll(event){
        var scrollPos = $(document).scrollTop();
        $('#menu-center a').each(function () {
            var currLink = $(this);
            var refElement = $(currLink.attr("href"));
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                $('#menu-center ul li a').removeClass("active");
                currLink.addClass("active");
            }
            else{
                currLink.removeClass("active");
            }
        });
    }

    However nothing happens when I click to scroll the page by my slideout menu anchors.
    I understand why the later half of the script doesnt work as I dont have the classes set up properly, but from what I see the smooth scroll should work regardless.

    Are you able to lend some assistance, I honestly dont know what I’m doing wrong. I’ve been trying to troubleshoot the problem for a good 2 hours now, and I’m sure its something really basic that I’m failing to grasp.

    Thanks in advance for your help.

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #543085
    Tom
    Lead Developer
    Lead Developer

    In WordPress, you need to define $ as jQuery.

    So your first line:

    $(document).ready(function () {

    Should be:

    jQuery(document).ready(function($) {

    Then the second block isn’t in a document ready wrapper, so I would just change all of the $ to jQuery.

    #543427
    JANEK

    Hi Tom, Thanks for your help.

    I tried adjusting the code to the following

    <script>
    jQuery(document).ready(function($){
      $(document).on("scroll", onScroll);
        
        //smoothscroll
        $('a[href^="#"]').on('click', function (e){
            e.preventDefault();
            $(document).off("scroll");
            
            $('a').each(function () {
                $(this).removeClass('active');
            })
            $(this).addClass('active');
          
            var target = this.hash,
                menu = target;
            $target = $(target);
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top+2
            }, 500, 'swing', function () {
                window.location.hash = target;
                $(document).on("scroll", onScroll);
            });
        });
    });
    
    function onScroll(event){
        var scrollPos = jQuery(document).scrollTop();
        jQuery('a').each(function () {
            var currLink =  jQuery(this);
            var refElement =  jQuery(currLink.attr("href"));
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                jQuery('a').removeClass("active");
                currLink.addClass("active");
            }
            else{
                currLink.removeClass("active");
            }
        });
    }
    </script>
    

    Still no joy. I noticed a “Uncaught Error: Syntax error, unrecognized expression:” when I inspect the site in Chrome.

    I’m sure I’ve just misinterpreted your instructions. Are you able to shed some light on it?

    #543502
    Tom
    Lead Developer
    Lead Developer

    The link to your site is expired – can you update it?

    #543504
    JANEK

    Updated with new URL. Should be good now.

    #543933
    Tom
    Lead Developer
    Lead Developer

    Hmm, I’m afraid I’m not seeing the issue in your code. Have you considered posting your code over on stackoverflow.com? Someone might have an idea.

    #544198
    JANEK

    I’ll give that a go. Thanks for trying to help.

    #544213
    Tom
    Lead Developer
    Lead Developer

    No problem – let me know if you don’t get an answer.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.