(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 }, callerSettings || {}); settings.tabHandle = $(settings.tabHandle); var obj = this; if (settings.fixedPosition === true) { settings.positioning = 'fixed' } else { settings.positioning = 'absolute' } if (document.all && !window.opera && !window.XMLHttpRequest) { settings.positioning = 'absolute' } 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', 'margin-top': '-1px' }); 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' }; 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({ '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') } 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) }; if (settings.action === 'click') { clickAction() } if (settings.action === 'hover') { hoverAction() } if (settings.onLoadSlideOut) { slideOutOnLoad() } } })(jQuery);