Singleline twitter feed JS problem.

[perfectheat]

Hello, first time poster here.

I have very little understanding of Javascript and have a problem with some I'm using. It's a singleline twitter feed and you can see it top right here: http://zest.explosiveapps.com/navigation.php

// Compatability with jQuery:
jQuery.noConflict();

window.$ = function (element) {
	return document.getElementById(element);
};

/* Header and footer JavaScript */
jQuery(document).ready(function() {
	var $ = jQuery;

    function scroll_tweet(li){
        
        var post = li.children("div.post"),
        pWidth = post.width();
        if (pWidth > parseInt(balloon.css('width'))){
            var leftEnd = li.find('div.end');
            if(leftEnd.length === 0){
                leftEnd = $('<div class="end left" />').appendTo(li);
            } 
            var offsX = parseInt(leftEnd.width());
            post.animate({left: offsX - pWidth - 55}, 23000, 'linear', function(){post.css('left', offsX);});
        }
    }

    function swap_tweets(current_tweet){
        var next_tweet = (current_tweet + 1) % 5; /* max five tweets */
        var li = $("li#tweet" + next_tweet);

        $("#tweet" + current_tweet).fadeOut(300);
        setTimeout(function(){
            li.fadeIn(400);
         }, 400);

        setTimeout(function(){scroll_tweet(li);}, 3800);                

        display_tweet = next_tweet;
        setTimeout(function(){swap_tweets(display_tweet);}, 11300);
    }
        
    var balloon = $("#twitterpost div.balloon");
    display_tweet = 0;
    if($("div.balloon ul li#tweet1").html() !== null){
        setTimeout(function(){swap_tweets(display_tweet);}, 12000);
        var firstli = $("li#tweet0");
        setTimeout(function(){scroll_tweet(firstli);}, 7500);
    }

});

As you can see from just watching, it has some problems. It doesn't fade out posts before displaying a new one. From what I understand it talks to the CSS to figure out the length. So maybe that's where the problem is.

/* twitter-bubble */

#navigation #twitterpost {
    position: relative;
    top: -33px;
    right: 95px;
}

#navigation #twitterpost .balloon {
    position: relative;
    float: right;
    width: 345px;
    height: 21px;
    overflow: hidden;
    margin-top: 0px;
    padding: 0;
    background: url(/navigation/images/bubble.png) 0 0 no-repeat;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}

#navigation #twitterpost .balloon div {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    color: #666666;
    padding: 0px 0px 12px 10px;
    font-size: 11px;
}

#navigation #twitterpost .end {
    position: absolute;
    top: 0;
    z-index: 1;
    height: 21px;
    background: url(/navigation/images/bubble.png) no-repeat;
}

#navigation #twitterpost .end.left {
    left: 0;
    width: 0px;
    background-position: 0 0;
}

#navigation #twitterpost .end.right {
    right: 0;
    width: 0px;
    background-position: 100% 0;
}

#navigation #twitterpost ul li .post {
    position: relative;
}

#navigation #twitterpost ul li .post {
    font-size: 11px;
    white-space: nowrap;
    position: absolute;
    top: 3px;
}

#navigation #twitterpost ul {
    padding-left: 0px;
    margin: 0px;
    list-style-type: none;
}

Or maybe it has something to do with using this script http://ajax.googleapis.com/ajax/libs.../jquery.min.js

Thank you for take a look at my mess! Sorry for being such an amateur. And by the way, everything is wip on that site

Cheers
M.

[SysSU]

I was wondering if anyone could give me all the details to make this script work on my site? I like it and its the same script used at www.spotify.com.

P.S. Some of your questions to register are kind of hard to answer, why is this?

[jojobeanz]

Hi,

I'm having the exact same problem with tweets not fading out. Did you ever solve this?

[tagliaboo]

I am trying to use a very similar feed on my church website. Did you work out the kinks? What file or code are you using to pull the tweets? I was unable to find anywhere in the HTML CSS or JS that directs you to a twitter account

Thanks for your help
JT