Monday, January 23, 2012

Working example of the tabSlideOut jQuery plugin

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.



View Demo 
Download Files 
Download Plugin


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.3.js"></script>

    <script type="text/javascript">
    $(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 //Optionally can be set using css
            imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
            imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
            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 type="text/css">
    .slide-out-div {
          padding: 20px;
          width: 250px;
          background: #ccc;
          border: 1px solid #29216d;
      }     
      </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>

       
                   

No comments:

Post a Comment