jquery.tabslideout.1.3.js

jquery.tabslideout.1.3.js

/*
 tabSlideOUt v1.3 (altered by katowulf)

 Originally 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

 */


(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,
         tabHandleOffset: 0
      }, 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') {
         obj.css({'left' : settings.leftPos});
         var tabRightOffset = settings.tabHandleOffset==='center'? Math.floor(obj.outerWidth()/2)+'px' : settings.tabHandleOffset;
         settings.tabHandle.css({'right' : tabRightOffset});
      }

      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
         });
         var tabTopOffset = settings.tabHandleOffset==='center'? Math.floor(obj.outerHeight()/2)+'px' : settings.tabHandleOffset;
         settings.tabHandle.css({'top' : tabTopOffset});
      }

      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');
         }

      };

      var slideOut = function() {

         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');
         }
      };

      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);