S. M. Shahinul Islam
S. M. Shahinul Islam

Reputation: 2800

Jquery Plugin conflict

I have a slider and and news ticker in my home page.

I have used following coding in head tag.

[1]<script type="text/javascript" src="..js/jquery.core.js"></script>
[2]<script type="text/javascript" src="..js/jquery.superfish.js"></script>
[3]<script type="text/javascript" src="..js/jquery.jcarousel.pack.js"></script>
[4]<script type="text/javascript" src="..js/jquery.easing.js"></script>
[5]<script type="text/javascript" src="..js/jquery.scripts.js"></script>
[6]<script type="text/javascript" src="..js/common.js"></script>

When I use this format my slider works fine but the news ticker get stuck. The slider use 2nd, 3rd, 4th, and 5th script. The 6th script is for the news ticker. If I use the the 6th script after the first the news ticker works fine. But then the slider doesn't work.

How should I use them to get both working?

Thanks.

Upvotes: 1

Views: 3217

Answers (2)

Valli69
Valli69

Reputation: 9892

try this

<script type="text/javascript">
if (typeof jQuery !== 'undefined') {
    jQuery.noConflict();
}
</script>

use the above code between 5th and 6th script, and use jQuery instead of $ in 6th js, it might be helpful

Upvotes: 0

TGH
TGH

Reputation: 39248

If the plugins are truly incompatible, and you don't want to edit them to fix the conflicts, it may be a solution to put one of them in an iframe to isolate it... Especially if they are isolated components that don't communicate back to the rest of the page...

Upvotes: 1

Related Questions