jQuery No Conflict Still Conflicts with Other Vers

Question

I am trying to run the dual slider plugin alongside with an estalge view-box. They both use jQuery, and work separately but when i placed them together, one breaks. I have tried implementing the jQuery no conflict rule, but i think i may be missing a small detail somewhere. My coding so far looks like :

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.timers-1.2.js" type="text/javascript"></script>
<script src="scripts/jquery.dualSlider.0.3.js" type="text/javascript"></script>
<!-- START ESTALGE -->
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/jquery.etalage.min.js"></script>

<script type="text/javascript"> 

  $.noConflict();
  jQuery(document).ready(function($) {
                jQuery('#etalage').etalage();
            });

    $(".carousel").dualSlider({
                auto:true,
                autoDelay: 6000,
                easingCarousel: "swing",
                easingDetails: "easeOutBack",
                durationCarousel: 1000,
                durationDetails: 500

            });

    </script>

Any help would be greatly appreciated. Thank You

Answer 1

If you have to use multiple versions of jquery then use

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
    var jq132 = jQuery.noConflict();
</script>
<script src="js/jquery-1.6.2.min.js"></script>

Now call the older version of jquery like

jq132('element').doSomething();

and newer version of jquery could be as follows

$('element').doSomething();

Answer 2

You can have multiple jQuery versions, $.noConflict will return you the jQuery object. You'd need to save it as another variable.

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-1.6.2.min.js"></script>
<script>
    $jq = $.noConflict();
    // $jq is jQuery 1.6.2
    // $ is jQuery 1.3.2
</script>

DEMO: http://jsbin.com/uhazan/3/edit#javascript,html,live

NOTE: The jQuery variable will be set to 1.6.2 (the 2nd one), if you want it to be 1.3.2 (the 1st one), pass true to $.noConflict.

P.S. You may want to put your $(".carousel").dualSlider inside the $(document).ready(.

Answer 3

You are using noConflict incorrectly.

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

<!-- INCLUDE ANY SCRIPTS HERE THAT RELY ON 1.3.2 -->

<script type="text/javascript"> 
    // HERE WE CAN USE 1.3.2

    // re-assign 1.3.2 to a new variable so we can use it later
    var $jq132 = $.noConflict();
</script>

<script src="js/jquery-1.6.2.min.js"></script>

<script type="text/javascript"> 

    // $ is now 1.6.2 and $jq132 is 1.3.2, both can be used.

</script>

Answer 4

You don't need two jQuery Core Lib includes

Try this instead:

<script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.timers-1.2.js" type="text/javascript"></script>
<script src="scripts/jquery.dualSlider.0.3.js" type="text/javascript"></script>
<!-- START ESTALGE -->
<script src="js/jquery.etalage.min.js" type="text/javascript"></script>

<script type="text/javascript"> 

 jQuery(document).ready(function($) {

 jQuery('#etalage').etalage();
 jQuery(".carousel").dualSlider({
            auto:true,
            autoDelay: 6000,
            easingCarousel: "swing",
            easingDetails: "easeOutBack",
            durationCarousel: 1000,
            durationDetails: 500

        });
});
</script>

Answer 5

Try placing your slider inside jQuery(document).ready(function($) {});

From the owner site

Does Etalage support jQuery no-conflict mode?

The plugin itself is noconflict ready. Just replace the "$" with "jQuery" where you initiate the plugin, like so:

jQuery(document).ready(function(){
    jQuery('#etalage').etalage();
});

Answer 6

The $(".carousel").dualSlider({ line is outside the jQuery(document).ready() function, which I'm pretty sure is not your intention. For the moment, this would work:

jQuery.noConflict();
jQuery(document).ready(function($) {
    $('#etalage').etalage();

    $(".carousel").dualSlider({
        auto:true,
        autoDelay: 6000,
        easingCarousel: "swing",
        easingDetails: "easeOutBack",
        durationCarousel: 1000,
        durationDetails: 500
    });
});

However, there are other problems with your code. You are bringing in two versions of jQuery, one of which is very old (1.3.2). You won't get good results with this. If there is some library that relies on older jQuery, please consider not using that library. It probably won't work well on this page anyway, since any runtime activity of that library will only have access to jQuery 1.6. The jQuery .noConflict docs mention that you can supply boolean true as an argument to .noConflict in order to free up the jQuery keyword as well, but by that time, your loaded plugins have already closed around the old version.