I’m using mootools-core-1.3.2.js & mootools-more-1.3.2.js to toggle hide/show a div
but since I started using jquery-1.4.4.js the mootools toggle stopped working
how can I fix this conflict?
Here is the jquery code I’m using on all of my pages
Thanks so much Anthony for your quick reply! it works beautiful!
however I just noticed that the fix doesn’t help for IE (checked in ie8) the mootools toggle/slider isn’t fixed with the noConflict, when I disable the jquery autocomplete, the toggle works fine but together it doesn’t work
(and as I was looking in ie I realized that the entire jquery autocomplete doesn’t work, any idea?)
oh how nice! works like a charm:) Thanks so much for the detailed help, I really didn’t think I’ll get out of this that fast
Thanks again Anthony and am glad I found this site!
after being so excited I found that another jquery used on the site broke after adding the jQuery.noConflict(); function
is it proper to post a link to the site? will it help?
Thanks
I don’t think there are any issues with posting a link to the site you are working on, as long as it’s not disreputable
Quick suggestion, in the jQuery you use instead of using this format:
$('#mydivid');
try this:
jQuery('#mydivid');
I find it alot easier to avoid using the $ function where it’s possible 2 libraries might be implemented. Using jQuery.noConfict() removes $ from the global namespace so other libraries can use it meaning any code you wrote using $ referring to jQuery won’t work. You basically have to either wrap the other code in a closure that passes $ in as an argument telling it that $ is jQuery, or replace ‘$’ with ‘jQuery’ in your code (or rename the jQuery object, you can do that too).
If you aren’t sure what the closure does:
// $ === jQuery
jQuery.noConflict(); // removes $
(function($){
// inside this closure I can write code that doesn't exist in the global namespace
// $ === jQuery;
})(jQuery);
// $ !== jQuery
I’m probably not the best person to explain it, but the closure is an anonymous function that is being executed straight away changing the scope of all the code that sits inside it. It’s like a safe little nest for code that could possible interfere with global scope.
few questions:
will add the noconflict to the other jquery fix this?
is there something in jquery that I can use instead of the mootools slider?
is there something like the noconflict that can do within the mootools and leave alone the jquery. (jquery is used all over the site, but the mootools slider is only on the above page)
did so didn’t help, however i’m not sure to which problem you refer, I had 2 problems; #1 the mootools slider didn’t work, fixed the jquery using noConflict but problem #2 came in disabling another jquery
is there something in jquery that I can use instead of the mootools slider?
This is probably the best idea. You might be able to find something that does the same thing in jQuery instead of mootools. Bringing in 2 libraries is going to add extra weight to your page load and cause you to spend extra time trying to get them not to conflict.
I couldn’t really comment on other options with mootools, I haven’t touched it for several years.
Hi, can someone help me to fix the conflict between jQuery and Mootools?
I’m using jQuery 1.7.2 on my website which is under develepment. But since I started using mootools.1.2.js the carousel stopped working.
Here is the carousel’s script.
var OpenArticleOnClickInactive = true;
var OpenArticleOnClickActive = true;
/* Transition Options */
var DisableTransitions = false;
var ImageTransitionOnPagingControls = false;
var ImageTransitionOnNavSelect = false;
var ImageTransitionSpeed = 750;
var TitleTransitionSpeed = 500;
var TitleTransitionOnPaging = true;
var Highlights; var TransitionTimer; var BubbleTimer;
String.prototype.trim=function(){return this.replace(/^\\s+|\\s+$/g,"");};
function HPHLObject(){this.title = null;this.subtitle = null;this.image = null;this.url = null;this.duration = 6;};
$('document').ready(function(){
Highlights = new HPHL();
$('#HPHLNav ul li p').each(function(ind,val){$(this).css('top',(parseInt(64-$(this).innerHeight())*.5)-2+'px')});
Highlights.Init(); $('#HPHLCurrent').on('click',function(){location.href = Highlights.GetContent()[Highlights.GetCurrentIndex()].url});
$('#HPHLPrev').on('click',function(){Highlights.Prev();});$('#HPHLNext').on('click',function(){Highlights.Next();});
if(!OpenArticleOnClickInactive){$('#HPHLNav ul li a').click(function(e){e.preventDefault();Highlights.Clicked(e);});}
});
function HPHL(){
var that = this; var contents = new Array();
var total = function(){return $('#HPHLNav ul li').size();};
var nextI = function(){return (currentI() == (total()-1)) ? 0 : currentI() + 1;}
var prevI = function(){return (currentI() == 0) ? total() - 1 : currentI() - 1;}
var currentI = function(){return $('#HPHLNav ul li.Active').index();}
this.Init=function(){
$('#HPHLNav ul li').each(function(i,e){
var obj = new HPHLObject(); var Img = $(e).find('img');
obj.duration = parseInt(RegExp(/Duration_([0-9]+)/).exec($(this).attr('class')).pop());
obj.title = $(e).text().trim(); obj.url = $(e).find('a').attr('href');
obj.subtitle = $(e).find('a').attr('title'); obj.alt = $(Img).attr('alt');
obj.src = $(Img).attr('src'); contents.push(obj);})
Ni = nextI(); that.SetTimer(contents[Ni].duration,Ni);}
this.GetContent = function(){return contents;}
this.GetTotal = function(){return total();}
this.GetCurrentIndex = function(){return currentI();}
this.GetNextIndex = function(){return nextI();}
this.GetPrevIndex = function(){return prevI();}
this.GetCurrentDuration = function(){return contents[currentI()].duration;}
this.Next = function(){return (ImageTransitionOnPagingControls) ? that.Transition(nextI()) : that.Switch(nextI());}
this.Prev = function(){return (ImageTransitionOnPagingControls) ? that.Transition(prevI()) : that.Switch(prevI());}
this.Clicked = function(e){var curI = Highlights.GetCurrentIndex(); var clkI = $($(e.currentTarget).parentsUntil('li').parent()).index();
return (clkI == curI && OpenArticleOnClickActive)
? location.href = that.GetContent()[curI].url
: (ImageTransitionOnNavSelect ? that.Transition(clkI) : that.Switch(clkI));}
this.Transition=function(i){
if(DisableTransitions) return that.Switch(i);
var iSpeed = ImageTransitionSpeed ? ImageTransitionSpeed : 'slow';
var tSpeed = TitleTransitionSpeed ? TitleTransitionSpeed : 'medium';
clearTimeout(BubbleTimer);
BubbleTimer = setTimeout(function(){
$('#MarqueeText').animate({opacity: 0},25,function(){
$(this).animate({top:'30px'},25,function(){
$('#MarqueeText .HPHLSubtext').hide();
$('#MarqueeText a').attr('title',contents[i].subtitle).attr('href',contents[i].url).html(contents[i].title);
$('#MarqueeText .HPHLSubtext').html(contents[i].subtitle);
$('#MarqueeText .HPHLSubtext').fadeIn(tSpeed,'swing');});
$(this).animate({top: '0px', opacity: 1},250,'swing');});},200);
$('#HPHLCurrent a').attr('title',contents[i].alt);
$('#HPHLCurrent a').attr('href',contents[i].url);
$('<img class="HPHLImage" alt="' + contents[i].alt + '" src="' + contents[i].src + '" />').insertBefore('#HPHLCurrent .HPHLImage:first-child');
$('#HPHLCurrent .HPHLImage:not(:first-child)').fadeTo(iSpeed,0,function(){
$('#HPHLCurrent .HPHLImage:not(:first-child)').remove();});
$('#HPHLNav ul li.Active').removeClass('Active'); $($('#HPHLNav ul li').get(i)).addClass('Active');
Ni = nextI(); that.SetTimer(contents[Ni].duration,Ni);}
this.Switch = function(i){
$('#HPHLCurrent a').attr('title',contents[i].alt).attr('href',contents[i].url);
$('#HPHLCurrent .HPHLImage').attr('alt',contents[i].alt).attr('src',contents[i].src);
$('#MarqueeText a').attr('alt',contents[i].alt).attr('href',contents[i].url).html(contents[i].title);
$('#MarqueeText .HPHLSubtext').html(contents[i].subtitle);
$('#HPHLNav ul li.Active').removeClass('Active'); $($('#HPHLNav ul li').get(i)).addClass('Active');
Ni = nextI(); that.SetTimer(contents[Ni].duration,Ni);}
this.SetTimer = function(seconds,itemIndex){clearTimeout(TransitionTimer); TransitionTimer=setTimeout('Highlights.' + (DisableTransitions ? 'Switch' : 'Transition') + '('+itemIndex+')',(seconds*1000));}}
The easier way is to use jQuery’s noConflict, which tells jQuery to let go of the $ symbol.
See how to best use use noConflict in this tips & tricks post.
