Advertisement

There's no such thing as a stupid question, but they're the easiest to answer.
Login
Search

Advertisement

Web Design & Development Web Design & Development
Search Search
Search for:
Tech Support Guy > > >

JQuery Library Conflicts


(!)

robobobo's Avatar
robobobo robobobo is offline
Computer Specs
Member with 167 posts.
THREAD STARTER
 
Join Date: Apr 2008
Location: Ireland
Experience: Know Alot, Dont know Alot
03-Jul-2012, 03:41 PM #1
JQuery Library Conflicts
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

Code:
<!-- 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

Code:
<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's Avatar
DrP DrP is offline DrP has a Profile Picture
Computer Specs
Member with 734 posts.
 
Join Date: Jul 2005
Location: Norwich, UK
05-Jul-2012, 04:42 PM #2
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:

Code:
jQuery(function () {
...which is the same as loading it within this:

Code:
$(document).ready(function(){
As they both do the same, just use one or the other, for example put this:

Code:
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's Avatar
robobobo robobobo is offline
Computer Specs
Member with 167 posts.
THREAD STARTER
 
Join Date: Apr 2008
Location: Ireland
Experience: Know Alot, Dont know Alot
10-Jul-2012, 08:15 AM #3
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
Code:
<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
As Seen On

BBC, Reader's Digest, PC Magazine, Today Show, Money Magazine
WELCOME TO TECH SUPPORT GUY!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.


(clock)
THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools


WELCOME
You Are Using: Server ID
Trusted Website Back to the Top ↑

Content Relevant URLs by vBSEO 3.3.2