Treehouse: Grow your CSS skills. Land your dream job.

Modifying Innerfade to display two tweets?

  • # February 8, 2010 at 10:58 am

    I’m trying to figure out if it’s possible to change how innerfade displays tweets. At the moment I have it fading them in sequence but I’d like for it to display and fade two tweets at a time rather than just the one. Is this possible?!

    the script:

    Code:
    jQuery(‘#twitter_update_list’).innerfade({
    animationtype: ‘fade’,
    speed: ‘normal’,
    timeout: 6000,
    type: ‘sequence’,
    containerheight: ‘auto’
    });
    Code:


    and the innerfade.js:

    Code:
    (function($) {

    $.fn.innerfade = function(options) {
    return this.each(function() {
    $.innerfade(this, options);
    });
    };

    $.innerfade = function(container, options) {
    var settings = {
    ‘animationtype': ‘fade’,
    ‘speed': ‘normal’,
    ‘type': ‘sequence’,
    ‘timeout': 2000,
    ‘containerheight': ‘auto’,
    ‘runningclass': ‘innerfade’,
    ‘children': null
    };
    if (options)
    $.extend(settings, options);
    if (settings.children === null)
    var elements = $(container).children();
    else
    var elements = $(container).children(settings.children);
    if (elements.length > 1) {
    $(container).css(‘position’, ‘relative’).css(‘height’, settings.containerheight).addClass(settings.runningclass);

    for (var i = 0; i < elements.length; i++) { $(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide(); }; if (settings.type == "sequence") { setTimeout(function() { $.innerfade.next(elements, settings, 1, 0); }, settings.timeout); $(elements[0]).show(); } else if (settings.type == "random") { var last = Math.floor ( Math.random () * ( elements.length ) ); setTimeout(function() { do { current = Math.floor ( Math.random ( ) * ( elements.length ) ); } while (last == current ); $.innerfade.next(elements, settings, current, last); }, settings.timeout); $(elements[last]).show(); } else if ( settings.type == 'random_start' ) { settings.type = 'sequence'; var current = Math.floor ( Math.random () * ( elements.length ) ); setTimeout(function(){ $.innerfade.next(elements, settings, (current + 1) % elements.length, current); }, settings.timeout); $(elements[current]).show(); } else { alert('Innerfade-Type must either be 'sequence', 'random' or 'random_start''); } } }; $.innerfade.next = function(elements, settings, current, last) { if (settings.animationtype == 'slide') { $(elements[last]).slideUp(settings.speed); $(elements[current]).slideDown(settings.speed); } else if (settings.animationtype == 'fade') { $(elements[last]).fadeOut(settings.speed); $(elements[current]).fadeIn(settings.speed, function() { removeFilter($(this)[0]); }); } else alert('Innerfade-animationtype must either be 'slide' or 'fade''); if (settings.type == "sequence") { if ((current + 1) < elements.length) { current = current + 1; last = current - 1; } else { current = 0; last = elements.length - 1; } } else if (settings.type == "random") { last = current; while (current == last) current = Math.floor(Math.random() * elements.length); } else alert('Innerfade-Type must either be 'sequence', 'random' or 'random_start''); setTimeout((function() { $.innerfade.next(elements, settings, current, last); }), settings.timeout); }; })(jQuery); // **** remove Opacity-Filter in ie **** function removeFilter(element) { if(element.style.removeAttribute){ element.style.removeAttribute('filter'); }

    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.