• Hi all, so I’m having some trouble getting some to work on this website that has a custom theme (I’m trying to get it to work with the black and white menu at the top):

    https://etal.info/

    At first I just tried to do it using the plugin “Scroll to Page ID” but that hasn’t been working either. So I’ve been trying to program something myself. (Note: I really don’t know anything about Jquery and have been mainly copying and pasting from github, developers’ websites, etc.).

    I think there may be some kind of script conflict, because I’ve tried to install smooth scrolling using a couple of non-plugin methods, and remnants of that may be laying around. For example, I tried to put this script in header.php, registering it in functions.php:
    https://callmenick.com/2013/04/22/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation/

    I went into a whole rigamarole with jQuery, registering and enqueueing some non-plugin scripts because the site doesn’t appear to be loading anything jQuery or Javascript-related at all. Something, I believe, should be appearing in the console when I click on my header links, but there isn’t even a sign of failure. It seems things should be much simpler than this. Help?

    PS: I’ve taken the steps in this thread to no avail:
    Here.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    Yes, you have a few problems. I’m not entirely sure what you’re trying to do. Let’s address the problems that I see. If those are addressed maybe the rest will fall into place.

    First the skip links (the “#A” etc.). The HTML tag linked to must have a matching ID, you are using names. Also, anchor tags require an href attribute to properly validate. Your skip link IDs can be added to nearly any HTML tag, not just anchor tags. Since you don’t really need the anchor tags, place the ID attribute in a div, span, p or something you’re using anyway.

    You also have multiple body tags, which may work, but will not validate. You are apparently using them solely for the bgcolor attribute. You should use div or span tags to style various parts of your page, not body. Instead of the bgcolor attribute, you can instead use the more correct style attribute. Even this is going away at some point. The best approach is to assign a class or ID to the tag and use CSS to style the content.

    Now jQuery. You’ve recognized the need to enqueue scripts, that’s half the battle. Congratulate yourself for getting that much right. Check the source HTML for the external script references. You have at least 3 different jQuery libraries referenced. This will never work, you can only reference one version, preferably the one in your WP installation. This is done by including “jquery” in the dependency array passed to wp_enqueue_script(). Do not register or enqueue any other core jQuery libraries.

    Also note that the path to a library you’ve placed in your uploads is corrupted. Aside from the fact you don’t need this, one difficulty many people have in enqueueing scripts is simply getting the path reference correct. Always check the source output to ensure your paths are correct.

    If you address these issues and your script is basically correct, you should start to see results, or at least see errors in your console.

    Thread Starter aiiiiiight

    (@aiiiiiight)

    Hi, thanks so much for your helpful tips. I’m sorry I’m such a n00b at this. Here’s what I was able to follow and how I’ve tried to remedy the situation since:

    1. I changed the skip links to div id’s as you suggested.
    2. I removed the multiple body tags, which were in individual posts. It was a foolish stopgap situation to some minor past aesthetic problem.
    3. I removed the redundant jquery references.

    However, I was still not getting any results nor any errors in the console, so now I’ve tried to streamline things –?I have now given up on using scripts for the time being and am simply trying to use the plugin Page Scroll to ID. But that’s not working either. Do you have any idea why that would be?

    Also, the site might look a little different than before because I had to reset the functions file from having messed around too much in it. So right now, the site is not arranged in alphabetical order like it was before. Do you know if plugins like this still require certain things like enqueueing in the functions file? This is literally the whole functions file for this theme, so maybe something is missing:

    <?php
    
    automatic_feed_links();
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, box resize mode
    
    if ( function_exists('register_sidebar') )
    	register_sidebar(array(
    		'before_widget' => '<td><div id="submenu_%2$s" class="header">',
    		'after_widget' => '</div></div></td>',
    		'before_title' => '<div id="widget_title"><h2 style="color:white">',
    		'after_title' => '</h2 ></div><div class="menu_content">',
    	));
    
    ?>

    Let me know if you can help. Thanks!

    P.S. Do you have any idea why the top two posts are stacking on each other like that? I am piggybacking off of someone else’s theme and this has apparently been a bug since the beginning.

    Moderator bcworkz

    (@bcworkz)

    You still have two jquery sources. The one in your wp-includes is fine, that’s what we would want to see. The one from googleapis is a different version and is certainly causing conflicts. I’m not sure where it’s coming from, but it needs to be resolved.

    Some themes don’t have many functions, others do. You’d need to check your version against a fresh download to be sure it’s correct.

    Plugins don’t normally require any enqueueing from a theme, they manage it themselves. If done properly, it’s all good. If not, things break.

    I don’t see any reason the top two posts stack like that, it’s quite odd.

    All I can suggest is reducing your site to it’s most basic, functional state. Start adding things back in, one at a time, ensuring all is well. Sooner or later something will break. Resolve that conflict, then continue. You’ll eventually get it all working.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Smooth scrolling using jquery/plugins’ is closed to new replies.