logo   tabSlideOut




Slide-outs findes i mange varianter. Her en af dem - primært beregnet til tekst, men kan også anvendes til andre ting.


Den kan valgfrit placeres for oven, for neden, til højre eller til venstre - Eller der kan være flere på samme side.


Via både den øverste del af .js-programmet og event kan der foretages mange opsætninger. Selve vinduet kan tilpasses via HTML og CSS.


HTML
<div class="slide-out-div">
    <h3>Slide-out tekst</h3>
    <p>Her kan indsættes en hvilkensomhelst HTML-baseret kode incl. PHP etc.</p<
</div>
CSS
<style type="text/css">
.slide-out-div {
    padding: 20px;
    width: 250px;
    background: #ccc;
    border: 1px solid #29216d;
}
</style>
Event
<script type="text/javascript"> $(function(){
    $('.slide-out-div').tabSlideOut({
       tabHandle: '.handle',       //class of the element that will become your tab
       pathToTabImage: 'contact.gif',       //path to the image for the tab //Optionally can be set using css
       imageHeight: '122px',       //height of tab image //Optionally can be set using css
       imageWidth: '40px',       //width of tab image //Optionally can be set using css
       tabLocation: 'left',       //side of screen where tab lives, top, right, bottom, or left
       speed: 300,       //speed of animation
       action: 'click',       //options: 'click' or 'hover', action to trigger animation
       topPos: '200px',       //position from the top/ use if tabLocation is left or right
       leftPos: '20px',       //position from left/ use if tabLocation is bottom or top
       fixedPosition: false //options: true makes it stick(fixed position) on scroll
    });
});
</script>

</head>
Links
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="jquery.tabslideout.1.3.js"></script>
jQuery program (jquery.tabslideout.1.3.js)
Kan også hentes her: x
/*
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);
Billede
kontakt
Content

Slide-out tekst

Her kan indsættes en hvilkensomhelst HTML-baseret kode incl. PHP etc.
x
x