title: joomla + jquery + prototype. Can't get noConflict to work.
body: <p>I am working on a site that uses a bridge for joomla and magento called Magebridge. I've started developing a joomla template that uses some jquery for things like a NivoSlider on the homepage and tooltips. When I use this template on a normal joomla site it works fine, but when I use the bridge which brings Prototype into the mix I get errors and other unhappy stuff.</p>
  
  <p>Now after searching around it seems the general solution to this would be to use jquery in noconflict mode, which I've now tried in a number of different ways but can't seem to get it to work.</p>
  
  <p>I'm using jquery in a combination of inline scripts and external .js files. Looking at the final source code for the site I can see that protoype is being called before jquery (here's part of the head section):</p>
  
  <pre><code>&lt;head&gt;
    &lt;base href="http://127.0.0.1/meade/" /&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
    &lt;meta name="robots" content="index, follow" /&gt;
    &lt;meta name="generator" content="Joomla! 1.7 - Open Source Content Management" /&gt;
    &lt;title&gt; Home page &lt;/title&gt;
    &lt;link href="http://127.0.0.1/meade/component/search/?format=opensearch" rel="search" title="Search Meade Instruments" type="application/opensearchdescription+xml" /&gt;
    &lt;link rel="stylesheet" href="/meade/media/com_magebridge/css/default.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="http://127.0.0.1/store.meade/skin/frontend/default/default/css/styles.css" type="text/css" media="all"/&gt;
    &lt;!--[if lt IE 8 ]&gt;
  &lt;link rel="stylesheet" href="http://127.0.0.1/store.meade/skin/frontend/default/default/css/styles-ie.css" type="text/css" media="all"/&gt;
  &lt;![endif]--&gt;
    &lt;link rel="stylesheet" href="http://127.0.0.1/store.meade/skin/frontend/base/default/css/widgets.css" type="text/css" media="all"/&gt;
    &lt;link rel="stylesheet" href="http://127.0.0.1/store.meade/skin/frontend/default/default/css/print.css" type="text/css" media="print"/&gt;
    &lt;script type="text/javascript" src="/meade/media/com_magebridge/js/footools.min.js"&gt;&lt;/script&gt;
  &lt;script  type="text/javascript"&gt;
  //&lt;![CDATA[
  var BLANK_URL = 'http://127.0.0.1/store.meade/js/blank.html';
  var BLANK_IMG = 'http://127.0.0.1/store.meade/js/spacer.gif';
  //]]&gt;
  &lt;/script&gt;
    &lt;script type="text/javascript" src="http://127.0.0.1/store.meade/js/index.php?c=auto&amp;amp;f=,lib/ccard.js,prototype/validation.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,varien/js.js,varien/form.js,varien/menu.js,mage/translate.js,mage/cookies.js"&gt;&lt;/script&gt;
    &lt;!--[if lt IE 7 ]&gt;
  &lt;script type="text/javascript" src="http://127.0.0.1/store.meade/js/lib/ds-sleight.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
    &lt;script type="text/javascript" src="http://127.0.0.1/store.meade/skin/frontend/base/default/js/ie6.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;var Translator = new Translate({"Please use only letters (a-z or A-Z), numbers (0-9) or underscore(_) in this field, first character should be a letter.":"Please use only letters (a-z or A-Z), numbers (0-9) or underscores (_) in this field, first character must be a letter."});&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="/meade/templates/system/css/system.css" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="/meade/templates/system/css/general.css" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="/meade/templates/Meade/css/style.css" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="/meade/templates/Meade/css/nivo-slider.css" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="/meade/templates/Meade/nivo-slider/themes/default/default.css" type="text/css" /&gt;
  &lt;script type="text/javascript" src="/meade/templates/Meade/js/jquery-1.6.1.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="/meade/templates/Meade/js/jquery.nivo.slider.pack.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Now i've tried whats on the official jquery site which is adding jQuery.noConflict(); and then replacing all the $( in the external .js files i've added with jQuery(, as well as in some of the inline jquery that I wasn't able to paste into here for some reason. But that didnt work, I also tried another variation of that with jQuery.noConflict(); and (function($) {  $(function() {  but couldnt seem to get that to work either. So I guess I just don't know if im making a stupid syntax mistake or if my understanding of how to use noConflict mode is completely off in general.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thank you</p>
  
  <p>EDIT:</p>
  
  <p>Ok so here's what I have now:</p>
  
  <pre><code>&lt;script type="text/javascript" src="&lt;?php echo $this-&gt;baseurl ?&gt;/templates/&lt;?php echo $this-&gt;template?&gt;/js/jquery-1.6.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  jQuery.noConflict();
  &lt;/script&gt; 
  &lt;script type="text/javascript" src="&lt;?php echo $this-&gt;baseurl ?&gt;/templates/&lt;?php echo $this-&gt;template?&gt;/js/jquery.nivo.slider.pack.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  jQuery(window).load(function() {
  
      jQuery('#slider').nivoSlider({
          effect:'boxRainGrowReverse',
          controlNavThumbs:true,
          prevText: ' ',
          nextText: ' ',
          pauseTime: 4000
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm still getting stack overflow errors and object not supported errors. Ive taken a look in the nivoslider js file and it looks like it's protecting the $ symbol already. If you think it may be a part of that file you can find it here: <a href="http://www.2shared.com/document/Dz0_2rBD/jquerynivosliderpack.html" rel="nofollow">http://www.2shared.com/document/Dz0_2rBD/jquerynivosliderpack.html</a></p>