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