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'
});
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'
});
- 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
3 Answers
Reset to default 2From 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);