Solved

Jquery Conflict

Posted on 2013-11-28
12
316 Views
Last Modified: 2013-11-30
I'm working on a website that uses 2 jquery plugins. The menu and the background slider.
When I use both at the same time only the menu works as intended.
If I remove the menu scripts the backslider works normally.

Link: www.avnation.co/index.php
0
Comment
Question by:zahimezher
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
12 Comments
 
LVL 13

Expert Comment

by:duncanb7
ID: 39683256
Did you read this article before ?

http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

it might be similar to your issue

Hope understand your question completely, if not , please point it out


Duncan
0
 
LVL 58

Accepted Solution

by:
Gary earned 450 total points
ID: 39683679
You have a conflict between MooTools and jQuery - both are trying to use $ - so to use the jQuery library you just use jQuery instead of $

Change
$('#bs0').backslider({

to
jQuery('#bs0').backslider({
0
 
LVL 15

Assisted Solution

by:Insoftservice
Insoftservice earned 50 total points
ID: 39683783
$(document).ready(function(){$("div").hide(); // picked up by jQuery and MooTools});

Solution

jQuery(document).ready(function($){$("div").hide(); // picked up by jQuery only});

Or
jQuery(document).ready(function(){jQuery("div").hide(); // picked up by jQuery only});

Or try this one

var $j = jQuery.noConflict(); // Use jQuery via $j(...)

$j(document).ready(function(){

$j("div").hide();

});



jQuery.noConflict()(function(){ // code using jQuery

});

(function($) { /* some code that uses $ */ })(jQuery)


Another way to resolve

http://www.simplifyyourweb.com/index.php/developers-corner/90-solving-jquery-jquery-and-jquery-mootools-conflict-issues-with-the-jquery-easy-plugin


// Disable the $ global alias completely
jQuery.noConflict();

// For jQuery scripts
(function($){

// set a local $ variable only available in this block as an alias to jQuery
... here is your jQuery specific code ...

})(jQuery);

// For Mootols scripts
(function($){

// set a local $ variable only available in this block as an alias
// to Mootools document.id
... here is your Mootools specific code ...

})(document.id);
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Expert Comment

by:Insoftservice
ID: 39683950
Agreed with your points for removing the links, but little confuse about other statement that i had repeated other experts suggestion as there are only few methods to resolve this issue which i had written so it might have others comments too.
So do author is viewable my comments or should i repost the same comment removing the links
0
 
LVL 58

Expert Comment

by:Gary
ID: 39683962
You repeated what I had already said but your whole comment is just a copy/paste from two other websites - that's called plagiarism.
And now again you have just copy/pasted another persons work passing it off as your own.
All the while not providing a real answer to the problem
0
 
LVL 1

Author Comment

by:zahimezher
ID: 39684738
Hello,

@duncanb7 Thank you but this is more of a do it your self kinda help and not a solution.

@GaryC123 Your first comment was simple and did the trick, everything is working now.

@insoftservice thats exactly what @GaryC123 posted before you did and its basically the same solution but with more details...

@mlmcc Should I reward @GaryC123 all the point or divide them equally between GaryC123 and @insoftservice

It's always mega confusing when it comes to rewarding point and similar solutions are posted.
This happened before and I end up with a re-opened question to redistribute points.

Awaiting your advice.
0
 
LVL 1

Author Comment

by:zahimezher
ID: 39685145
Mark your comment was very helpful. Thank you for the time you put into explaining all this in detail.

I honestly though @GaryC123 nailed it in the simplest way due to going through the source code.

I would like to award  points to @insoftservice for the time and effort put in to this as well. But fair is fair and Gary posted the simplest / most effective solution first.

Thank you all for your help and time.

Regards
0
 
LVL 1

Author Comment

by:zahimezher
ID: 39686469
@mlmcc any action required from my side?

Thank you
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question