How do I solve this jQuery plugins conflict?

Question

I am using two different jQuery plugins; one for news logo ticker and another for horizontal text slider.

but only one of them is working at a time when when used in sin

Answer 1

Try arranging your script references:

1) jquery

2) jquery-ui

3) newsticker

and add it to the top of the page before calling any jquery related methods.

Not 100% sure if this will work, but give it a try.

Don't know which version of newsticker you are using, but have a look at this link.

Answer 2

I faced the same problem when using a lot of plugins for my web page. The easiest solution is to have a concatenated file of all the .js files and have a single include at the head. Also you can minify ( minify tools available online ) the concatenated file and just include the min version. This should solve the problem.

One more way is to make sure the plugin is available before you call the function in the plugin. Try to use getScript of jquery to ensure both plugins are loaded and make the function calls of plugin inside success handler of getScript

Answer 3

1. It isn't always enough to just add jQuery.noConflict();. You may also need to replace all occurrences $ with jQuery. The difficulty is, variables are often defined as $a_variable_name, replacing the $ in variables will result in errors.

   See if you can find a version of tipsy with the noConflict edits already made. Note also, it is often necessary to add noConflict and replace $ with jQuery to other jQuery scripts especially if that script is dependant on another.

   This does solve conflicts as I have been doing this for some time. Note also, if you use jQuery throughout, these edits are not normally required.

2. The sequence you load script files is also important, try rearranging them.

3. Only execute scripts when they are required. In other words, if a particular piece of code is causing conflict, load it from the page where it is required and not in the header, using script tags.

Answer 4

You may need to declare variable . Because $ is using on other js frameworks like prototype. so just simply put under following script at the top of ur script.

var jQuery = jQuery.noConflict();