https://www.webinspector.com/js/jquery.tabSlideOut.js

1/*
2    tabSlideOUt v1.3
3    
4    By William Paoli: http://wpaoli.building58.com
5
6    To use you must have an image ready to go as your tab
7    Make sure to pass in at minimum the path to the image and its dimensions:
8    
9    example:
10    
11        $('.slide-out-div').tabSlideOut({
12                tabHandle: '.handle',                         //class of the element that will be your tab -doesnt have to be an anchor
13                pathToTabImage: 'images/contact_tab.gif',     //relative path to the image for the tab
14                imageHeight: '133px',                         //height of tab image
15                imageWidth: '44px',                           //width of tab image   
16        });
17
18    or you can leave out these options
19    and set the image properties using css
20    
21*/
22
23
24(function($){
25    $.fn.tabSlideOut = function(callerSettings) {
26        var settings = $.extend({
27            tabHandle: '.handle',
28            speed: 300, 
29            action: 'click',
30            tabLocation: 'left',
31            topPos: '267px',
32            leftPos: '20px',
33            fixedPosition: false,
34            positioning: 'absolute',
35            pathToTabImage: null,
36            imageHeight: null,
37            imageWidth: null,
38            onLoadSlideOut: false                       
39        }, callerSettings||{});
40
41        settings.tabHandle = $(settings.tabHandle);
42        var obj = this;
43        if (settings.fixedPosition === true) {
44            settings.positioning = 'fixed';
45        } else {
46            settings.positioning = 'absolute';
47        }
48        
49        //ie6 doesn't do well with the fixed option
50        if (document.all && !window.opera && !window.XMLHttpRequest) {
51            settings.positioning = 'absolute';
52        }
53        
54
55        
56        //set initial tabHandle css
57        
58        if (settings.pathToTabImage != null) {
59            settings.tabHandle.css({
60            'background' : 'url('+settings.pathToTabImage+') no-repeat',
61            'width' : settings.imageWidth,
62            'height': settings.imageHeight
63            });
64        }
65        
66        settings.tabHandle.css({ 
67            'display': 'block',
68            'textIndent' : '-99999px',
69            'outline' : 'none',
70            'position' : 'absolute'
71        });
72        
73        obj.css({
74            'line-height' : '1',
75            'position' : settings.positioning
76        });
77
78        
79        var properties = {
80                    containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
81                    containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
82                    tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
83                    tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
84                };
85
86        //set calculated css
87        if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
88            obj.css({'left' : settings.leftPos});
89            settings.tabHandle.css({'right' : 0});
90        }
91        
92        if(settings.tabLocation === 'top') {
93            obj.css({'top' : '-' + properties.containerHeight});
94            settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
95        }
96
97        if(settings.tabLocation === 'bottom') {
98            obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
99            settings.tabHandle.css({'top' : '-' + properties.tabHeight});
100            
101        }
102        
103        if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
104            obj.css({
105                'height' : properties.containerHeight,
106                'top' : settings.topPos
107            });
108            
109            settings.tabHandle.css({'top' : 0});
110        }
111        
112        if(settings.tabLocation === 'left') {
113            obj.css({ 'left': '-' + properties.containerWidth});
114            settings.tabHandle.css({'right' : '-' + properties.tabWidth});
115        }
116
117        if(settings.tabLocation === 'right') {
118            obj.css({ 'right': '-' + properties.containerWidth});
119            settings.tabHandle.css({'left' : '-' + properties.tabWidth});
120            
121            $('html').css('overflow-x', 'hidden');
122        }
123
124        //functions for animation events
125        
126        settings.tabHandle.click(function(event){
127            event.preventDefault();
128        });
129        
130        var slideIn = function() {
131            
132            if (settings.tabLocation === 'top') {
133                obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
134            } else if (settings.tabLocation === 'left') {
135                obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
136            } else if (settings.tabLocation === 'right') {
137                obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
138            } else if (settings.tabLocation === 'bottom') {
139                obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
140            }    
141            
142        };
143        
144        var slideOut = function() {
145            
146            if (settings.tabLocation == 'top') {
147                obj.animate({top:'-3px'},  settings.speed).addClass('open');
148            } else if (settings.tabLocation == 'left') {
149                obj.animate({left:'-3px'},  settings.speed).addClass('open');
150            } else if (settings.tabLocation == 'right') {
151                obj.animate({right:'-3px'},  settings.speed).addClass('open');
152            } else if (settings.tabLocation == 'bottom') {
153                obj.animate({bottom:'-3px'},  settings.speed).addClass('open');
154            }
155        };
156
157        var clickScreenToClose = function() {
158            obj.click(function(event){
159                event.stopPropagation();
160            });
161            
162            $(document).click(function(){
163                slideIn();
164            });
165        };
166        
167        var clickAction = function(){
168            settings.tabHandle.click(function(event){
169                if (obj.hasClass('open')) {
170                    slideIn();
171                } else {
172                    slideOut();
173                }
174            });
175            
176            clickScreenToClose();
177        };
178        
179        var hoverAction = function(){
180            obj.hover(
181                function(){
182                    slideOut();
183                },
184                
185                function(){
186                    slideIn();
187                });
188                
189                settings.tabHandle.click(function(event){
190                    if (obj.hasClass('open')) {
191                        slideIn();
192                    }
193                });
194                clickScreenToClose();
195                
196        };
197        
198        var slideOutOnLoad = function(){
199            slideIn();
200            setTimeout(slideOut, 10000);
201			setTimeout(slideIn, 15000);
202        };
203        
204        //choose which type of action to bind
205        if (settings.action === 'click') {
206            clickAction();
207        }
208        
209        if (settings.action === 'hover') {
210            hoverAction();
211        }
212        
213        if (settings.onLoadSlideOut) {
214            slideOutOnLoad();
215        };
216        
217    };
218})(jQuery);