- This topic has 7 replies, 2 voices, and was last updated 5 years, 11 months ago by Tom.
-
AuthorPosts
-
April 5, 2018 at 10:25 pm #542636JANEK
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.
April 6, 2018 at 9:27 am #543085TomLead DeveloperLead DeveloperIn WordPress, you need to define
$
asjQuery
.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
$
tojQuery
.April 6, 2018 at 7:09 pm #543427JANEKHi 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?
April 6, 2018 at 11:20 pm #543502TomLead DeveloperLead DeveloperThe link to your site is expired – can you update it?
April 6, 2018 at 11:22 pm #543504JANEKUpdated with new URL. Should be good now.
April 7, 2018 at 10:55 am #543933TomLead DeveloperLead DeveloperHmm, 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.
April 7, 2018 at 9:53 pm #544198JANEKI’ll give that a go. Thanks for trying to help.
April 7, 2018 at 10:16 pm #544213TomLead DeveloperLead DeveloperNo problem – let me know if you don’t get an answer.
-
AuthorPosts
- You must be logged in to reply to this topic.