Home/ Questions/Q 565223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T12:50:58+00:00

I am using JQuery for some drop down nav functionality. Worked great. Now I

  • 0

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 communication 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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 becomes:

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