jQuery Cycle & jTweetsAnywhere together

Question

I want to use jTweetsAnywhere to show my latest tweets, then I like to use jQuery Cycle to cycle through the tweets one by one. The problem seems to be that the markup from jTweetsAnywhere needs to be loaded before jQuery Cycle loads or jQuery Cycle wont work.

jTweetsAnywhere:

$(document).ready(function () {
    $('#latest-tweets').jTweetsAnywhere({
        username: 'Twittername',
        count: 5,
    });
});

jQuery cycle:

$(window).load(function() {
    $('#latest-tweets ul').cycle({
        fx: "scrollDown",
        easing: "easeOutCubic",
        speed: 600,
        timeout: 5000
    });
});

How do I get the markup for the tweets to load before jQuery cycle?

Answer 1

Just pushed an update to the jTweetsAnywhere github repo. The plugin now supports two new event handlers that were called when the tweet feed gets populated.

The onReadyHandler is called exactly once after the tweets are initially loaded and added to the DOM. Immediately after calling this event handler the onFeedPopulationHandler is called with the invocations parameter set to 0.

The onFeedPopulationHandler is called each time new tweets were added to the tweet feed - and thereby to the DOM. The supplied event handler should have the following interface: function(invocations, options) {} The invocations parameter contains the present # of calls to the handler, starting at 0 for the first call. This event handler is called either for populating the feed by paging or by autorefreshing.

Sample:

$(document).ready(function()
{
    $('#jta_testfeed').jTweetsAnywhere(
    {
        searchParams: 'q=html5',
        count: 5,

        parts: ['connect-button', 'login-info', 'tweet-box', 'tweets'],

        showTweetFeed:
        {
            autoConformToTwitterStyleguide: true,
            showProfileImages: true,

            paging:
            {
                mode: 'more'
            },
            autorefresh: 
            {
                mode: 'trigger-insert',
                interval: 30
            },
            showTimestamp:
            {
                refreshInterval: 10
            }
        },
        onReadyHandler: function()
        {
            if (console)
            {
                console.log('onReadyHandler: # of children = ' + $('.jta-tweet-list').children().length);
            }
        },
        onFeedPopulationHandler: function(invocations)
        {
            if (console)
            {
                console.log('onFeedPopulationHandler: invocations: ' + invocations + ', # of children = ' + $('.jta-tweet-list').children().length);
            }
        }
    });
});