Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Nov 2017
    Posts
    2
    Member #
    57694

    Need a second set of eyes - JS script not working.

    Hey Guys, I'm very new to JS coding, and I'm running into an issue with a simple script. I'm trying to make a div id in the header of my site disappear on scroll, then reappear if the site is scrolled back to the top. Here's what I have so far:

    a header.php file, which in the <head> section I have called my js file using the following:

    Code:
    <script type="text/javascript" src="js/scroll.js"></script>
    Then, I have the div id code in the <body> of my header.php file, which looks like this:

    Code:
    <div id="custom-top-bar">17 Village Square, Barton, VT  <span style="color:#2c2c2c">|</span>  (802) 525-4747  <span style="color:#2c2c2c">|</span>  </div>
    And finally, the JS code which is located in a js folder in the same directory as the header.php file, the file name is 'scroll.js', and here's that code:

    Code:
    $(window).scroll(function() {
    
        if ($(this).scrollTop()>0)
         {
            $('#custom-top-bar').fadeOut();
         }
        else
         {
          $('#custom-top-bar').fadeIn();
         }
     });
    I believe my js coding is correct, I think it's just not calling the code properly. Any suggestions are very appreciated.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,054
    Member #
    27197
    Liked
    933 times
    Looks like you're using jQuery. Are you loading jQuery also?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Nov 2017
    Posts
    2
    Member #
    57694
    Hey Ronald - I am, in the same header.php doc. I'm wondering if my path is just wrong.

    Code:
    <script src="/public_html/wp-content/themes/Divi/js/jquery-3.2.1.min.js"></script>
    	<script type="text/javascript" src="/public_html/wp-content/themes/Divi/js/scroll.js"></script>
    Although I'm not super familiar with jquery, I could be doing something wrong I'm sure.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,054
    Member #
    27197
    Liked
    933 times
    Move the script tag with the scroll js to the footer. I think it's just loading and trying to run before jquery is ready.

    Check the js console in your browser's dev tools to see if there are any errors. Also, wordpress loads jquery in no-conflict mode by default, so you might see an error to the effect that '$' is not a function or something like that. If so, change all the $ in your code to jQuery.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 09:51 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com