1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

JQuery Library Conflicts

Discussion in 'Web Design & Development' started by robobobo, Jul 3, 2012.

Thread Status:
Not open for further replies.
Advertisement
  1. robobobo

    robobobo Thread Starter

    Joined:
    Apr 27, 2008
    Messages:
    167
    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
     
  2. DrP

    DrP

    Joined:
    Jul 23, 2005
    Messages:
    739
    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.
     
  3. robobobo

    robobobo Thread Starter

    Joined:
    Apr 27, 2008
    Messages:
    167
    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
As Seen On...

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.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1059560