We Keep Coding

jQuery noconflict and multiple libraries

I have multiple jquery libraries loaded, (cant change that, hosted ecom platform, with limited access to certain things) so I need to noconflict them.
current code:
<script type="text/javascript">
$(document).ready(function() {
$('nav#menu').mmenu({
slidingSubmenus: false
});
});
</script>
would like it to use a diff variable like:
<script type="text/javascript">
var jQuery_1_11_1 = jQuery.noConflict(true);
</script>
so something like:
<script type="text/javascript">
jQuery_1_11_1(document).ready(function() {
jQuery_1_11_1('nav#menu').mmenu({
slidingSubmenus: false
});
});
</script>
but, not having any luck...
thanks in advance for any help!

I don't believe .noConflict() is what you're after here as all it will do is remove jQuery from the global $ namespace.
The problem you're having is that you'd like multiple jQuery versions to co-exist on the same page.
Your general approach of assigning to a variable is correct. Script load order is important. If your 1.11.1 version shouldn't conflict with an older version lets say 1.7.2 you need to ensure you load your version first, assign to a variable and then load the version you want to assign to the global $ last
<script type="text/javascript" src="jquery.1.11.1.js"></script>
<script type="text/javascript">
var $jq111 = jQuery;
// here we have set $jq111 to the current jQuery object which is 1.11.1
// at this point $ and jQuery are also 1.11.1
</script>
//IMPORTANT: now you will load any plugins for 1.11.1 these are and should only be accessable with the 1.11.1 library but if the plugin uses the global $ you may have problems more on that later
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="jquery.1.7.2.js"></script>
<script>
// at this point $ and jQuery are 1.7.2
// $jq111 should be 1.11.1
// to do something with 1.11.1
$jq111('nav#menu')...
// The menu plugin is loaded in the context of 1.11.1
// To ensure subcalls to the global $ work we need to create a block
(function( $, undefined ) {
// $ in this scope is pointing to $jq111
$('nav#menu').menu(...)
}( $jq111 ));
</script>

What errors are you getting? Have you tried this:
<script type="text/javascript">
jQuery_1_11_1(function($) {
$('nav#menu').mmenu({
slidingSubmenus: false
});
});
</script>

Conflicts with jquery scripts

I'm a new JQuery programmer, here is my head code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function myfunction(){
$("button").click(function(){
$("p").hide();
};
});
$(document).ready(myfunction);
</script>
this script works perfectly, but when i add these other three scripts in the page:
<script type="text/javascript" src="/file/js/prototype.js"></script>
<script type="text/javascript" src="/file/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/file/lightbox/js/lightbox.js"></script>
che console error gave me:
Uncaught TypeError: undefined is not a function
on '$(document).ready(myfunction);' line.
what is the error? Is a conflict problem?

jQuery defines a function called $ that you are trying to use.
prototype.js also defines a function called $ and overwrites the one from jQuery.
Use jQuery to refer to the jQuery function instead of $.

Prototype.js also uses the global $ variable. You need to make sure they don't conflict with each other by using the jQuery variable instead:
// wrap it up
(function($) {
function myfunction() {
$("button").click(function(){
$("p").hide();
});
};
$(document).ready(myfunction);
})(jQuery);
You can also just replace all jQuery $ uses with jQuery, but the method above is generally simpler to implement and maintain.

Firebug giving jQuery "$ is undefined" error even when jQuery is loaded before the script

OK so I have a WordPress site. It uses quite a few jQuery scripts and jQuery is loaded in the pages' headers. I have a small block of code that should simple add a class to image links. I have placed this at the bottom of the document, just before the </body> tag.
<script type="text/javascript">
$.noConflict();
$(document).ready(function () {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>
The script does not work and Firebug is giving me a $ is undefined error. I have checked various similar other question and the answers do not seem to help.
The source page is here: http://sergedenimes.com/2013/01/bruno-bisang-30-years-of-polaroids/
I'm sure it is another plugin causing a conflict but I would appreciate any guidance on how to solve this.
Edit: Wow thanks for the very rapid response. Seems it was an earlier plugin rendering $ undefined. Replacing with jQuery has solved.

You already did jQuery.noConflict(); earlier in your code thereby making $ undefined.
Look at line 79 of your source code.

$.noConflict(); makes the $ symbol go back to it's previous definition before jQuery was loaded. If there were no other libraries using that symbol, then it goes back to undefined. That is its purpose.
If you're going to use that and not define any other symbol as a shortcut for jQuery, then you must use jQuery as the symbol for jQuery functions instead of $.
Do this instead:
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function () {
jQuery('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>
or, if you're only trying to use $ inside the .ready() handler, then you can assign it using a feature of .ready() like this:
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function ($) {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>
or if you have code that isn't just in the .ready() handler that wants to use $, you can redefine $ in a closure which lets other libraries use $ in their own code, but you can use it for jQuery in your jQuery code inside the closure:
<script type="text/javascript">
$.noConflict();
(function($) {
$(document).ready(function () {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
$.each(whatever...)
})(jQuery);
</script>
or, you can define a new shortcut symbol for jQuery:
<script type="text/javascript">
var $$ = $.noConflict();
$$(document).ready(function () {
$$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>

Try:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>

firefox addon - self.port.on conflicting with $ (jquery) .

In my main.js file : I configured the contentScriptFile to be script.js . Also, this script file is embedded in index.html which is a tab which will be opened using tabs.open .
I have self.port.on and jquery related things in that script file . If self.port is written on the top of other jquery things, self.port.on is working and jquery is not working . But, self.port.on is written below, jquery is working fine and self.port is not working.
The script file actually deals with the data obtained using self.port (will come only when tab opened,).

What about wrap all your jQuery code in a safe environment?
Using $:
(function($) {
// use $
})(jQuery)
Using $jq:
(function($jq) {
// use $jq
})(jQuery)

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
This technique is especially effective in conjunction with the .ready() method's ability to alias the jQuery object, as within callback passed to .ready() we can use $ if we wish without fear of conflicts later:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
$("div").hide();
});
// Code that uses other library's $ can follow here.
$("content").style.display = 'none';
</script>
Source: jQuery.noConflict

Use jQuery's noConflict setting.
$jq = jQuery.noConflict(); //use $jq instead of $

How do I implement JQuery.noConflict() ?

I am using both javascript and jquery code on the same html page. For some reason, the jQuery library is stopping my native javascript code from working properly.
I found this page: jQuery No Conflict that says you can use a jquery.noConflict to release $ back to javascript. However, I'm not sure how to do this?
Specifically, I'm not sure how to implement this correctly? Where does the the Jquery code go, where does the JS code go?
My code is below:
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

jQuery.noConflict will reset the $ variable so it's no longer an alias of jQuery. Aside from just calling it once, there's not much else you really need to do. Though, you can create your own alias with the return value, if you'd like:
var jq = jQuery.noConflict();
And, generally, you want to do this right after including jQuery and any plugins:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery-plugin.js"></script>
<script type="text/javascript">
jQuery.noConflict();
// Code that uses other library's $ can follow here.
</script>
<script type="text/javascript" src="/path/to/prototype.js"></script>
You can also go one step further and free up jQuery with noConflict(true). Though, if you take this route, you'll definitely want an alias as neither $ nor jQuery will probably be what you want:
var jq = jQuery.noConflict(true);
I think this last option is mostly used for mixing versions of jQuery, particularly for out-dated plugins when you want to update jQuery itself:
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery-older-plugin.js"></script>
<script type="text/javascript">
var jq144 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery-newer-plugin.js"></script>

By default, jquery uses the variable jQuery and the $ is used for your convenience. If you want to avoid conflicts, a good way is to encapsulate jQuery like so:
(function($){
$(function(){
alert('$ is safe!');
});
})(jQuery)

If I'm not mistaken:
var jq = $.noConflict();
then you can call jquery function with jq.(whatever).
jq('#selector');

It's typically used if you are using another library that uses $.
In order to still use the $ symbol for jQuery, I typically use:
jQuery.noConflict()(function($){
// jQuery code here
});

It allows for you to give the jQuery variable a different name, and still use it:
<script type="text/javascript">
$jq = $.noConflict();
// Code that uses other library's $ can follow here.
//use $jq for all calls to jQuery:
$jq.ajax(...)
$jq('selector')
</script>

If you look at the examples on the api page there is this:
Example: Creates a different alias instead of jQuery to use in the rest of the script.
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
Put the var j = jQuery.noConflict() after you bring in jquery and then bring in the conflicting scripts. You can then use the j in place of $ for all your jquery needs and use the $ for the other script.

In addition to that, passing true to $.noConflict(true); will also restore previous (if any) global variable jQuery, so that plugins can be initialized with correct jQuery version when multiple versions are being used.

You simply assign a custom variable for JQuery to use instead of its default $. JQuery then wraps itself in a new function scope so $ no longer has a namespace conflict.
<script type="text/javascript">
$jQuery = $.noConflict();
// Other library code here which uses '$'
$jQuery(function(){ /* dom ready */ }
</script>

The noConflict() method releases the $ shortcut identifier, so that other scripts can use it for next time.
Default jquery $ as:
// Actin with $
$(function(){
$(".add").hide();
$(".add2").show();
});
Or as custom:
var j = jQuery.noConflict();
// Action with j
j(function(){
j(".edit").hide();
j(".add2").show();
});

<script src="JavascriptLibrary/jquery-1.4.2.js"></script>
<script>
var $i = jQuery.noConflict();
// alert($i.fn.jquery);
</script>
<script src="JavascriptLibrary/jquery-1.8.3.js"></script>
<script>
var $j = jQuery.noConflict();
//alert($j.fn.jquery);
</script>
<script src="JavascriptLibrary/jquery.colorbox.js"></script>
<script src="Js/jquery-1.12.3.js"></script>
<script>
var $NJS = jQuery.noConflict();
</script>
You can do it like this:
<script>
$i.alert('hi i am jquery-1.4.2.js alert function');
$j.alert('hi i am jquery-1.8.3.js alert function');
</script>

Today i have this issue because i have implemented "bootstrap menu" that uses a jQuery version along with "fancybox image gallery". Of course one plugin works and the other not due to jQuery conflict but i have overcome it as follow:
First i have added the "bootstrap menu" Js in the script footer as the menu is presented allover the website pages:
<!-- Top Menu Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var jq171 = jQuery.noConflict(true);
</script>
And in the "fancybox" image gallery page as follow:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="fancybox/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
And the good thing is both working like a charm :)
Give it a try :)

I fixed that error by adding this conflict code
<script type="text/javascript">
jQuery.noConflict();
</script>
after my jQuery and js files and get the file was the error (found by the console of browser) and replace all the '$' by jQuery following this on all error js files in my Magento website. It's working for me good.
Find more details on my blog here

/* The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. */
var jq = $.noConflict();
(function($){
$('document').ready(function(){
$('button').click(function(){
alert($('.para').text());
})
})
})(jq);
Live view example on codepen that is easy to understand: http://codepen.io/kaushik/pen/QGjeJQ