Can't get jquery to work

  • I am relatively new to getting using jquery, but a client wanted something where when you hover over a child div, the parent divs background would change. A rudimentary version of what I came up with for a solution can be found here jsfiddle.

    But when I took the code and tried adding it to my site, it just will not work. I am not sure if I am missing something very simple, or something is way wrong with the code I was using. I have tried adding the script in the header, and also adding it as an external js file.

    The site in question can be found here with the section “Explore” where the code is being used – https://www.aoftheibuild.com.php56-9.dfw3-2.websitetestlink.com/

Viewing 9 replies - 1 through 9 (of 9 total)

  • From a quick check of your site it appears you are loading a javascript file called explore.js from an incorrect URL:

    https://www.aoftheibuild.com.php56-9.dfw3-2.websitetestlink.com/wp-content/themes/AoftheIhttps://www.aoftheibuild.com.php56-9.dfw3-2.websitetestlink.com/wp-content/themes/AoftheI/js/explore.js?ver=4.6 Failed to load resource: the server responded with a status of 404 (Not Found)

    As you can see the URL is malformed and thus the server is rightly telling the browser that the file doesn’t exist at the location it’s requesting.

    Your browser’s “inspector” or “javascript console” can be helpful in diagnosing these issues.

    Thread Starter theamountof

    (@theamountof)

    I have used firebug and I am not seeing what you are seeing. I have even go through and made the code relative, and even added the script into the header itself, and both ways the script will not function.

    Daniel is right, trust us. On this page:
    https://www.aoftheibuild.com.php56-9.dfw3-2.websitetestlink.com/
    There is the above mentioned mangled URL.

    In firbug where there should be the script, is a whole 404 server response page.

    Thread Starter theamountof

    (@theamountof)

    I wish I could see the same thing you two are because whenever I inspect the script I am able to bring it up, but aside from that, I removed the external js file and just placed the script code in the header after the jquery load, and I still can’t get it to work.

    The script should make it if you hover over the first bucket in explore “THE A OF THE I COUNTRY” it should cause the gray background to change like in the jsfiddle.

    This is the script I have in the header:

    <script type='text/javascript'>
jQuery(function() {
  jQuery('.explore > .country').hover(function() {
    jQuery(this).parent().toggleClass('hover');
  })
  jQuery('.explore > .community').hover(function() {
    jQuery(this).parent().toggleClass('hover2');
  })
});
</script>

    It is still there, use another computer, do a “Shift”+refresh on the page.

    Otherwise show us the code which puts your script "https://www.aoftheibuild.com.php56-9.dfw3-2.websitetestlink.com/wp-content/themes/AoftheI/js/explore.js?ver=4.6"
    into the header.

    Thread Starter theamountof

    (@theamountof)

    I have removed the external js file and link to it, and the code I have in my previous response, which is what was in the js file, is located just before </head>.

    Moderator bcworkz

    (@bcworkz)

    Your selectors using “>”, as in '.explore > .country', don’t relate to anything. For that to work, .country must be an immediate child of .explore, but there are several intervening .et_pb_row elements in between. Try using just '.explore .country'

    When you go back to an external file you still need to resolve the path correctly, that was still a problem as well.

    Thread Starter theamountof

    (@theamountof)

    thanks bcworks, that is on the right track to getting this to work. When I hover over the “THE A OF THE I
    COUNTRY” div, it does the hover transformation, but the main div explore does not.

    Moderator bcworkz

    (@bcworkz)

    You’re welcome, I’m glad that helped ??

    The logic of different selector syntax is not that intuitive. Using > the way you did makes sense for what you wanted, but that’s not what it actually does. Using nothing like I suggested seems like the CSS will be applied to either class, but that’s not it either, the element must be within every class listed. The behavior you feared, where the entire .explore would also be affected, happens only when each class is separated by a comma. Go figure.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Can't get jquery to work’ is closed to new replies.