I have some code that uses both jQuery and MooTools. Running it in Expressions Web, I have included the script tags for jQuery and MooTools and started the jQuery part like this:
jQuery.noConflict();
jQuery( document ).ready(function($) {
The MooTools followed after the jQuery closed. How can I achieve the same in jsfiddle, so that both jQuery and MooTools work simultaneously in the javascript section?
Here is the jsfiddle I am trying to run: http://jsfiddle.net/HamishT/fW8Y7/
You have 2 ways to add scripts is jsFiddle. In the "Frameworks & Extensions" and in "External Resources". You can get the link to jQuery or MooTools at: https://developers.google.com/speed/libraries/devguide
So from there you can do a fiddle like: http://jsfiddle.net/fW8Y7/2/
MooTools detects if the $ is already in use, in case you load MooTools after jQuery. So in that case you could use the $ for jQuery and document.id in MooTools wich is alias for $.
Anyway, unsing .noConflict() as you did is to me the best way.
Use the "External Resources" panel to add additional files. So add either jquery or mootools in the Frameworks panel and then add a url (e.g. cdn url) to the other in the external resources
Related
One bootstrap tab navigation panel is not working properly on my magento site because of the jQuery.noConflict() call that I have used in my custom JS file.
When I comment the jQuery.noConflict() line then my tab navigation works properly. However, I cannot comment that code because when I comment that line the main navigation doesn't work.
How can I make my tab navigation work without removing the jQuery.noConflict()? Thanks.
This is because Magento still uses prototype.js, change jQuery to $j
var $j = jQuery.noConflict();
For more details check this out
Using noConflict() should be fine, however I come across issues like this a lot with Magento.
I'm assuming you're definitely loading jQuery prior to your own jQuery script, etc.
I tend to find the most watertight way of ensuring your jQuery scripts don't cause issues is to wrap your scripts in an anoymous function:
(function($) {
// Your jQuery script
})(jQuery);
As you can see, we're passing the jQuery object as an argument to our function. This means we can use $ locally within the function without it conflicting with other scripts / frameworks / libraries, etc...
After I installed my jquery plugin http://farukat.es/journal/2011/02/514-new-creation-jquery-runloop-plugin in Joomla, I still can't call any function in there. It seems like there is nothing at all
In my Joomla template file index.php I included the called to GetDocument and AddScriptFunc for noConflicts() already. Do I have to open the javascript files in the plugin then Find + Replace All $ with jQuery to make it work ?
You have to add $.noConflict(); from beginning of the jquery functions.
Sometimes jquery wont works so you have to rename all jquery to $.
Include noconflict document in that page.
Try these ways hope it will works...
I am newbie to jQuery and javascript !!
To avoid any conflict in WordPress Plugin, I've included the following line in my JS file that is outside my page:
jQuery(document).ready(function() {
var yourFunc = function() {
//code
};
yourFunc();
});
Now when I click on plugin settings (which uses this javascript), opens the link in new tab and in that, an "more option" (toggle function) is not working. That might be due to WordPress or other, I dont know.
So Experts, Please help me, I want to open the links in same tab. I tried a lot but all in vain.
Are you using the $ in your JS? If so, while using jQuery in noConflict mode, you need to pass the $ in as a parameter to use as an alias for jQuery objects.
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
I am trying to use the Nivo JQuery Slider (http://nivo.dev7studios.com/) and a Scrollable Gallery (http://flowplayer.org/tools/demos/scrollable/index.html).
Now I have run into a problem, basically the Nivo Slider uses this JQuery Library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
and the Scrollable Gallery uses this one:
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
When both are enabled, only the thumbnail gallery works (because it's script import is done after the nivo's), when the 1.42 version is enabled only the Nivo works, and when only the 1.2.5 version is enabled only the Scrollable Gallery Works.
What should I do?
use this solution if you cannot use a single jQuery file for both the plugins:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jQuery_1_4_2 = jQuery.noConflict();
</script>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
To use jQuery 1.4.2, put the code using it in a SEF (Self Executing Function) like this:
(function($){
//code using jQuery 1.4.2
//here the $variable will be the jQuery object of 1.4.2
})(jQuery_1_4_2)
For jQuery 1.2.5, you can use $ variable directly.
UPDATE:
Based on your comment, following is the way to use it.
If you want to use jQuery 1.4.2, use jQuery_1_4_2 object
For example: jQuery_1_4_2("#abc").slider(options)
If you want to use jQuery 1.2.5 use $ or jQuery object
For example: $("#abc").scrollable(options)
Jquery Tools website says that an upgrade is due out in just over a month bringing it in compliance up to Jquery 1.6.
That being said, there's a ton of different ways to skin this cat, and most aren't this behind the times. I've been using jQuery Infinite Carousel with great success. It looks and acts nearly identical and is written with no conflicts with the latest version of jQuery.
It wasn't clear from your posting, but I would avoid loading two different versions of Jquery if you're doing so. It's a TON of extra overhead that's really not helping your site at all.
Simple just copy & paste this java script code in your "HEAD" TAG
// jquery version conflict code
var newJQuery = jQuery.noConflict(true),
oldJQuery = jQuery;
(function ($) {
// code that needs 1.4.2 goes here
}(newJQuery));
(function ($) {
// code that needs 1.2.6 goes here
}(oldJQuery));
// code that needs oldJQuery and newJQuery can go here
and see it's work 110%..........................:) Enjoy!!!
I am using file below..
src="js/jquery-1.4.4.min.js">
src="js/filterable.pack.js">
src="js/prototype.js">
src="js/scriptaculous.js?load=effects,builder">
src="js/lightbox.js">
please help.. or tell is there any conflict b/w jquery files or something else..
If you use jQuery and Prototype in the same page, it's best to:
include jQuery after Prototype (so it has the $ it can restore)
call jQuery.noConflict() on jQuery, then use jQuery or whatever variable you set instead of $
Once you change the script order, it would look like this:
var $j = jQuery.noConflict();
$j(".selector").myPlugin();