Jquery twitter ticker first li 2 times

Question

Hello Stackoverflow users,

I have created a tweet ticker with jquery for a website. The problem now is that the first tweet is showing 2 times and when that is over it is working great.

But how can i make it so that the first tweet is only shows one time and not 2 times.

I have made a Fiddle so you can see what is going wrong: JSFiddle link

Answer 1

Your problem seems to be occcuring because the code is executing the following two lines, before it has downloaded all the data from Twitter -

var ticker = $('.tweets ul');
ticker.children('li:first').show().siblings().hide();

The solution below should solve the problem.

$(document).ready(function() {
$(".tweets").tweet({
    count: 20,
    template: "{user}: {text}",
    username: "VersioISP",
    favorites: true
}).bind("loaded", function() {
    $(this).find("a").attr("target", "_blank");
    var ticker = $('.tweets ul');
    ticker.children('li:first').show().siblings().hide();
});

var ticker = $('.tweets ul');

setInterval(function() {
    ticker.find('li:visible').fadeOut(function() {
        $(this).appendTo(ticker);
        ticker.children('li:first').show();
    });
}, 2000);
})