tabSlideOut jQuery plugin example page

See that little tab over there that says 'Contact'? If you click that it will slide out. This plugin allows you to easily add one of those to your page.

The most important part of getting this plugin to work is to have your image path and image dimensions set correctly in the options. In this version, using the code below, I am linking directly to google code for the jquery library as well as the plugin which I am hosting at code.google.com. This means you literally do not have to download anything to use this plugin. You can try it out by just copy/pasting the code on this page.

Getting started

In your <head> tag you need the javascript (with the options customized for your image):

<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.1.js"></script> //path to the plugin file

    <script>
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the element that will become your tab
            pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab *required*
            imageHeight: '32px',                      //height of tab image *required*
            imageWidth: '167px',                      //width of tab image *required*    
            tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '200px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });

    });

    </script>

Below that add your css:

      
      <style>
      
      .slide-out-div {
          padding: 20px;
          width: 250px;
          background: #ccc;
          border: #29216d 1px solid;
      }      
      </style>

Anywhere in your page, (I put mine right above my </body>) put in the html for your hidden content.

        <div class="slide-out-div">
            <a class="handle" href="http://link-for-non-js-users.html">Content</a>
            <h3>Contact me</h3>
            <p>Thanks for checking out my jQuery plugin, I hope you find this useful.
            </p>
            <p>This can be a form to submit feedback, or contact info</p>
        </div>

Working example of the tabSlideOut jQuery plugin

Getting started

Contact me