Javascript conflict on my html page

Hello,

I have an accordion menu and a lightwindow script on my web page. The lightwindow script does not work because of the accordion script because if I delete the latter the lightwindow script works. There must be a conflict but what?

Here is the head section of my page:

<!-- lightwindow files -->
<script type="text/javascript" src="lightwindow/javascript/prototype.js"></script>
<script type="text/javascript" src="lightwindow/javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script>
<link rel="stylesheet" href="lightwindow/css/lightwindow.css" type="text/css" media="screen" />


<!-- accordion scripts -->
<script src="js/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/accordion.css" />

Thank you for your time.

Cheers

tochiro

From stackoverflow

• You might have a method/function defined in both libraries with the same name.

  If not a duplicate method/fucntion name, check for duplicate global variable names.

  I've run into conflicts several times when trying to add methods to the document that overwrote each other.

• You almost certainly have a conflict between JQuery and Prototype. They both define $ for instance.

  JQuery has a compatibility mode that you can enable to avoid conflicts.

• You would need to use the jQuery.noConflict method described at http://docs.jquery.com/Core/jQuery.noConflict.

  Not for certain if version 1.2.1 will have it though.

  Just read the instructions on that page for how to wire it up. First thing is that you'll need to put jQuery before the other libraries.

  Update: added the code below to help you apply the fix. If the line jQuery.noConflict() causes an error then you may need to try a newer version of jQuery.

  <script src="js/jquery-1.2.1.min.js" type="text/javascript"></script>
  <script type="text/javascript"> jQuery.noConflict() </script>
  
  <!-- lightwindow files -->
  <script type="text/javascript" src="lightwindow/javascript/prototype.js"></script>
  <script type="text/javascript" src="lightwindow/javascript/scriptaculous.js?load=effects"></script>
  <script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script>
  <link rel="stylesheet" href="lightwindow/css/lightwindow.css" type="text/css" media="screen" />
  
  
  <!-- accordion scripts -->
  <script src="js/menu.js" type="text/javascript"></script>
  <script src="js/jquery.cookie.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="css/accordion.css" />
  

  Also, NOTE you may need to swap some of your code from $(...) to jQuery(...)

  From the jQuery doc page:

  where you used to do $("div p"), you now must do jQuery("div p").

  Mister Lucky : The page makes it look as simple as putting the jQuery stuff first, then add some inline code just below it for jQuery.noConflict(); then the additional libraries will not mess it up.

  Mister Lucky : I'd love to help figure it all out, but am a working man myself, and can only go so far. Hope some others can step in if you can't get the remaining pieces all in place.

• <script type="text/javascript"> jQuery.noConflict() </script> 
  

  Just wanted to say that this litle trick worked wonders for me thanks. If you use chronoforms this is probably the answer to your javascript problems.

  No more "DONE BUT WITH ERRORS ON PAGE" Finally.

  Thanks again