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.
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.
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="#">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
Do you think it could be useful for you? Share your thoughts with us!