How do I avoid this jQuery files conflict?

Question

Here is the following code on my website which is under my < head > tag. There is a conflict between the jQuery file used for the "Banner Code" and the jQuery used for "Sticky navigation" as depicted below:

<!--Banner Code-->
    <script type='text/javascript' src='js/banner/jquery.min.js'></script><!--older version jQuery-->
    <script type='text/javascript' src='js/banner/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='js/banner/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='js/banner/camera.min.js'></script> 

    <script>
      jQuery(document).ready(function() {

            jQuery('#camera_wrap_4').camera({
                height: 'auto',
                loader: 'bar',
                pagination: false,
                thumbnails: false,
                hover: false,
                opacityOnGrid: false,
                imagePath: 'images/banner'
            });

        });
    </script>
<!-- End of Banner Code-->



<!--Sticky Navigation-->
<script type="text/javascript" src="js/jquery.js"></script><!--NEWER version jQuery-->
<script type="text/javascript" src="js/jquery.sticky.js"></script>
<script>
  $(document).ready(function(){
    $("#nav").sticky({topSpacing:0});
  });
</script>
<!--Sticky Navigation close-->

first things first dont use 2 different jquery's, you should be able to use one lib for both plugins — SpYk3HH, Jul 08 '13 at 22:45
and if you absolutely insist on 2 dif jQuery libs (which is unnecessary) then [**read here**](http://api.jquery.com/jQuery.noConflict/#example-4) — SpYk3HH, Jul 08 '13 at 22:47
Is this WordPress or something? Do you not have control over the "master page" (or whatever WP calls it)? — Adam Plocher, Jul 08 '13 at 22:47
@SpYk3HH - I know it is preferred to NOT use 2 jQuery files but I need them for this code. Because the "banner code" doesnt work with latest jQuery version (1.10.2) and the "sticky navigation" does not work with "jQuery.min.js" mentioned here. — Aniruddha Pondhe, Jul 08 '13 at 22:56

score 2 · Accepted Answer · edited May 23 '17 at 11:59

First of all, you should never need to use 2 different versions of jQuery. Always try to find a version compatible with the plugins you need and|or use the latest version compatible with the browsers you intend to support. If one of the plugins will only work with a very old version of jQuery, (like anything ver 1.43 and below) then you should really consider a different plugin as that one is probably not serviced regularly anymore.

So your head should look more like:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script><!--older version jQuery-->
<script type='text/javascript' src='js/banner/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='js/banner/jquery.easing.1.3.js'></script> 
<script type='text/javascript' src='js/banner/camera.min.js'></script>
<script type="text/javascript" src="js/jquery.sticky.js"></script>

<script>
    $(function() {
        $('#camera_wrap_4').camera({
            height: 'auto',
            loader: 'bar',
            pagination: false,
            thumbnails: false,
            hover: false,
            opacityOnGrid: false,
            imagePath: 'images/banner'
        });

        $("#nav").sticky({topSpacing:0});
    })
</script>

However!

If you absolutely insist on using some old carp, there is a solution.

<script type='text/javascript' src='js/banner/jquery.min.js'></script><!--older version jQuery-->
<script type='text/javascript' src='js/banner/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='js/banner/jquery.easing.1.3.js'></script> 
<script type='text/javascript' src='js/banner/camera.min.js'></script>

<script>
    var jqOld = jQuery.noConflict();
    jqOld(function() {
        jqOld('#camera_wrap_4').camera({
            height: 'auto',
            loader: 'bar',
            pagination: false,
            thumbnails: false,
            hover: false,
            opacityOnGrid: false,
            imagePath: 'images/banner'
        });
    })
</script>

<script type="text/javascript" src="js/jquery.js"></script>
<script>
    var jqNew = jQuery.noConflict();
    jqNew(function() {
        jqNew("#nav").sticky({topSpacing:0});
    })
</script>

... i think that's about right ...

Thanks for the information about using a compatible version. I tried it. I want to use a compatible like you said. Can you guide me as to how to choose a compatible version? I have 2 plugins: 1. Banner - needs old version jQuery (it is still being serviced.) 2. Sticky Navigation - works with new version jQuery - I tried using the older version for this - but it failed. So either one of them works at a time. Please help me. — Aniruddha Pondhe, Jul 08 '13 at 23:11
My suggestion would then be to Google another plugin that does what Banner does .. you say still supported, but if it's running on old jQuery, how supported can it really be? — SpYk3HH, Jul 08 '13 at 23:13
Thank you so much. It's working now. The common version that works for both is 1.7.1 So i am using that. I have one more question - is it preferred to load the jquery file locally from my server OR using a URL directly from GOOGLE? Which is better? — Aniruddha Pondhe, Jul 08 '13 at 23:43
And what is the difference between Minified version and regular version of jQuery. Which is preferred? — Aniruddha Pondhe, Jul 09 '13 at 00:09
@AniruddhaPondhe The way the code is written. Mini simply shortens variable names, shortens loops, and removes spaces and line breaks. — SpYk3HH, Jul 09 '13 at 11:07

score 0 · Answer 2 · answered Jul 08 '13 at 22:48

0

The jquery.min.js file and the jquery.js are different versions? try to remove the jquery.min.js and put jquery.js at the top of the others

answered Jul 08 '13 at 22:48

mgmathus

11
2

1

yes they are different versions. and I tried that but it doesn't work. – Aniruddha Pondhe Jul 08 '13 at 22:51

How do I avoid this jQuery files conflict?

2 Answers2

However!

Read More Here

And Here

And Here

And Here

Linked