Waypoints always giving "undefined is not a function/object" errors

Question

I’m trying to use Waypoints to do a very simple scrolling effect, but for some reason, I just simply cannot get Waypoints to work at all.

jQuery (1.7.1) is correctly loaded, and is loaded before Waypoints. There are other jQuery functions on the page, and they all work without problems; for example:

$(document).ready(function() {
  $(".form label").addClass("column");
}

Waypoints (waypoints.min.js, version 1.1.6) is also loaded correctly, after jQuery.

But whatever I do, I can’t seem to get anything in Waypoints to react at all in anything except Firefox.

If I call waypoint() directly on an element, without checking for the document to finish loading, then I get no error, but no reaction, either:

$('.wrapper').waypoint(function() {
    alert('You have scrolled to an entry.');
});

– gives no console errors or warnings, but doesn’t alert anything, either (as I wouldn’t expect it to, since the script is placed before the .wrapper div is created).

If I wait for the document to finish, like this:

$(document).ready(function() {
    $('.wrapper').waypoint(function() {
    alert('You have scrolled to an entry.');
    });
});

– then it seems to work in Firefox, but not in Chrome, Opera, or Safari. Safari’s web console tells me

TypeError: 'undefined' is not a function (evaluating
'$('.wrapper').waypoint(function() { alert('You have scrolled to an entry.'); })')

– and I’m not sure why undefined is suddenly now not a function (or why the function is now suddenly being ‘set’ to undefined, whichever is a more correct way of looking at it) …

I am under no circumstances good with jQuery, or JavaScript in general, so I really don’t know where to look for whatever might be conflicting with it, or why it’s doing this to me.

Help?

Solution 1

Turns out I had, for whatever reason, at some point added a second import of jQuery, this time directly from Google’s servers, and placed this second call in a different file where it had lain unseen and unknown for ages.

Once I got rid of that, Waypoints worked (more or less) as expected.

Solution 2

I am new to this development trail and the one thing I noticed I did wrong with the Jquery plug-ins was the order in which I had my scripts in the head tag. Ounce I put my Jquery script first then my undefined errors in the Google Chrome console went away.

Comments

[tim.baker]

Many hours saved thanks to you. There can be odd behaviours within Jquery, only think letting it down