jquery.tabslideout.1.3.1.js

jquery.tabslideout.1.3.1.js

/*
 tabSlideOUt v1.3.1 (altered by katowulf and then by ahernandezsouza using kawswagan ideas here: https://kahimyang.com/kauswagan/code-blogs/717/customizing-and-using-jquery-tabslideout-plugin)

 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

 We have added
 closeButton,     string variable, a class or id of the element that we use as close button, it can be any clickable tag
 toogleHandle,    a flag whether or not we wanted to hide the tab handle when the panel is out
 inTime, outTime  integers representing time in milliseconds       
 
 */


(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:'0px'
                },  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);