1

I'm trying to implement this method: http://www.webtutorialplus.com/sticky-header-on-scroll-jquery/

with a sticky header on my website http://storkbox.gopagoda.com/

I want the grey menu to be sticky, but I get the error:

Uncaught TypeError: Cannot call method 'waypoint' of null 

at the line

$('.container').waypoint('sticky');

there is a div with a class of container on the page, so it should never be null

I don't know why, my only guess is that it's a difference between jquery 1.8.2 and 1.8.3, but can I run both instances at once (sticky plugin requires 1.8.3, and the rest of the plugins require 1.8.2)

3
  • without following links, i can tell you that whatever is **here**.waypoint is not what you think it is. Commented Jun 28, 2013 at 21:22
  • use only one version of jquery preferably the most recent one. If needed, migrate plugin which need it: blog.jquery.com/2013/05/01/jquery-migrate-1-2-0-released Commented Jun 28, 2013 at 21:23
  • um ... are you going to post some code ? EDIT: need more code than that. often i will get an error referring to a line in the jquery library when the problem is actually elsewhere, in my code. these are tough to debug. Commented Jun 28, 2013 at 21:23

1 Answer 1

3

One advantage of being old is that my first thought when I saw your error message was "Hmm... Is the $() function really what you think it is?" :-)

You see, jQuery's $() function never, ever returns null or undefined. Nor does jQuery() if you call it under that name. Even if you give it a selector that doesn't match any elements, it returns an empty jQuery object—much like [], an empty array—rather than nothing.

So the only way you could get this error:

Cannot call method 'waypoint' of null

on this line of code:

$('.container').waypoint('sticky');

would be if $ is not the jQuery function. Because that's what that error is saying: you're trying to call null.waypoint(). The only way that can happen is if the $('.container') call returns null.

And indeed this is the case: You are loading both jQuery and Prototype.js, and at the point where you hit the error, you are calling Prototype's version of the $ function.

Here, try this: Load your page in Chrome with the developer tools open. It should stop on that .waypoint() call.

Now, hit Esc to open the mini-console (or click the Console tab at the top of the developer tools), and type this into the console:

$

It will display:

function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}

Now type this:

jQuery

and it will display:

function (e,t){return new v.fn.init(e,t,n)}

Definitely not the same function!

Or for a simple test, type:

$ === jQuery

and it prints:

false

Oops.

To fix this, you will probably need to use jQuery's noConflict() feature so you can use both jQuery and Prototype together. Here's an excellent writeup on the topic:

Avoiding Conflicts with Other Libraries

(Thanks to @acdcjunior for the reference!)

BTW, the multiple versions of jQuery are not related to this issue. Do you really need to load both 1.8.2 and 1.8.3, though? What's the difference between those two that's causing a compatibility issue?

Sign up to request clarification or add additional context in comments.

2 Comments

+1 You were spot on! I find this link is very helpful in this matter: learn.jquery.com/using-jquery-core/…
Thanks for the pointer - that's a great description of .noConflict() and related issues.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.