/* tabSlideOUt v1.3 By William Paoli: http://wpaoli.building58.com To use you must have an image ready to go as your tab Make sure to pass in at minimum the path to the image and its dimensions: example: $('.slide-out-div').tabSlideOut({ tabHandle: '.handle', //class of the element that will be your tab -doesnt have to be an anchor pathToTabImage: 'images/contact_tab.gif', //relative path to the image for the tab imageHeight: '133px', //height of tab image imageWidth: '44px', //width of tab image }); or you can leave out these options and set the image properties using css tabSlideOUt change to instagramSlideOut for no conflict */ (function($){ $.fn.instagramSlideOut = 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 , bottompadding:'', bottomrighttop:'' }, 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'; } //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') { if(settings.rightpadding==="0px"){ obj.css({'left' :settings.leftpadding}); }else{ obj.css({'right' : '200px'}); } settings.tabHandle.css({'right' : 0}); } if(settings.tabLocation === 'top') { obj.css({'top' : '-82px'}); settings.tabHandle.css({'bottom' : '-' + properties.tabHeight}); } if(settings.tabLocation === 'bottom') { if(settings.rightpadding==="0px"){ obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'}); }else{ obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed','right':settings.rightpadding}); } settings.tabHandle.css({'top' :'-'+settings.imageHeight}); } 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' : '-'+settings.imageWidth}); $('html').css('overflow-x', 'hidden'); } //functions for animation events settings.tabHandle.click(function(event){ event.preventDefault(); }); var slideIn = function() { if(!obj.hasClass('open')){ return; } if (settings.tabLocation === 'top') { obj.stop(true,true).animate({top:'-' + properties.containerHeight}, parseInt(settings.speed)).removeClass('open'); } else if (settings.tabLocation === 'left') { obj.stop(true,true).animate({left: '-' + properties.containerWidth}, parseInt(settings.speed)).removeClass('open'); } else if (settings.tabLocation === 'right') { obj.stop(true,true).animate({right: '-' + properties.containerWidth}, parseInt(settings.speed)).removeClass('open'); } else if (settings.tabLocation === 'bottom') { obj.stop(true,true).animate({bottom: '-' + properties.containerHeight}, parseInt(settings.speed)).removeClass('open'); } }; var slideOut = function() { if(obj.hasClass('open')){ return; } if (settings.tabLocation == 'top') { obj.stop(true,true).animate({top:'-3px'}, parseInt(settings.speed)).addClass('open'); } else if (settings.tabLocation == 'left') { obj.stop(true,true).animate({left:'-3px'}, parseInt(settings.speed)).addClass('open'); } else if (settings.tabLocation == 'right') { obj.stop(true,true).animate({right:'-3px'}, parseInt(settings.speed)).addClass('open'); } else if (settings.tabLocation == 'bottom') { obj.stop(true,true).animate({bottom:'-3px'}, parseInt(settings.speed)).addClass('open'); } }; var clickScreenToClose = function() { obj.click(function(event){ event.stopPropagation(); }); $(document).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(){ slideIn(); setTimeout(slideOut, 500); }; //choose which type of action to bind if (settings.action === 'click') { clickAction(); } if (settings.action === 'hover') { hoverAction(); } if (settings.onLoadSlideOut) { slideOutOnLoad(); }; }; })(jQuery);