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!!!
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...
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
ok so I am trying to get a custom alert box working. I am using jquery 2.1.0 and have found out that the jAlert fucntion is not fully functional in jquery 2.1.0. Well the jAlert function I am using is not anyway.
I am now trying to sort out a no conflict script so I can use jquery 1.2.6 for only this function and the normal 2.1.0 for my other functions.
I have never used this no conflict before so my code may be completely wrong as I misunderstood the description about no conflict.
The below code is my jquery includes
<script type="text/javascript" src="jquery/jquery-1.js"></script>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">
var jQuery_1 = $.noConflict(true);
</script>
<script type="text/javascript" src="jquery/jquery-2.1.0.js"></script>
if the above code is incorrect then I do apologize as this is where I misunderstood the no conflict part if i did misread it. The reason why I haven't made jquery-2.1.0.js also a no conflict is because I didn't/don't think I need to make that version no conflict as that is the default jquery I wish to run and earlier jquery versions can't conflict with that. I also thought that if I make this a no conflict then I need to go through all of my functions using the newer version of jquery and pass them through the no conflict function code.
The no conflict function code is what I am having troubles with, that is if the above code is correct of course.
below is the original code i got from a google search and this is also from the page where I read about the no conflict jquery
jQuery_1_1_3('<button>Use jQuery 1.1.3</button>')
.click(function() {
alert('Top: ' + jQuery_1_1_3(this).offset().top + '\n' +
'jQuery: ' + jQuery_1_1_3.fn.jquery);
})
.appendTo('body');
Below is my edited version of the code that isn't working of course and is probably totally wrong as I am bad a js and really need to learn it more.
<script type="text/javascript">
jQuery_1()
(function() {
jAlert("Player details updated successfully","Success"); })
</script>
I am more then willing to use a more up to date version of the alert box jquery function but i just can't seem to find one using Google for some reason.
The script it self will run after someone has submitted a from and has been headed back to a page and that is where the alert box appears to let them know everything went fine.
This is the link to the noConflict description I got my code and also read
http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/
I'am using the javascript code below to get vertical tabs displayed. In the first line I loaded the jquery library from https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js. Then follows the code below. So far so good but I was told by the admin to remove the first line from the content as the library is going to be loaded by drupal autmatically. Right now the 1.5.2 version is embeded into drupal, I removed the line where I was loading the library externally but my vertical tabs hover effect won't work any more. Any idea why this happened?
$(document).ready(function() {
$(".tabsnew .tab[id^=tab_menu]").hover(function() {
var curMenu=$(this);
$(".tabsnew .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
In Drupal 7 you can't use the $ function anymore (well, not out-of-the-box). The reason is that Drupal allows you to run more than one js library at once and $ is e.g. also used in prototype.
Instead, replace $(document) with jQuery(document) and so on.
Here is the page url http://meracd.com/design/disc_designer.php?disc=cd
I've used jqueryUI for the slider. But it isn't working. I've loaded jquery and jquery UI before the custom.js script.
You have multiple instances of jQuery on your page.
Your jQuery UI Slider Plugin is attaching to window.jQuery (which is version 1.6.2), but your custom.js code is trying to run against window.$ (which is version 1.6.4).
You need to either:
Get rid of one of them (there's no need to have both)
Alias the jQuery used in custom.js
Use noConflict() to resolve which jQuery gets access to the $ variable.
You saved my day, in my case, adding noConflict() solved my problem
sample of my code
#
MVC 4
<script src="/Scripts/jquery-1.8.3.js"></script>
<script src="/Scripts/jquery-ui-1.9.2.js"></script>
jQuery.noConflict();
$(function(){
// var $searchBox = $("input#SearchString");
$("input#SearchString").autocomplete({
source: []
});
});
I just want to say that I had a similar issue and solved it by upgrading my version of JQuery. I had a really old version on the site and by updating to the latest one the issue was resolved.