I have a scrolling website with two jQuery "sliders" ( http://bxslider.com/ ) which rotate images. The site works fine.
The client now wants a third jQuery feature ( jQuery Roundabout - v2.1.1 http://fredhq.com/projects/roundabout ). When added, this breaks the two initial sliders but the page scrolling and added roundabout scripts work.
After thoroughly looking for a resolution I added noConflict to the newly added roundabout. This fixes the two initial scrollers and the newly added roundabout still work fine, but this breaks the scrolling script on the site.
I'm no wiz with Java nor jQuery but I usually find fixes with time. This has me stumped, but I'm sure it's something simple I'm missing. Here are the scrips within the index file, in order, missing out irrelevant HTML:
<head>
<script src="js/queryLoader.js"></script>
<script defer src="js/plugins.js"></script>
<script defer src="js/commons.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body onLoad="init()" id="body">
<script type="text/javascript" src="http://www.firebrand-digital.com/test/wp-content/uploads/2012/02/jquery.bxSlider.min_.js"></script>
<!-- Sliders script -->
<script type="text/javascript">
jQuery(document).ready(function()
{
$('#scroller1').bxSlider(
{
auto: true,
speed: 2000,
pause: 6000,
prevImage: 'http://www.firebrand-digital.com/test/wp-content/themes/twentyeleven/images/previous_arrow2.png',
nextImage: 'http://www.firebrand-digital.com/test/wp-content/themes/twentyeleven/images/next_arrow2.png'
}
);
$('#slider1').bxSlider(
{
auto: true,
speed: 1500,
pause: 5000,
}
);
});
</script>
<!-- End sliders script -->
....html....
<!-- Roundabout 2 script -->
<script src="http://fredhq.com/lib/js/libraries/jquery.js"></script>
<script src="http://fredhq.com/lib/js/projects/roundabout/jquery.roundabout2.js"> </script>
<script>
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('ul.caro').roundabout();
});
</script>
<!-- Roundabout 2 script -->
....html....
</body>
js/commons.js holds all the script necessary to scroll the site. As this works when the noConflict is removed from the roundabout script I gather the problem lies between the sliders script and the roundabout script. Here www(dot)irishofcourse.co.cc/firebrand/index-banners.html is the url to the test site with the noConflict left in. Note: the links don't scroll the pages but everything else works(the case studies is part of the scrolling).
Removing the line <script src="http://fredhq.com/lib/js/libraries/jquery.js"></script> breaks all of the jQuery on the site. I'm not sure what the significance of that is but I thought I should mention it.
Any help is greatly appreciated. Ben.
=======UPDATE========
I think that line is residual code from elements that used to be on the site. I have removed it as well as what I believe to have been residual code from the commons.js. The scrolling still functions without the roundabout however they still conflict when I put it back.
The missing functionality which is still conflicting - When you click the links on the left, the page does not scroll down to the respective section. To the best of my knowledge,
$('#navigation .logo .bars > ul > li > img').on("click",function(){
$.scrollTo('#'+$(this).attr('class').split(' ')[0],500, {axis:'xy'});
});
$('#navigation .logo .bars > ul > li > span').on("click",function(){
$.scrollTo('#'+$(this).attr('class').split(' ')[0],500, {axis:'xy'});
});
those are the lines that control the scrolling of the pages. I think it is here where changes must be made. This is the only script/functions in the commons.js that aren't acting on the page.
Thank you again for your continued help.
Problems:
Suggestions:
<script src="ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> and <script src="http://fredhq.com/lib/js/libraries/jquery.js"></script>. <script defer src="js/plugins.js"></script> before the <script defer src="js/commons.js"></script>.=== UPDATE ===
Sorry, the jCarousel can't be found because the noConflict method relinquish jQuery's control of the $ variable. Can you add a $ in the third line in the common.js ($(document).ready(function($) {)?
=== UPDATE ===
Ok, my last suggestion was stupid; you can remove the $ again. Next try :-)
Please replace the lines $("#done-slider").jcarousel({ and $("#do-page-slider").jcarousel({ with jQuery("#done-slider").jcarousel({ and jQuery("#do-page-slider").jcarousel({.
=== UPDATE ===
That was successfull, but now we have a new error. Please replace also the $ with jQuery in the line $('#elements').jScrollPane({.
=== UPDATE ===
Also replace it in the line $('#elements').data('jsp').scrollToX(2000);.
=== UPDATE ===
Again you have to replace $ with jQuery in the two lines beginning with $.scrollTo(.