asked on

jquery script conflict

Hello Experts,

i have a photo slider animation in my webpage and now i wanted to add one more script for another animation. it looks like that they have a conflict as they do not play together.
i tried adding the "jQuery.noConflict();" right after the script tag in both scripts and also move one of the script to the body area but still they do not play together.

initial scripts:
========================================================
<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">
window.addEvent('domready',function(){
var V5 = new viewer($('front_slider').getChildren(),{
mode: 'alpha',
interval: 5000,
onWalk: function(current_index){
}
}).play(true);
});
</script>

the additions:
=====================================================
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#sliderfooter").easySlider({
auto: true,
continuous: true,
controlsShow: false,
speed: 800,
pause: 2000,
firstText: 'First',
});
});
</script>

remorina

Hi Refael,
It seems you're trying to use both Mootools & jQuery together, this is not a good approach since they don't really work nice together as MooTools alters the prototypes of native elements, not to mention having 200+kb of JavaScript which is also not a good practice for performance and optimization.

You should try to stick to only one of either and get the scripts you want to run to work on a single framework, both frameworks are very similar and I believe scripts can be converted from using one to another, you can also search for the animation you're trying to use and specify in your google search the framework you want it for whether mootools or jquery and you should find a good amount of scripts doing what you need.

Otherwise refer to http://docs.jquery.com/Using_jQuery_with_Other_Libraries , and try using the "Overriding the $-function" along with the jQuery.noConflict();, also try placing the jQuery first, this should work.

Best of luck

Steve Krile

For what it's worth, I see this type of question constantly. People find some bit of flair and they want to plug it in to their site. Then, it doesn't work or breaks something else and they want to know why. @remorina is exactly right. Pick a framework and stick with it. Plugins that require a different framework should be considered out of bounds - if you are interested in smooth development. If, however you have a more adventurous attitude and really want to know what's happening then get the un-minified version of these plugins and really dig in.

However, the solution to this question is most likely *not* as simple as putting some single-line-magic-code somewhere in your <head> tag.

Refael

ASKER

remorina and skrile, thank you very much!

can you please give me a sohrt exmaple of how to "Overriding the $-function" along with the jQuery.noConflict();,". just a simple exmaple would be great!

ASKER CERTIFIED SOLUTION

mickey159

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial