javascript - jquery conflict - how to use the jQuery.noConflict();

I am using JQuery for some drop down nav functionality. Worked great. Now I just added the Cycle JQuery Plugin and I can only get one to work at a time depending on which order I list them in the head. I have read about the jQuery.noConflict(); function but not really sure where to put it. Here is what I got.

HTML

<head>
    <title>#</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="online restaurant employee scheduling, employee scheduling, scheduling software, employee scheduling software,   restaurant scheduling, restaurant scheduling software, restaurant schedules, restaurant employee scheduling, online scheduling, online scheduling software" name="keywords"/>
    <meta content=" easy-to-use, Web-based restaurant labor management solutions and workforce management software offers flexible, effective and improved munication for employees and managers." name="description"/>
    <meta content="index, follow" name="robots"/>
    <meta content="no-cache" http-equiv="cache-control"/>
    <meta content="no-store" http-equiv="cache-control"/>
    <meta content="0" http-equiv="expires"/>
    <meta content="no-cache" http-equiv="pragma"/>
    <meta content="Rh52pxT6lFEqOVMlSt7QpOVHb325OHdlGkWZ0QMUSbU" name="google-site-verification"/>

    <link rel="stylesheet" href="stylesheets/style.css" media="screen" />

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
    <script src="js/menu.js" type="text/javascript"></script>
    <script src="js/slideshow.js" type="text/javascript"></script>

</head>

When it is structured like this my Cycle Plugin works but not the nav drop downs. Here are the corresponding .js files with the nav being: menu.js and the Cycle Plugin being: slideshow.js

menu.js

$(document).ready(function () {   

    $('#nav li').hover(  
        function () {  
            //show its submenu  
            $('ul', this).slideDown(100);  
        },   
        function () {  
            //hide its submenu  
            $('ul', this).slideUp(100);           
        }  
    );  

});

slideshow.js

$('#slideshow').cycle({ 
   speed:      200,
   timeout:    0, 
   pager:      '#tabs', 
   pagerEvent: 'mouseover' 
});

HTML

<head>
    <title>#</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="online restaurant employee scheduling, employee scheduling, scheduling software, employee scheduling software,   restaurant scheduling, restaurant scheduling software, restaurant schedules, restaurant employee scheduling, online scheduling, online scheduling software" name="keywords"/>
    <meta content=" easy-to-use, Web-based restaurant labor management solutions and workforce management software offers flexible, effective and improved munication for employees and managers." name="description"/>
    <meta content="index, follow" name="robots"/>
    <meta content="no-cache" http-equiv="cache-control"/>
    <meta content="no-store" http-equiv="cache-control"/>
    <meta content="0" http-equiv="expires"/>
    <meta content="no-cache" http-equiv="pragma"/>
    <meta content="Rh52pxT6lFEqOVMlSt7QpOVHb325OHdlGkWZ0QMUSbU" name="google-site-verification"/>

    <link rel="stylesheet" href="stylesheets/style.css" media="screen" />

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
    <script src="js/menu.js" type="text/javascript"></script>
    <script src="js/slideshow.js" type="text/javascript"></script>

</head>

When it is structured like this my Cycle Plugin works but not the nav drop downs. Here are the corresponding .js files with the nav being: menu.js and the Cycle Plugin being: slideshow.js

menu.js

$(document).ready(function () {   

    $('#nav li').hover(  
        function () {  
            //show its submenu  
            $('ul', this).slideDown(100);  
        },   
        function () {  
            //hide its submenu  
            $('ul', this).slideUp(100);           
        }  
    );  

});

slideshow.js

$('#slideshow').cycle({ 
   speed:      200,
   timeout:    0, 
   pager:      '#tabs', 
   pagerEvent: 'mouseover' 
});

Share Improve this question edited Jul 15, 2014 at 9:46 BenMorel 36.7k52 gold badges206 silver badges337 bronze badges asked Jan 15, 2010 at 4:42 bgadoci 6,49317 gold badges66 silver badges91 bronze badges

1 Is that the entire content of slideshow.js? If so, you might want to make it run after the page is loaded like menu.js does. – Ryann Graham Commented Jan 15, 2010 at 5:43

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

From the documentation of noConflict():

NOTE: This function must be called after including the jQuery javascript file, but before including any other conflicting library, and also before actually that other conflicting library gets used, in case jQuery is included last. noConflict can be called at the end of the jQuery.js file to globally disable the $() jQuery alias.

Just add a script tag to your header after your jquery includes to run the noConflict() function (example taken from the "Using jQuery with noConflict" page):

<head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();

     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>

I can't see why you need jQuery.noConflict() which is to do with other scripts using the $ variable. See the documentation.

Instead, as Ryan says, you need to place your cycle code inside a $(document).ready(), so slideshow.js bees:

$(document).ready(function () { 
    $('#slideshow').cycle({ 
        speed:      200,
        timeout:    0, 
        pager:      '#tabs', 
        pagerEvent: 'mouseover' 
    });
});

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>jQuery.noConflict();</script>
<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<script src="js/slideshow.js" type="text/javascript"></script>

menu.js:

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

    $('#nav li').hover(  
        function () {  
            //show its submenu  
            $('ul', this).slideDown(100);  
        },   
        function () {  
            //hide its submenu  
            $('ul', this).slideUp(100);           
        }  
    );  

}); 
})(jQuery);

slideshow.js:

(function($){

 $('blah').cycle()
})(jQuery);

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744773220a4592887.html

javascript - jquery conflict - how to use the jQuery.noConflict(); - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - jquery conflict - how to use the jQuery.noConflict(); - Stack Overflow

3 Answers 3

相关推荐