jQuery Plugin For Slide Out Tab Contact - tabSlideOut

jQuery Plugin For Slide Out Tab Contact - tabSlideOut
File Size: 49 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: Free for personal use
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

tabSlideOut is a lightweight jQuery plugin that slides out a sliding panel when clicking the tab on the web page. Good for creating a feedback widget on your web page that slides out a contact form as clicking it.

See also:

How to use it:

1. Include jQuery library and jQuery tabSlideOut on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.tabSlideOut.v1.3.js"></script>

2. Markup html structure

<div class="demo">
<a class="handle" href="http://link-for-non-js-users">Content</a>
...
</div>

3. The CSS

<style type="text/css" media="screen">
.demo {
padding: 20px;
width: 250px;
background: #f2f2f2;
border: #29216d 2px solid;
}
</style>

4. Call the plugin with options

<script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle',   //class of the element that will be your tab
pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css)
imageHeight: '122px',    //height of tab image
imageWidth: '40px',    //width of tab image    
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
fixedPosition: false    //options: true makes it stick(fixed position) on scroll
});
});
</script>

For more Advanced Usages, please check the demo page or visit the official website.