Scripts don’t work when used together
 

As this has been asked many, many times and I’m tired of answering this very basic question I hope this sticky thread clarifies why two (or more) scripts/plugins may not work together while they are working alone.

You are probably including different and incompatible JavaScript frameworks or have several references to the same framework in one document. This often happens when jQuery and prototype are used together (because they both use the Dollar character ($) in their functions, but in different ways), or when a framework file is referenced more than once because of negligent copy-pasting.

The short answer is: Use only one JavaScript framework/library on your site and stick to it by choosing only plugins for that library. I’m sure there is something similar for every major framework. Also, only reference the core library files once, and once only. If you already have a plugin in your document that is working then you don’t need to include another script tag with reference to the core framework with the next plugin.

Here are more elaborate explanations to the issues and solutions:

Case 1: Two incompatible frameworks
Your code might look something like this, because you followed the instructions on the websites from which you got the code and copied it into your document.
That’s a lightbox plugin and a slider plugin (I just chose that for demonstration and they don’t reflect the actual current implementation or state of development).
You’ve done all the right things and yet, it isn’t working because you have a plugin that is using the prototype framework and another one using jQuery:
They are not compatible because they share some naming conventions but are different nevertheless and one script doesn’t understand what the other wants.

The solution: Replace one of the two plugins with a plugin for the matching JS framework, i. e. either look for a slider that is based on prototype or look for a lightbox script based on jQuery.

Case 2: Multiple references to the same framework
Choosing plugins for the same framework isn’t free of errors either. This could be your code:
You thought you did everything right with sticking to one framework but here the jQuery core is referenced multiple times:
You don’t need a second reference to jQuery for the second plugin because the plugins are all based on the same framework and referencing the core framework once only is sufficient (and mandatory, indeed). So if you include several plugins, leave the reference to jQuery (or any framework you might use) out for subsequent plugins, even if the instructions tell you to include it. Remember, you have included the framework already with your first plugin, so the other plugins will use that and don’t need additional references.

Note, however, that some plugins might be based on outdated versions of the core framework and might not work with newer versions. Even though you’ve really done everything right this time and used one framework and included it once only, with one plugin based on, say, jQuery 1.2.6 and the other one based on jQuery 1.8, one of them will most likely not work (depending on which version of jQuery you have included/referenced) because in the meantime the code has changed, new features were added and old ones removed. Always look for the version number of the framework on which the plugins are based and try to use the most current ones.

I hope this helps anyone (and I hope anyone actually reads this). Good luck.

Just my two cents:

Best advice, as suggested, is to use one framework or the other (prototype OR jQuery etc.). No matter what plug-in or feature you would like to use, a comparable version can always be found in the other framework.

Can I also repeat the need to WAIT UNTIL THE PAGE HAS FULLY LOADED before attempting to reference any element on the page. In jQuery:

or even the shorthand version:

The elements on the page DO NOT EXIST until the page has loaded.

This is the most common error.