How do I solve this jQuery plugins conflict?
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 single page may be beca开发者_运维问答use of jQuery conflict.. If I comment first plugin second plugin works fine and vice verse.
Here is the code:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.newsticker.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function()
{
jQuery("#news").newsTicker();
jQuery("#development").newsTicker();
}
);
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="plugins/image_slider/css/sliderman.css" />
<link type="text/css" href="css/humanity/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery("#accordion").accordion({ header: "h3" });
});
</script>
<link rel="stylesheet" href="css/news.css" type="text/css" media="screen">
<script src="js/jcarousellite_1.0.1c4.js" type="text/javascript">
</script>
Thanks!
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.
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 addnoConflict
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.
The sequence you load script files is also important, try rearranging them.
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.
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();
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
精彩评论