jump to navigation

JQuery : Create a Cool Slide Out Panel that contains Twitter/Facebook Contact Links October 10, 2011

Posted by Tournas Dimitrios in JQuery.

Many sites have a really cool hidden panel which has some relevant information and this panel is revealed to us , with a cool animation , when we click on a particular button or hover over it . This has usually been achieved using jQuery . A slide out panel can be used for various purposes . Its uses depend on the requirement of the site . One may use it for a slide out login box or for just listing the subscribing options for the site .
A  nice JQuery plugin ( tabslide.js) utilizes the “slide-out panel ” functionality with just a few configurations (position , action , tab-location , speed of animation ) . We are going to assume a scenario where we want a social-media panel  option (Twitter/FaceBook)  for the viewers on the  right hand corner of the screen . The panel will slide-out when the viewer clicks on a tab , and will reveal all our social-media links . This example just demonstrates the basic concepts , you can extend it’s functionality or adapt it to your own web-development needs . See a live demo , download the source code  of this article and explore it’s functionality .

Update : The slide-out panel can contain any content . This second example  includes the twitter-cycle plugin functionality . See a demo here . Read also ” Display Your Latest Tweets in Cycled Order into Your Website With JQuery ” .

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 , the trick here is not to define the release , so the latest will be delivered by google .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/8941952/JQUERY/twitter-facebook/tabslide.js" type="text/javascript"></script>

	tabHandle: '.handle', 
	pathToTabImage: 'http://dl.dropbox.com/u/8941952/JQUERY/twitter-facebook/twittface.gif', 
	imageHeight: '115px', 
	imageWidth: '30px', 
	tabLocation: 'right',
	speed: 300, 
	action: 'hover', 
 	topPos: '240px', 
	leftPos: '0px',  
	fixedPosition: true                      


<body >	
 <div class="slide-out-div">  
  <div class="socialpanel">
 <a class="handle" href="http://twitter.com/TDimitirios" target="_blank">Twitter</a>
 <h3>Follow <a href="http://twitter.com/TDimitrios" target="_blank">@TDimitrios</a> on Twitter</h3>
<h3>Be a <a href="http://www.facebook.com/pages/" target="_blank">Tournas</a> fan on Facebook</h3>
 <p>Stay on top of the latest webtechnologies get a quick reference on Twitter & Facebook.</p>


1. Shaun Jay Cologon - March 16, 2013

Exactly what I’m looking for, thank you🙂

tournasdimitrios1 - March 16, 2013

@Shaun Jay Cologon
You are welcome

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s