Javascript order in html

Question

I'm having a problem with javascript files ie. some scripts don't work depending of way i order them in html file.Here is demo just to show you what i mean: http://testground.uphero.com/test/

As you can see in source there is:

<script type="text/javascript" src="js/prototype.js"></script> 
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> 
<script type="text/javascript" src="js/lightbox.js"></script> 
<script src="http://code.jquery.com/jquery-1.4.4.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/grayscale.img.js"></script>

If i put tags in this order Grayscale img will work and Lightbox won't but if i move jquery link to the top Grayscale will no longer work however Lightbox will work.

So what i want is to make them both work. Is there any way. Thanks in advance! :-)

Answer 1

As I said in my comment: thy to avoid using two frameworks, but:

if you really have to use both, use firebug (or something similar for other browsers) to see the resulting javascript errors - maybe you'll have to activate the "compatibility/noconflict mode" for both frameworks, so they don't kill each other.

Take a look at the jQuery documentation for more information about this.

Answer 2

Your problem is likely due to a conflict with the namespaces used by Prototype and jQuery — they both reference $ as a shortcut to their namespaces. Try to use both libraries together and you will inevitably run into conflicts.

Here's a useful article on using jQuery with other libraries, including how you can work around the problem:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

However, you will need to be careful to make sure that the plugins you are using are referenced within the correct scope for each library to work properly. If at all possible, it's probably wiser to stick to using only one library (there are plenty of lightbox clones available for jQuery).