How do I avoid jquery library conflicts?

Question

Can anyone help me please, I am new to jquery. I've added three jquery plugins for my project.

I want to know whether is it possible to have multiple jquery in single page?

Tell me what this file will do:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Please explain clearly whether these files are same or not, and what is the difference between libraries and versions? Is there any difference?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">

1.for ball bounce:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   <script>
  $(document).ready(function() {

$("ul.menu li,ul.social_media li").mouseenter(function () {
      $(this).effect("bounce", { times:2 }, 400);
});

  });
  </script>

2.for tab content:

<script src="javascript/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
        <script src="javascript/jquery.history_remote.pack.js" type="text/javascript"></script>
        <script src="javascript/jquery.tabs.pack.js" type="text/javascript"></script>


        <link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen">

        <script type="text/javascript">
            $(function() {
              $('#container-5').tabs({ fxSlide: false, fxFade: false, fxSpeed: 'normal' });
            });
        </script>

3.for scroll:

  <script src="js/jquery.thumbnailScroller.js"></script>
      <script src="js/jquery-ui-1.8.13.custom.min.js"></script>
      <link href="js/jquery.thumbnailScroller.css" rel="stylesheet" />

      <script>
(function($){
window.onload=function(){   
    $("#tS1").thumbnailScroller({       
        scrollerType:"hoverAccelerate",     
        scrollerOrientation:"horizontal",       
        scrollEasing:"easeOutCirc",         
        scrollEasingAmount:400,         
        acceleration:2,         
        scrollSpeed:400,        
        noScrollCenterSpace:4,      
        autoScrolling:0,        
        autoScrollingSpeed:1000,        
        autoScrollingEasing:"easeInOutQuad",        
        autoScrollingDelay:20 
    });
    $("#tS2").thumbnailScroller({ 
        scrollerType:"clickButtons", 
        scrollerOrientation:"horizontal", 
        scrollSpeed:2, 
        scrollEasing:"easeOutCirc", 
        scrollEasingAmount:600, 
        acceleration:4, 
        scrollSpeed:800, 
        noScrollCenterSpace:10, 
        autoScrolling:0, 
        autoScrollingSpeed:2000, 
        autoScrollingEasing:"easeInOutQuad", 
        autoScrollingDelay:500 
    });
    $("#tS3").thumbnailScroller({ 
        scrollerType:"hoverPrecise", 
        scrollerOrientation:"vertical", 
        scrollSpeed:2, 
        scrollEasing:"easeOutCirc", 
        scrollEasingAmount:800, 
        acceleration:4, 
        scrollSpeed:800, 
        noScrollCenterSpace:10, 
        autoScrolling:0, 
        autoScrollingSpeed:2000, 
        autoScrollingEasing:"easeInOutQuad", 
        autoScrollingDelay:500 
    });
}
})(jQuery);
</script>

This my code. Help me avoid conflicts in this code.

Answer 1

There are some MAJOR differences between the jQuery Lib Ver 1.5 (as shown in your question) and the latest Ver 1.72. One of the biggest being the introduction of .on() which is meant to replace the ever popular .live() and .delegate(). These jQuery methods bind events to the document and allow for a more dynamic layout. There is some confusion as to the differences, and i won't reinvent the wheel. Check out this StackOverflow Q&A for more info. Also, check out the 1.7 Release Notes for further information. In short, .on has improved performance and requires a little less typing.

As per the first real question, the 2 libraries jquery.min.js & jquery-ui.min.js, vary only by purpose and design. The First one mentioned is the actual jQuery Library, which provides all the .Net style help you need for JavaScript. It is the main Library that must be included to use the other.

The Second library mentioned is the jQueryUI Library, which is more of a User Interface Library for jQuery. It is also dependent on a CSS file (usually and best loaded in head BEFORE the jQuery Libraries are called). The CSS file is what really brings out the Power of the functions it adds to the jQuery Library. It actually extends alot to the jQuery Library, for instance, your "1.for ball bounce:" example uses the .effect method which is somewhat limited via only jQuery, but with jQueryUI, you are given the ability to use different easings and achieve more possible animations.

Bringing me to your "2.for tab content:". This is extremely overextended in that you have already included the jQueryUI library, thus you shouldn't really need to include the tabs.pack. You've also called on yet Another version of jQuery. Find more information on jQueryUI Tabs Here. You don't need any extra plugins or a different jQuery Library.

Finally, in your last example, you've again included more than what is necessarily needed. With the includes of the First example, you shouldn't need to add jQuery again. Below I'll show you a full rewrite and try to include everything you have without all the extra "garbage".

<!DOCTYPE html>
<html lang="en">
    <head>
        <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css">
        <!--
            Key Note:
                The following implies that you HAVE downloaded the Thumbnail Scroller plugin and placed its CSS
                File in a directory named "css" on the project directory.
                As far as I can tell it only extends the CSS of jQueryUI and therefor
                should be inserted just after the link for jQueryUI's CSS.
        -->
        <link href="css/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <!--
            Key Note:
                The following link ALSO implies that you downloaded this library and placed it
                in a directory named "js" on your project directory's home.
                In his blog article he show you placing this at the end and adding no conflict.
                If you are not using other Library rivals of jQuery (Prototype, MooTools, etc...),
                you don't really need to include noConflict.
                Also, adding the "framework" at the end of your HTML is a common and OLD practice.
                It's no longer the most effecient way to handle your "framework".
                It may be good still, to include your exterior work (aka, everything not in a library)
                to the end, but the framework should be the first thing that loads now a days, unless
                you like seeing weird 2 second pauses as you page is "built" after it's loaded.
        -->
        <script src="js/jquery.thumbnailScroller.js"></script>

        <script type="text/javascript">
            $(function() {
                $(".menu li, .social_media li").mouseenter(function () {
                    // altho, i'm not sure this will achieve the effect you want,
                    // yoiu might consider wrapping your list objects in a div
                    // with a class to call like:
                    // <li><div class="bounce-me">content</div></li>
                    // then simply change the previous line too:
                    // $(".bounce-me").mouseenter(...
                    $(this).effect("bounce", { times:2 }, 400);
                });

                $('#container-5').tabs({
                    fx: [{ // this basically calls jQuery's .animate command each time a tab is clicked
                        //  see http://api.jquery.com/animate/ for more info
                        duration: 'normal'
                    }]
                });

                $("#tS1").thumbnailScroller({      
                    scrollerType:"hoverAccelerate",     
                    scrollerOrientation:"horizontal",       
                    scrollEasing:"easeOutCirc",         
                    scrollEasingAmount:400,         
                    acceleration:2,         
                    scrollSpeed:400,        
                    noScrollCenterSpace:4,      
                    autoScrolling:0,        
                    autoScrollingSpeed:1000,        
                    autoScrollingEasing:"easeInOutQuad",        
                    autoScrollingDelay:20 
                });
                $("#tS2").thumbnailScroller({
                    scrollerType:"clickButtons", 
                    scrollerOrientation:"horizontal", 
                    scrollSpeed:2, 
                    scrollEasing:"easeOutCirc", 
                    scrollEasingAmount:600, 
                    acceleration:4, 
                    scrollSpeed:800, 
                    noScrollCenterSpace:10, 
                    autoScrolling:0, 
                    autoScrollingSpeed:2000, 
                    autoScrollingEasing:"easeInOutQuad", 
                    autoScrollingDelay:500 
                });
                $("#tS3").thumbnailScroller({
                    scrollerType:"hoverPrecise", 
                    scrollerOrientation:"vertical", 
                    scrollSpeed:2, 
                    scrollEasing:"easeOutCirc", 
                    scrollEasingAmount:800, 
                    acceleration:4, 
                    scrollSpeed:800, 
                    noScrollCenterSpace:10, 
                    autoScrolling:0, 
                    autoScrollingSpeed:2000, 
                    autoScrollingEasing:"easeInOutQuad", 
                    autoScrollingDelay:500 
                });
            });
        </script>
    </head>
    <body>
        <!-- CONTENT GOES HERE -->
    </body>
</html>

ONE LAST HELPFUL HINT

If you "test" your views in Google Chrome, press ctrl+shift+j to bring up the "firebug-like" console window and make sure everything loads correctly. Click the "Console" tab to see all error messages and warning as well as run your own test like:

$(".click-me").click(function(e) { 
    // the following will show in console when an element 
    // having the class "click-me" is clicked
    console.log("I've been Clicked!"); 
});

On a Side Note

You can use the Error and Warning message text to "Google" for answer to your problems. Not only in google, but next time you are stumped with an error, try the following:

Read the following all the way through as there is a very helpful hint at the end

• Open Google Chrome's Console with ctrl+shift+j
• Click the "Console" tab to see error messages
• Highlight the message text and press ctrl+c to copy
• Go to Google and Click the search bar
• Press ctrl+v to paste the message into the search field
• Put a "space" at the end of this text and type in "site:http://stackoverflow.com"
  • This will allow for your exact error message to be searched for on the StackOverflow site only, thus giving you plenty of Q&A on your exact Error!