Jquery not working

  • Resolved xiphocoleon

    (@xiphocoleon)


    6 years, 9 months ago

    I am trying to run a test to show that Jquery is working properly on this site. I’ve linked my own hosted copy of Jquery and I’ve copied code from a test animation from W3Schools:

    My JQuery library and the script to trigger the test animation:

    <script src="https://newsite.paulwagenblast.com/wp-content/themes/blankslate/scripts/jquery-3.3.1.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("div").animate({left: '250px'});
    });
});
</script>

    The animation in the body of my file:

    <button>Start Animation</button>

    <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

    I think there could be some type of conflict between the Jquery library I’ve hosted, and something that WordPress has already installed. Also, I perhaps I need to enque my hosted Jquery script? I have also read that I need to add the Jquery no conflict function that I’ve included above, and that I need to change my $s to jQuery in my jQuery script, but I am not sure why.

    Can anyone shed some light on this? I just would like to be able to do simple jQuery CSS animations. I am using the blankslate theme.

    The page I need help with: [log in to see the link]

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

  • On the site you linked, I can’t click on the button labeled “Start Animation” because there is a <div> positioned over the button:

    <div id="top-color" class="no class added"></div>

    Because you have

    #top-color { position: fixed; }

    that <div> is fixed to the top of the window and covers the button so it can’t be clicked. If I remove that <div>, then I can click on the button and when I do, I see the green box move to the right.

    Thread Starter xiphocoleon

    (@xiphocoleon)

    Thank you so much! Yes, the button was under the #top-color div. I placed it somewhere else now where nothing is on top of it, and now my Jquery behaviors work.

    Solved!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Jquery not working’ is closed to new replies.