Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

innerfade.js

By: a guest on Mar 17th, 2013  |  syntax: JavaScript  |  size: 5.25 KB  |  views: 29  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /* =========================================================
  2.  
  3. // jquery.innerfade.js
  4.  
  5. // Datum: 2008-02-14
  6. // Firma: Medienfreunde Hofmann & Baldes GbR
  7. // Author: Torsten Baldes
  8. // Mail: t.baldes@medienfreunde.com
  9. // Web: http://medienfreunde.com
  10.  
  11. // based on the work of Matt Oakes http://portfolio.gizone.co.uk/applications/slideshow/
  12. // and Ralf S. Engelschall http://trainofthoughts.org/
  13.  
  14.  *
  15.  *  <ul id="news">
  16.  *      <li>content 1</li>
  17.  *      <li>content 2</li>
  18.  *      <li>content 3</li>
  19.  *  </ul>
  20.  *
  21.  *  jQuery('#news').innerfade({
  22.  *        animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'),
  23.  *        speed: Fading-/Sliding-Speed in milliseconds or keywords (slow, normal or fast) (Default: 'normal'),
  24.  *        timeout: Time between the fades in milliseconds (Default: '2000'),
  25.  *        type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'),
  26.  *              containerheight: Height of the containing element in any css-height-value (Default: 'auto'),
  27.  *        runningclass: CSS-Class which the container get’s applied (Default: 'innerfade'),
  28.  *        children: optional children selector (Default: null)
  29.  *  });
  30.  *
  31.  
  32. // ========================================================= */
  33.  
  34.  
  35. (function(jQuery) {
  36.  
  37.   jQuery.fn.innerfade = function(options) {
  38.     return this.each(function() {
  39.       jQuery.innerfade(this, options);
  40.     });
  41.   };
  42.  
  43.   jQuery.innerfade = function(container, options) {
  44.     var settings = {
  45.       'animationtype':    'fade',
  46.       'speed':            'normal',
  47.       'type':             'sequence',
  48.       'timeout':          2000,
  49.       'containerheight':  'auto',
  50.       'runningclass':     'innerfade',
  51.       'children':         null
  52.     };
  53.  
  54.     if (options) {
  55.       jQuery.extend(settings, options);
  56.     }
  57.  
  58.     if (settings.children === null) {
  59.       var elements = jQuery(container).children();
  60.     }
  61.     else {
  62.       var elements = jQuery(container).children(settings.children);
  63.     }
  64.  
  65.     if (elements.length > 1) {
  66.       jQuery(container).css('position', 'relative').css('overflow', 'hidden').addClass(settings.runningclass);
  67.       for (var i = 0; i < elements.length; i++) {
  68.         jQuery(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
  69.       }
  70.       if (settings.type == "sequence") {
  71.         setTimeout(function() {
  72.           jQuery.innerfade.next(container,elements, settings, 1, 0);
  73.         }, settings.timeout);
  74.         jQuery(elements[0]).show();
  75.         //Set the container height for the first element
  76.         jQuery(container).css('height', jQuery(elements[0]).height());
  77.       }
  78.       else if (settings.type == "random") {
  79.         var last = Math.floor ( Math.random () * ( elements.length ) );
  80.         setTimeout(function() {
  81.           do {
  82.             current = Math.floor ( Math.random () * ( elements.length ) );
  83.           } while (last == current );
  84.           jQuery.innerfade.next(container,elements, settings, current, last);
  85.         }, settings.timeout);
  86.         jQuery(elements[last]).show();
  87.       }
  88.       else if ( settings.type == 'random_start' ) {
  89.         settings.type = 'sequence';
  90.         var current = Math.floor ( Math.random () * ( elements.length ) );
  91.         setTimeout(function(){
  92.           jQuery.innerfade.next(container,elements, settings, (current + 1) %  elements.length, current);
  93.         }, settings.timeout);
  94.         jQuery(elements[current]).show();
  95.       }
  96.       else {
  97.         alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
  98.       }
  99.     }
  100.   };
  101.  
  102.   jQuery.innerfade.next = function(container, elements, settings, current, last) {
  103.     //Set the container height for the current element
  104.     jQuery(container).css('height', jQuery(elements[current]).height());
  105.  
  106.     if (settings.animationtype == 'slide') {
  107.       if(jQuery(elements[current]).outerHeight() > jQuery(container).outerHeight()) {
  108.         jQuery(container).css('height', jQuery(elements[current]).outerHeight());
  109.       }
  110.       jQuery(elements[last]).slideUp(settings.speed);
  111.       jQuery(elements[current]).slideDown(settings.speed);
  112.     }
  113.     else if (settings.animationtype == 'fade') {
  114.       jQuery(elements[last]).fadeOut(settings.speed);
  115.       jQuery(elements[current]).fadeIn(settings.speed, function() {
  116.         removeFilter(jQuery(this)[0]);
  117.       });
  118.     }
  119.     else {
  120.       alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');
  121.     }
  122.  
  123.     if (settings.type == "sequence") {
  124.       if ((current + 1) < elements.length) {
  125.         current = current + 1;
  126.         last = current - 1;
  127.       }
  128.       else {
  129.         current = 0;
  130.         last = elements.length - 1;
  131.       }
  132.     }
  133.     else if (settings.type == "random") {
  134.       last = current;
  135.       while (current == last) {
  136.         current = Math.floor(Math.random() * elements.length);
  137.       }
  138.     }
  139.     else {
  140.       alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
  141.     }
  142.  
  143.     setTimeout((function() {
  144.       jQuery.innerfade.next(container,elements, settings, current, last);
  145.     }), settings.timeout);
  146.   };
  147.  
  148. })(jQuery);
  149.  
  150. // **** remove Opacity-Filter in ie ****
  151. function removeFilter(element) {
  152.   if(element.style.removeAttribute){
  153.     element.style.removeAttribute('filter');
  154.   }
  155. }
clone this paste RAW Paste Data