Multiple jQuery scripts conflict

Question

I have a problem with some jQuery scripts. They work separately(when usage of another is commented) but when I want them to work together it stops working completely. I read about .noConflict() method. However, I'm quite new to js and jQ and I'm not sure if it is what I'm looking for. What is more, even it is the problem, I'm probably unable to use noConflict() correctly. I would be really glad if anybody coud help me.

Part of my header:

<script src="jquery-1.11.0.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
<!--<script src="jquery.carouFredSel-6.2.1.js" type="text/javascript"></script>-->

The usage of scripts:

<script type="text/javascript">
                            $(document).ready(function() {

                            $("#1, #2, #3").lavaLamp({
                                fx: "backout", 
                                speed: 700,
                                click: function(event, menuItem) {
                                    return false;
                                }
                            });
                    /* COMMENTED Carousel
                                var images = jQuery("#images").carouFredSel({
                                    direction           : "up",
                                    items: {
                                             visible: 1,
                                             width: 824,
                                             height: 320
                                            },
                                    scroll : {
                                        onBefore: function() {
                                      var act_pos = images.triggerHandler("currentPosition");
                                      jQuery("#scroller-active").animate(
                                       {"top": (act_pos*80)+"px" },
                                       300,
                                       "swing"
                                      );
                                     }                    
                                    }                   
                                });


                            jQuery(".konstrukcje").mouseover(function() {
                            jQuery("#images").trigger("slideTo",0);
                            })
                            jQuery(".dachy").mouseover(function() {
                             jQuery("#images").trigger("slideTo",1);
                            })
                            jQuery(".budowlane").mouseover(function() {
                             jQuery("#images").trigger("slideTo",2);
                            })
                            jQuery(".projekt").mouseover(function() {
                             jQuery("#images").trigger("slideTo",3);
                            })*/
                        });
                        </script>

Code above works, but only the lavaLamp part. When I remove the comments it will all crash.

score 0 · Answer 1 · answered Feb 24 '14 at 22:47

You can see samples here: http://www.w3schools.com/jquery/jquery_noconflict.asp

There are different ways to use it, I have just used this way of doing it:

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery is still working!");
  });
});

That way means that you then use jq instead of what you used before. I find this to seperate it more, yet if you are changing someone elses code, it might be time consuming to edit all the code. Then the other ways might be better.

This might or might not affect your problem, as there might be many reasons you have issues. Maybe you have something with preventDefault that triggers? Or maybe something else :-) It's time to get to know mr. console and have a cup of coffee with him.

Multiple jQuery scripts conflict

1 Answers1