Search code examples
javascriptjqueryhtmljquery-waypoints

Javascript function not working. Script positioning issue?

I am attempting to get jQuery waypoints to work and I am doing a very basic example and it won't display the window alert that I am attempting to show when scrolled to. I was watching a video of this and I had exactly what the guy had, so I am not sure why it isn't working for me.

Any ideas of why this not initiating?

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
</head>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <section>
        <img src="images/big-smile-face.png" class="dipper" alt="">
    </section>
 <script src="js/waypoints.js"></script> <!-- js/waypoints.js file -->

Javascript - js/waypoints.js file

$(document ).ready(function(){
var $dipper = $('.dipper');

$dipper.waypoint(function () {
    alert('waypoint!');
});
});
Solution

  • What browser are you using? There might be some issue there. It seems to be working fine for me and I am not getting any errors.