Jquery integration with my theme

Question

I want to add a slide side ways jquery to my website, I tried the following code, but seems not to be working

Jquery code:-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

    <script type="text/javascript">
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     
            pathToTabImage: 'images/contact_tab.gif', 
            imageHeight: '122px',                     
            imageWidth: '40px',                       
            tabLocation: 'left',                      
            speed: 300,                               
            action: 'click',                          
            topPos: '200px',                          
            leftPos: '20px',                          
            fixedPosition: false                      
        });

    });

    </script>

Div & CSS code:

 <style type="text/css">

      .slide-out-div {
          padding: 20px;
          width: 250px;
          background: #ccc;
          border: 1px solid #29216d;
      }      
      </style>
<div class="slide-out-div">
            <a class="handle" href="#">Content</a>
            <h3>Contact me</h3>
            <p>Hello
            </p>
            <p>Welcome to my Blog</p>
        </div>

When I tried the above code into my header file, and the div code in the footer file, The DIV box appears to be slided outside but doesn't goes inside , the jquery is not working and the image contact_tab.gif is not displayed and my google maps on my website doesn't loads, I know this is because of wrong integration of jquery but I don't know how to integrate it with wordpress themes

Answer 1

I think the main problem is that you need to use a no-conflict wrapper when calling tab slideout. However, rather then simply point out the problem i'm going to cover some things you should be doing to make this script work "The WordPress Way" ..(ie. using an enqueue and hooking onto an appropriate hook to make that enqueue).

First, we need an appropriate action and there's a couple we can use front-side.

The hook i'll use is wp_print_scripts, because as you might have guessed it's for enqueuing scripts.

add_action( 'wp_print_scripts', 'enqueue_slideout' );

function enqueue_slideout() {
    wp_enqueue_script( 'jquery-slideout', 'http://tab-slide-out.googlecode.com/svn/trunk/jquery.tabSlideOut.v2.0.js', array('jquery'), '2.0', false );
}

I went and dug up the location of the most recent version, 1.3 is a good year older than the most recent 2.0, so i've updated the path to point at a more recent version.

jQuery is loaded as a dependancy inside the enqueue, so you don't need to be doing any extra includes for jQuery, the enqueue will take care of that for you(regardless of whether your jQuery script has been re-registered to pull from Google - as many WP users choose to do).

Next, we'll hook onto wp_head and output the script to setup the slideout tab using a no-conflict wrapper that fires when the document is ready(most scripts will work fine like this, though not all)..

add_action( 'wp_head', 'setup_slideout_tabs' );

function setup_slideout_tabs() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     
            pathToTabImage: '<?php bloginfo('stylesheet_directory'); ?>/images/contact_tab.gif', 
            imageHeight: '122px',                     
            imageWidth: '40px',                       
            tabLocation: 'left',                      
            speed: 300,                               
            action: 'click',                          
            topPos: '200px',                          
            leftPos: '20px',                          
            fixedPosition: false                      
        });
    });
    </script>
    <?php
}

You should note i've added in a little PHP to point the image path at the current theme's folder, so do ensure you have an image named contact_tab.gif in your theme's image folder, ie. wp-content/themes/YOUR_THEME/images/contact_tab.gif or update the image path appropriately.

Add the CSS you posted before into your theme's stylesheet, there's really no need to output it inline, and the stylesheet is going to be getting loaded anyway, so it makes sense to just stick it in there.

In the end, you should have something that looks like this..

Hope that helps...