Multiple jQuery.noConflict() instances...

Question

I am working with several jQuery scripts that include a MenuFader (http://css-tricks.com/examples/MenuFader/), twitter feed, and timestamp. Additionally I have a couple Mootools scripts that include the Barackslideshow (http://devthought.com/wp-content/moogets/BarackSlideshow/demo.html). And finally I have a scrolling ticker with tooltips taken from the twitter homepage.

I originally had a conflict with the Jquery MenuFader and Mootools BarackSlideshow, but easily fixed this issue with the jQuery.noconflict(); and replaced all corresponding $ with jQuery.

Unfortunately, after I added the scrolling ticker from Twitter, the Mootools BarackSlideshow and the Jquery MenuFader no longer work.

I tried to implement jQuery.noconflict(); then $.noconflict(); then var j = jQuery.noconflict(); and replacing the $ as I did previously, but I cannot get the scripts to play nicely.

Any help is greatly appreciated...I have been working on this all day. I am pretty new with javascript, but have managed to get through most problems with a little persistence. Please take a look at the script below:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"     type="text/javascript"></script>
<script src="http://a2.twimg.com/a/1274914417/javascripts/fronts.js" type="text/javascript"></script> 

<script type="text/javascript"> 
//<![CDATA[

      $( function () {

  setTimeout(function() { $(".twtr-widget").append($("<div></div>").attr("class", "twtr-fade")); }, 0);

  (function() {
    var tabIndex = $("[tabindex]:last").attr("tabIndex");
    var setTabIndex = function() {
      $(this).attr("tabindex", ++tabIndex);
    }
    $(".footer-nav a").each(setTabIndex);
    $(".language-select a").each(setTabIndex);
  })();

    $("#signup_submit").scribe({
    event_name: "signup_submit_click",
    experiment: "ab_signup_button",
    bucket: "sign_up"
  }, "www_ab_tests");

  $('#signin_menu').isSigninMenu();

      new FrontPage().init();

      });

//]]>

Answer 1

noConflict is simply and only about changing the name the jQuery library is available under.

This is an attempt to play nicer with other frameworks that may also want to use the name $, but that's all it does. It does not solve any other kind of general conflict with other frameworks. For example when one framework clones, changes or removes an element with jQuery's internal ID markers, weird undebuggable errors may ensure. It is still a really bad idea to use more than one framework on a single page, when they're as wide-ranging and intrusive as jQuery. (Especially jQuery 1.3, which was super-promiscuous about what elements it touched.)

Similarly, two high-level plugins that operate on the same elements are very likely to have unwanted behavioural interactions. Say one plugin binds a behaviour to an element, but then the other plugin deletes that element to replace it with a progressive-enhanced version. Or one plugin tries to read the offsetWidth of an element that no longer has a visible width because another plugin has called hide() on its parent.

Scripts and plugins may pretend to be fully encapsulated behaviours that you can throw around without understanding how they work, but they really aren't. If you bind two scripts (that have not been deliberately designed to work together) to the same elements they are likely to interfere or fail. Try to keep elements that will be affected by different plugins apart from each other to reduce this potential.