Jquery conflict

I have been trying and trying to fix jquery issues. i have in my header lots of jquery. I use it for slider and other things that are built into this premade theme. I am unable to add anything that uses jquery because of conflict. i need some help. The board is www.cgwhat.com. The forgot password is jquery and the slider is controlled by jquery also. I wanted to add another plugin but can not because of the conflict. Also with the forgot password that is jquery. I need to know what is wrong and how to fix it . If i remove calls to javascript in header it is fixed. The forgot password works but everything else breaks.

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.equalHeight.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/flashobject.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.actions.js"></script>
<script type="text/javascript">
 jQuery(document).ready(function($){
var fC=$('#features-nav .features-nav-item').length;
curS=1;
var cInt=0;
    cInt=setInterval(function(){
        $('#features-nav .features-nav-item:eq('+curS+')').addClass('current').trigger('click');
        curS++;
        if(curS>=fC) curS=0;
    },10000);});

</script> 



</head>

Related posts

Leave a Reply

2 comments

  1. At least one issue I can see is that you’re including the jQuery framework at least twice. The first line

    <?php wp_enqueue_script("jquery"); ?>
    

    Is the preferred method of including jQuery. Your installation of WordPress happens to include jQuery version 1.4.2. This allows good plugin and theme developers to leverage jQuery and not accidentally include it manually several times.

    But you also have (on line 6)

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
    

    Which includes jQuery 1.2.6. Maybe one of your plugins is trying to inject this? Or perhaps this is generated in your theme (in which case you can delete it, assuming your plugins are compatible with the built in version of jQuery which is version 1.4.2.

    After you resolve that issue, any further javascript errors can be isolated to a specific script or plugin.

    EDIT: Addition info…

    Now that you’ve removed the extra jquery include, a different error has surfaced. Using Firebug or Chrome’s debugger or your other favorite JavaScript debugger, you can see that the new error is:

    $ is not a function (jquery.actions.js, line 18)
    

    This means that you are attempting to use the jQuery shorthand selector but have wrapped your document ready using the full “jQuery” object name syntax.

    In jquery.actions.js, replace each “$” reference with “jQuery”.

    This will get your slider working. But you’ll also notice that you have other errors in your JavaScript…

    pos is null (undo.js, line 367)
    
    threads[x] is undefined (_display, line 915)
    

    You may or may not care about those errors depending on how they affect your site. I tend to like to eliminate any and all errors for performance and stability. Some browsers will crash worse than others.

  2. Two things:

    1. The call to wp_head() must come immediately before the closing </head> tag.
    2. Instead of hard-coding your script links, you should be enqueueing all scripts, including any necessary dependencies.
    3. Instead of hard-coding your custom script, put it in a script file, e.g. custom.js, and enqueue it also
    4. Cascade your enqueued scripts as necessary, using the $deps argument, to ensure that all load in the correct order.

    e.g. remove all your script calls from the document head, and then add the following in functions.php:

    function mytheme_enqueue_scripts() {
        $scriptsrc = get_template_directory_uri() . '/js/';
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script(
            'flashobject',
            $scriptsrc . 'flashobject.js'
        }
        wp_enqueue_script(
            'equalheight',
            $scriptsrc . 'jquery.equalHeight.js',
            array( 'jquery' )
        }
        wp_enqueue_script(
            'jquerycarousel',
            $scriptsrc . 'jquery.carousel.js',
            array( 'equalheight' )
        }
        wp_enqueue_script(
            'jqueryactions',
            $scriptsrc . 'jquery.actions.js',
            array( 'carousel' )
        }
        wp_enqueue_script(
            'custom',
            $scriptsrc . 'custom.js',
            array( 'actions' )
        }
    }
    add_action( 'wp_head', 'mytheme_enqueue_scripts' );
    

    That should resolve any issues you’re having with script/library conflicts.

    Then, you’ll need to ensure that you’re using jquery no-conflict wrappers properly.