[robobobo]

Hey Guys,

I've been having a nightmare getting JQuery to work out for me while building this new site. I've finally managed to get a slider sorted on this site http://davidpark.eu

However I'm having issues with the different types of JQuery conflicting with each other. The sidebar menu is meant to have the menus move a little when you however and when you click on portfolio a sub menu is meant to appear. If you go to the contact page and try the menu then you will see what it's meant to do. It works on this page because I'm not importing additional Jquery for the scroller that I have. But on all the other pages I'm using scripts for both the menu and the slider which seems to be causing the issues.

Obviously there's a conflict going on here. Is it fixable? And how? Here's the JQuery implemented by the wordpress theme for the sidebar

<!-- Jquery and plugins -->
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.ui.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/fancybox/jquery.fancybox-1.3.0.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.easing.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/anythingSlider.js"></script>


<?php

	if(!empty($pp_gm_key))
	{
	
?>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/gmap.js"></script>
<?php
	}
?>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.validate.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/custom.js"></script>
<?php

And this is the additional scripts I've added for the slider

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.davidpark.eu/carouselhome/jquery.touchcarousel-1.1.min.js"></script>

I have read about this solution called Jquery.noConflict(); but I'm not sure how to implement it on my site

As ever your help if greatly appreciated

[DrP]

A few things:

Have you tried removing the scripts one at a time to see where the problem is?

Your contact page works fine for me, but the homepage gives this error in Firebug: "jQuery(".slideshow").anythingSlider is not a function". Funnily enough, you are calling anythingSlider within this:

jQuery(function () {

...which is the same as loading it within this:

$(document).ready(function(){

As they both do the same, just use one or the other, for example put this:

jQuery('.slideshow').anythingSlider({ //and the rest

...inside the latter and get rid of the first one. It might not solve your problem, though! By the way, once you've sorted this out, I'd recommend putting all of your plugins within one file - less calls to the server, so better performance.

[robobobo]

Thanks for your reply, I'm afraid I still haven't got any further with this. I discovered which library is causing the conflict however.

If I remove

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Then the sidebar works fine and the slider still works on a computer, however the touch input is no longer there when I try and use it on a touch device which is crucial for me