A sample output of this blog is available <a href="http://demo.kahimyang.info/cgi-cpp/slideout.html" target="_blank" class="news_link" 

title="Demo 1">here for the tab handle toogle, look in left edge of your browser</a> and <a href="http://demo.kahimyang.info/cgi-cpp/slideout2.html" target="_blank" 

class="news_link" title="Demo 2">here for the onload modification</a>. The modified plugin source is also <a 

href="http://demo.kahimyang.info/cgi-cpp/slideout/jquery.tabSlideOut.v1.3.js" class="news_link" title="Modified plugin source">avalible 

here</a>. Also please check the <a href="#inline" class="news_link" title="Inline copy">inline copy</a> of the full source of the plugin near the end of this blog. We have highlighted the changes we made. 



Just like all JQuery plugins you need to include jQuery and the plugin itself anywhere in the head section of your page.



<pre class="brush: xml">
&lt;script src="http://code.jquery.com/jquery-1.6.3.min.js" 
	type="text/javascript">&lt;/script>
&lt;script src="WHEREVER-YOU-SAVED-ME/jquery.tabSlideOut.v1.3.js">&lt;/script>
</pre>




Below is the original definition of the tabSlideOut main function before our modification.



<pre class="brush: js">
 $.fn.tabSlideOut = function(callerSettings) {
 var settings = $.extend({
 tabHandle: '.handle',
 speed: 300,
 action: 'click',
 tabLocation: 'left',
 topPos: '200px',
 leftPos: '20px',
 fixedPosition: false,
 positioning: 'absolute',
 pathToTabImage: null,
 imageHeight: null,
 imageWidth: null,
 onLoadSlideOut: false
 }, callerSettings||{});

</pre>



Below is the modified definition of the main plugin function.



<pre class="brush: js">
 $.fn.tabSlideOut = function(callerSettings) {
 var settings = $.extend({
 tabHandle: '.handle',
 speed: 300,
 action: 'click',
 tabLocation: 'left',
 topPos: '200px',
 leftPos: '20px',
 fixedPosition: false,
 positioning: 'absolute',
 pathToTabImage: null,
 imageHeight: null,
 imageWidth: null,
 onLoadSlideOut: false,
 closeButton: '.close-slide',
 toogleHandle: false,
 inTime: 20000,
 outTime: 20000
 }, callerSettings||{});

</pre>



We have added closeButton, toogleHandle, inTime, outTime. closeButton is 

a string variable, a class or id of the element that we use as close button, it can be any clickable tag. 

toogleHandle is a boolean variable, a flag whether or not we wanted to hide the tab handle when the panel is out. 

inTime and outTime are integers representing time in milliseconds. This is used by our onload modification. The 

panel slides out after outTime milliseconds since page load, default is 20000 which is 20 seconds. 



The functions within the plugin that were affected by our modifications are, slideIn, slideOut, 

clickScreenToClose, and slideOutOnLoad. Please check these functions inside the plugin file to see the actual 

modifications we made.



Our html file in the first demo mentioned earlier is below. This can be inserted anywhere in your page. Content can be any valid html markup.



<pre class="brush: xml">
&lt;script type="text/javascript">
 $(function(){
 $('.slide-out-div').tabSlideOut({
 tabHandle: '.handle',
 pathToTabImage: './images/feedback.png',
 imageHeight: 108,
 imageWidth: 27,
 tabLocation: 'left',
 speed: 1000,
 action: 'click',
 topPos: '200px',
 leftPos: '20px',
 fixedPosition: true,
 onLoadSlideOut: false,
 toogleHandle: true,
 closeButton: '.close-slide'
 });

});
&lt;/script>

&lt;div class="slide-out-div" style="width:300px;" >
 &lt;div class="handle"></div>
 &lt;table style="margin-left:25px;width:240px;">
 &lt;tr>
 &lt;td>
 &lt;h4>This is a demo. Please send us your feedback. 
 Thanks a lot.&lt;/h4>
 &lt;p>
 Click on the close button to close. 
 Click anywhere in the window also closes the panel.
 More of your contents here.
 &lt;/p>
 &lt;/td>
 &lt;td>
 &lt;img src="./images/closes.png" 
 title="Close" class="close-slide" />
 &lt;/td>
 &lt;/tr>
 &lt;/table>
&lt;/div>

</pre>




The CSS file used by both demo.



<pre class="brush: css">
.slide-out-div {
 background: #ffffff;
 float:left;
 text-align: left;
 z-index: 99999;
 vertical-align: top;
}


// You may want to style the handle more.

.handle {
 width: 35px;
 height:100%;
 background-color: darkseagreen;
 color:blue;
}

.box_shadow {
 -moz-box-shadow:4px 4px 4px #ccc;
 -webkit-box-shadow:4px 4px 4px #ccc;
 box-shadow:4px 4px 4px #ccc;
 border:1px solid #ccc;
}

</pre>


<a name="inline" />

Full modified plugin source code. We have highlighted the modified lines for ease of review. Click below to expand.



<pre title="Modified source code" class="brush: js; collapse: true; highlight: [35,36,37, 155,156,157,159,160, 166,167,168,188, 190,191,192,193, 202,203,,204,205,206, 246,247,248,249]">
(function($){
 $.fn.tabSlideOut = function(callerSettings) {
 var settings = $.extend({
 tabHandle: '.handle',
 speed: 300,
 action: 'click',
 tabLocation: 'left',
 topPos: '200px',
 leftPos: '20px',
 fixedPosition: false,
 positioning: 'absolute',
 pathToTabImage: null,
 imageHeight: null,
 imageWidth: null,
 onLoadSlideOut: false,
 closeButton: '.close-slide',
 toogleHandle: false,
 inTime: 20000,
 outTime: 20000
 }, callerSettings||{});

 settings.tabHandle = $(settings.tabHandle);
 var obj = this;
 if (settings.fixedPosition === true) {
 settings.positioning = 'fixed';
 } else {
 settings.positioning = 'absolute';
 }

 //ie6 doesn't do well with the fixed option
 if (document.all && !window.opera && !window.XMLHttpRequest) {
 settings.positioning = 'absolute';
 }

 if (settings.onLoadSlideOut) {
 settings.toogleHandle = false;
 }

 //set initial tabHandle css

 if (settings.pathToTabImage != null) {
 settings.tabHandle.css({
 'background' : 'url('+settings.pathToTabImage+') no-repeat',
 'width' : settings.imageWidth,
 'height': settings.imageHeight
 });
 }

 settings.tabHandle.css({
 'display': 'block',
 'textIndent' : '-99999px',
 'outline' : 'none',
 'position' : 'absolute'
 });

 obj.css({
 'line-height' : '1',
 'position' : settings.positioning
 });

 var properties = {
 containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
 containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
 tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
 tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
 };

 //set calculated css
 if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
 obj.css({
 'left' : settings.leftPos
 });
 settings.tabHandle.css({
 'right' : 0
 });
 }

 if(settings.tabLocation === 'top') {
 obj.css({
 'top' : '-' + properties.containerHeight
 });
 settings.tabHandle.css({
 'bottom' : '-' + properties.tabHeight
 });
 }

 if(settings.tabLocation === 'bottom') {
 obj.css({
 'bottom' : '-' + properties.containerHeight,
 'position' : 'fixed'
 });
 settings.tabHandle.css({
 'top' : '-' + properties.tabHeight
 });

 }

 if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
 obj.css({
 'height' : properties.containerHeight,
 'top' : settings.topPos
 });

 settings.tabHandle.css({
 'top' : 0
 });
 }

 if(settings.tabLocation === 'left') {
 obj.css({
 'left': '-' + properties.containerWidth
 });
 settings.tabHandle.css({
 'right' : '-' + properties.tabWidth
 });
 }

 if(settings.tabLocation === 'right') {
 obj.css({
 'right': '-' + properties.containerWidth
 });
 settings.tabHandle.css({
 'left' : '-' + properties.tabWidth
 });

 $('html').css('overflow-x', 'hidden');
 }

 //functions for animation events

 settings.tabHandle.click(function(event){
 event.preventDefault();
 });

 var slideIn = function() {

 if (settings.tabLocation === 'top') {
 obj.animate({
 top:'-' + properties.containerHeight
 }, settings.speed).removeClass('open');
 } else if (settings.tabLocation === 'left') {
 obj.animate({
 left: '-' + properties.containerWidth
 }, settings.speed).removeClass('open');
 } else if (settings.tabLocation === 'right') {
 obj.animate({
 right: '-' + properties.containerWidth
 }, settings.speed).removeClass('open');
 } else if (settings.tabLocation === 'bottom') {
 obj.animate({
 bottom: '-' + properties.containerHeight
 }, settings.speed).removeClass('open');
 }

 if (settings.toogleHandle && !settings.onLoadSlideOut) {
 settings.tabHandle.delay(1000).show(10);
 }

 obj.removeClass ('box_shadow');
 obj.css("margin-left",0);

 };

 var slideOut = function() {

 if (settings.toogleHandle) {
 settings.tabHandle.hide('fast');
 }

 if (settings.tabLocation == 'top') {
 obj.animate({
 top:'-3px'
 }, settings.speed).addClass('open');
 } else if (settings.tabLocation == 'left') {
 obj.animate({
 left:'-3px'
 }, settings.speed).addClass('open');
 } else if (settings.tabLocation == 'right') {
 obj.animate({
 right:'-3px'
 }, settings.speed).addClass('open');
 } else if (settings.tabLocation == 'bottom') {
 obj.animate({
 bottom:'-3px'
 }, settings.speed).addClass('open');
 }

 obj.addClass ('box_shadow');

 if (settings.onLoadSlideOut) {
 obj.css("margin-left",25);
 setTimeout(slideIn, settings.inTime);
 }

 };

 var clickScreenToClose = function() {
 obj.click(function(event){
 event.stopPropagation();
 });

 if (!settings.onLoadSlideOut) {
 $(document).click(function(){
 slideIn();
 });
 }

 $(settings.closeButton).click(function(){
 slideIn();
 });

 };

 var clickAction = function(){
 settings.tabHandle.click(function(event){
 if (obj.hasClass('open')) {
 slideIn();
 } else {
 slideOut();
 }
 });

 clickScreenToClose();
 };

 var hoverAction = function(){
 obj.hover(
 function(){
 slideOut();
 },

 function(){
 slideIn();
 });

 settings.tabHandle.click(function(event){
 if (obj.hasClass('open')) {
 slideIn();
 }
 });

 clickScreenToClose();

 };

 var slideOutOnLoad = function(){
 settings.tabHandle.hide(1);
 setTimeout(slideOut, settings.outTime);
 };

 //choose which type of action to bind
 if (settings.action === 'click') {
 clickAction();
 }

 if (settings.action === 'hover') {
 hoverAction();
 }

 if (settings.onLoadSlideOut) {
 slideOutOnLoad();
 };

 };
})(jQuery);
</pre>




That's it. I hope it helps. Good luck.

Customizing and using JQuery tabSlideOut plugin