JQuery Slideshow and MooTools Conflict - javascript

I am having a problem with the motools library conflicting with my jQuery library:
Here's the code:
<script language="Javascript" type="text/javascript" src="revamp/js/jquery-1.4.2.js"></script>
<script language="Javascript" type="text/javascript" src="revamp/js/jquery.blinds-0.9.js"></script>
<script type="text/javascript" src="js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="js/_class.viewer.js"></script>
<script type="text/javascript">//<![CDATA[
window.addEvent('domready',function(){
var V5 = new viewer($('boxCont').getChildren(),{
mode: 'alpha',
fxOptions: {duration:500},
interval: 6000
});
V5.play(true);
});
</script>
<script type="text/javascript">
$(window).load(function () {
// start the slideshow
$('.slideshow').blinds();
})
</script>
If I disable mootools, the slideshow work (vice versa with the jQuery). I tried wrapping the jQuery around jQuery.noConflict(); like so:
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
$(window).load(function () {
// start the slideshow
$('.slideshow').blinds();
})
});
</script>
But still the mootools dependent script doesn't work. Please help as I'm not really familiar with jQuery/javascript.
Thanks!

Once you call jQuery.noConflict(), you refer to jQuery via jQuery rather than $. $ is then usable by MooTools or another JavaScript library.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(window).load(function () {
// start the slideshow
jQuery('.slideshow').blinds();
})
});
</script>
If you want to give jQuery another name, you can do the following:
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function() {
jq(window).load(function () {
// start the slideshow
jq('.slideshow').blinds();
})
});
</script>

You want jQuery.noConflict().
But you don't really need to, because you are using jQuery for your jQuery alias, and you are passing $ as the argument which maps to the jQuery object.
So long as all your jQuery (and jQuery only) happens inside that jQuery(document).ready(), then you can use $ for jQuery and not worry about about clashes.

Related

Nivo slider conflict

I'm using a jquery plug-in scrolling plug-in called smint which is working fine, but as soon as I add in a nivo slider plug-in, smint stops working. I've followed the steps i've read in order to resolve this issue but I can't seem to find a fix. Can anyone kindly help?
Here's the header code;
<script type="text/javascript" src="js/jquery.smint.js"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready( function() {
jQuery('.subMenu').smint({
'scrollSpeed' : 1000
});
});
jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});
</script>
As yoou use noConflict() ,instead of $ sign use , jQuery. You need to include jQuery.noConflict(); once ,not twice.
jQuery.noConflict();
jQuery(document).ready( function() {
jQuery('.subMenu').smint({
'scrollSpeed' : 1000
});
});
jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});

Jquery Conflict which gives error

Working on an project which has variety of functionality in it such as,
Google translator
Image Slider [galleriffic used]
Popup window [Shadow box used]
JavaScript horizontal menu bar*
Now we are getting jquery conflict in it and error message such as
I know such message are occurred when the code doesn't find the jquery file but the files is present .
Here are the list of files used in the project
This is needed by the google translator
1.<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2. <script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
3. <script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
4. <script type="text/javascript" src="/scripts/jquery.bt.js"></script>
5. <script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"></script>
6. <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
7. <script type="text/javascript" src="/scripts/common.js"></script>
This one is for the slider
1. <script type="text/javascript" src="/SliderBox/js/jquery-1.3.2.js"></script>
2. <script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
3. <script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
This is for the popup window
1. <script type="text/javascript" src="/SliderBox/js/prototype.js"></script>
2. <script type="text/javascript" src="/SliderBox/js/effects.js"></script>
3. <script type="text/javascript" src="/SliderBox/js/lightwindow.js"></script>
4. <script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
This is needed by the horizontal menu
1. <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
2. <script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"></script>
3. <script src="../scripts/settingsEN.js" type="text/javascript"></script>
I have optimized all these and have included only one jquery file of jquery-1.9.1.min.js
but still not able to clear the conflict
Here is the sequence used by me
1. <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
2.<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
3. <script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
4. <script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
5. <script type="text/javascript" src="/scripts/jquery.bt.js"></script>
6. <script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"></script>
7. <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
8. <script type="text/javascript" src="/scripts/common.js"></script>
9. <script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
10. <script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
11.<script type="text/javascript" src="/SliderBox/js/prototype.js"></script>
12. <script type="text/javascript" src="/SliderBox/js/effects.js"></script>
13. <script type="text/javascript" src="/SliderBox/js/lightwindow.js"></script>
14. <script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
15.<script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"></script>
16. <script src="../scripts/settingsEN.js" type="text/javascript"></script>
I have tried all these
http://api.jquery.com/jQuery.noConflict/
http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUsing_jQuery_with_Other_Libraries%26redirect%3Dno
http://www.w3schools.com/jquery/jquery_noconflict.asp
I have tried all these
<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>
or
<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.
});
// Code that uses other library's $ can follow here.
</script>
or
jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
but still not able to get the Solution
When I remove this code of slider, every thing works fine , no errors but the slider will not work
<!--script for slider--->
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '', 'float' : 'right'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
random: true,
prevLinkText: '',
nextLinkText: '',
nextPageLinkText: '',
playLinkText: '',
pauseLinkText: '',
prevPageLinkText: '',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
<!--script end--->
Can anyone help?
I read your question and search on site of every plugins that you use.
Any List Scroller
Shadowbox.js
Prototype
Galleriffic
If something is missing plugin, publish it please.
I had the similar problem and I not used the $.noConflict(true);
If you project is the server that when this is open for take the file html.
I suggest for you that you insert the calling for external div in one file html.
And in every file html you can write the script with
$(document).ready(function () {
.............
});
You can't calling the file external in every file html because this create a normal conflict.
AND..
I suggest this site for look the last libraries... Google-libraries-last
AND..
I have optimized all these and have included only one jquery file of jquery-1.9.1.min.js but still not able to clear the conflict Here is the sequence used by me
This is better.
AND:::
For the error TypeError: $ is not a function depends how this function is implemented or write.
Possible error is ; or {, } , ( , )
This happens because another javascript library has been loaded and has overwritten the object $() shortcut for jQuery.
So when we include other javascript libraries besides jquery, we are exposing the jquery library to conflicts.
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 $.
One solution 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() like:
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ follow here.
});
// Code that uses other library's $ follow here.
</script>
Another solution is to reassign jquery object $() back to jquery library, wrapping up our call inside a function that reassigns $() object. Thus we make sure our code isn’t messed with Prototype, Scriptaculous, etc.
( function($) {
// Your jquery code
} ) ( jQuery );
Suppose:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
( function($) {
// Assigning $ again to jquery
$(document).ready( function() { alert("Now you can use to use '$' in your jquery code"); } );
} ) ( jQuery );
//this will fail
$(document).ready( function() { alert('This fails because $ has been modified outside jquery'); } );
</script>
This approach is a self-calling anonymous function style to avoid conflicts with jQuery. If you don't use it then you would have to type jQuery() instead of its object $().
Example:
$(document) //won't work
jquery(document) //will work
Example on JSFIDDLE.NET
Finally
Typeerror for null
Look on jquery-documentready-controlid-is-null
try to use .noConflict() in jQuery
<script src="....../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var jQuery_1_8_3 = $.noConflict(true);
</script>
<script type="text/javascript" src="...../jquery-1.4.2.js"></script>
<script type="text/javascript">
var jQuery_1_4_2= $.noConflict(true);
</script>
I went with this flow and the error was solved. Didn't need any .noConflict() and on!!!
1)<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2)<script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
3)<script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
4)<script type="text/javascript" src="/scripts/jquery.bt.js"></script>
5)<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
6)<script type="text/javascript" src="/scripts/common.js"></script>
7)<script src="/scripts/jQuery/insert_active_flash.js" type="text/javascript"></script>
8)<script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
9)<script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
10)<script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
11)<script type="text/javascript" src="/scripts/jquery.als-1.1.min.js"></script>
12)<script type="text/javascript" src="/scripts/settingsEN.js"></script>
The minified version javascript where having conflict with prototype.js. I just removed the prototype.js file and arranged all reference file in sequence [Sequence matters a lot]
Now the error is removed I was still wondering what was the actual issue with prototype.js ???

jQuery conflict with Prototype (noconflict doesnt work)

I use jQuery v1.6.4 http://code.jquery.com/jquery-1.6.4.js
and prototype.
I am trying to use the jQuery Tabs widget and it conflicts with prototype. As a result the upload button of an input isn't working.
I tried this to resolve but it doesn't seem to work.
<script type="text/javascript">
jQuery.noConflict();
_ccsjQ(function() {
_ccsjQ( "#tabs" ).tabs();
});
</script>
The funny thing is that if i press F5 the upload button works and when i refresh, doesnt work.
Easy way (IMHO) is just call jQuery.noConflict() then wrap any jQuery code in an anonymous function:
jQuery.noConflict();
(function($){
// use your standard $(...) in here
})(jQuery);
Alternatively, you need to assign jQuery a new alias if you're not going to use jQuery(...) (e.g. var jq = jQuery.noConflict(); then use jq(...)).
Example of both being used:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript">
var _cssjQ = jQuery.noConflict();
_cssjQ('.foo').css('color','#f0f');
(function($){
$('.bar').css('color','#f0f');
})(jQuery);
</script>
And the fiddle: http://jsfiddle.net/kbWah/1/
1) Define Jquery first
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2) Add script after Jquery and Before prototype
<script>
var pjquery = jQuery.noConflict();//pjquery will represent jquery framework now on-wards
</script>
3) Now define prototype.js
<script type = "text/javascript" src = "js/prototype.js" ></script>
Now where ever jquery is to be called use pjquery instead of $ or Jquery.

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>

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

Categories