Community Forums › Forums › Archived Forums › General Discussion › Custom JavaScript Scroll to ID all of a sudden stopped working!
Tagged: aspire pro, javascript, scroll to id
- This topic has 14 replies, 3 voices, and was last updated 5 years, 4 months ago by
SavvyPro.
-
AuthorPosts
-
August 29, 2019 at 1:20 pm #493293
SavvyPro
ParticipantI am using Appfinite's Aspire Pro child theme which I really like, but I wanted to add scroll to ID JavaScript functionality to it whenever an item on the menu is clicked. I used the following JavaScript code and it was working just fine and then all of a sudden it stopped:
$('a[href*="#"]').on('click', function(e) { e.preventDefault() $('html, body').animate( { scrollTop: $($(this).attr('href')).offset().top, }, 500, 'linear' ) })
BTW, I added the JavaScript code the first time to the js folder within the 'wp-content/themes/aspire-pro/js' location and named it 'savvypro-scroll-To-Id.js' and it worked. However, I like to use the Genesis Extender for custom modifications so I don't have to crack open child theme files if I don't have to and I pasted in that code in the Genesis Extender > Custom > JS editor and it worked as well after I deleted the 'savvypro-scroll-To-Id.js' file, but for some odd reason, about an hour or so later, it simply stopped working and I am at a loss as to why. I tried everything I could find to make it work including adding the 'savvypro-scroll-To-Id.js' file back and enqueuing the script in functions.php as well, but it still didn't work.
I am on Chrome if that helps, but JavaScript is enabled for all websites.
I must have fat fingered something somewhere and didn't realize perhaps, but this is just speculation.
If anyone can help provide some troubleshooting steps for this, that would be great.
August 29, 2019 at 2:42 pm #493295SavvyPro
ParticipantBTW, I forgot to add the link to the website, here it is:
August 31, 2019 at 6:55 am #493326Victor Font
ModeratorIf you check your browser's console, you'll see this error:
TypeError: $ is not a function
You can't use the $ jQuery shortcut without defining it. You either have to edit your code and replace the $ with the word jQuery or wrap your code to define the $ like this:
<script> jQuery(document).ready(function ($) { "use strict"; //SavvyPro Custom Scroll to ID Script $('a[href*="#"]').on('click', function(e) { e.preventDefault() $('html, body').animate( { scrollTop: $($(this).attr('href')).offset().top, }, 500, 'linear' ) }) }); </script>
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?September 1, 2019 at 5:30 pm #493353SavvyPro
ParticipantAhh, okay.
I will try that, thanks.
September 2, 2019 at 7:40 am #493361DisenoWebLleida
MemberDid it work for you
The same thing happens to me and I don't know what to do!
September 3, 2019 at 1:25 pm #493389SavvyPro
ParticipantNo, this did not work still.
Not sure what the issue is.
September 5, 2019 at 5:39 pm #493422SavvyPro
ParticipantOk well, I have officially given up.
I love Genesis, but I think it is time for me to start moving on to static site frameworks like Hugo or some other JAMstack CMS like Contentful and use AWS instead of SiteGround.
This has just become way too exhausting for me to constantly keep putting up with. I do what all the published blog articles say to do, it doesn't work. I do what these forums say to do, it doesn't work.
Is it time to move on?
Is Genesis and WordPress dead?
September 5, 2019 at 7:02 pm #493428Victor Font
ModeratorI went back and looked at your site and it doesn't look like you ever updated the code to pass the shortcut $ to the function. The problem you are having has nothing to do with Genesis or WordPress. You have bad custom jQuery code in the Genesis Extender plugin.
TypeError: $ is not a function custom-scripts.js:3:1
WordPress sets jQuery to compatibility mode. You have to use the code I gave you way back at the beginning if you want this to work or change each of $ characters to the word jQuery.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?September 11, 2019 at 12:09 pm #493507SavvyPro
ParticipantApologies, I made the change on DesktopServer, not the actual website. I made the change now on the site, but I am now seeing these errors:
https://www.dropbox.com/s/2m1shprgnwz58dk/Screen%20Shot%202019-09-11%20at%2011.02.46%20AM.png?dl=0
September 11, 2019 at 3:06 pm #493512SavvyPro
ParticipantOne more question, should I just stop using the Genesis Extender plugin altogether then?
September 12, 2019 at 12:33 am #493515Victor Font
ModeratorIt's not possible to understand what the new errors are without seeing the code you added.
As for Genesis Extender, that's a personal choice. I don't have a recommendation one way or the other. I haven't used it in years. I have my own workflows that don't depend on additional plugins.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?September 15, 2019 at 10:13 pm #493580SavvyPro
ParticipantThe code I added is what you suggested above to my savvypro-scrollTo-id.js file located in public_html/.
I added this code here:
<script> jQuery(document).ready(function ($) { "use strict"; //SavvyPro Custom Scroll to ID Script $('a[href*="#"]').on('click', function(e) { e.preventDefault() $('html, body').animate( { scrollTop: $($(this).attr('href')).offset().top, }, 500, 'linear' ) }) }); </script>
And then this is the code I put in my functions.php file:
function savvypro_adding_scripts() { wp_enqueue_script( 'savvypro-scrollTo-id-script', get_stylesheet_directory_uri() . '/js/savvypro-scrollTo-id.js', array( 'jquery' ), '1.0.0', true ); wp_enqueue_script('savvypro_scrollTo_id_script'); } add_action( 'wp_enqueue_scripts', 'savvypro_adding_scripts' );
September 16, 2019 at 5:40 am #493584Victor Font
ModeratorYou're missing semicolons closing off the command lines:
<script>
jQuery(document).ready(function ($) { "use strict"; //SavvyPro Custom Scroll to ID Script $('a[href*="#"]').on('click', function(e) { e.preventDefault(); $('html, body').animate( { scrollTop: $($(this).attr('href')).offset().top, }, 500, 'linear' ); }); }); </script>
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?September 20, 2019 at 1:35 pm #493667SavvyPro
ParticipantGRRRAAAAAAWWWWWWWW!!!!
Why isn't my IDE catching this?!!
I should know better, but dang it, I am in a hurry and working on a Masters, kids, dog, full time job, sick spouse, COME ON technology, you're supposed to be helping me here.
I will modify it.
Thanks Vic.
September 24, 2019 at 10:01 pm #493711SavvyPro
ParticipantStill didn't work.
I am going to reach out to the publisher of this theme.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.