Question

I am trying to make a twitter box with sliding tweets in jquery.
For the sliding parts i am using this: http://jquery.malsup.com/cycle/ and for retrieving the tweets this: http://theodin.co.uk/blog/jquery/tweetable-1-6-launched.html.

On top of my html file i’ve put this:

<script type="text/javascript">
jQuery(document).ready(function($){
  $('#tweets').tweetable({
    username: 'jquery',
    limit: 5,
    time: true,
    replies: false
  });
  $('#twitter ul').cycle({
    fx: "scrollUp",
    speed: 600,
    timeout: 4000
  });
});
</script>

The HTML markup is this:

<div id="twitter-wrapper">
  <div id="twitter">
    <img src="images/icons/twitter_newbird_blue.png">
    <div id="tweets"></div>
  </div>
</div>

Both the scripts work perfectly, the ony problem is that the ‘cycle()’ function doesn’t wait for the ‘tweetable()’ function to finish…
I don’t know how to make it work. Maybe a callback function? But how?

Thanks.

Answer 1

You need to change your code to add cycle inside onComplete method of tweetable. Something like:

<script type="text/javascript">
jQuery(document).ready(function($){
  $('#tweets').tweetable({
    username: 'jquery',
    limit: 5,
    time: true,
    replies: false,
    onComplete: function(){
      $('#twitter ul').cycle({
        fx: "scrollUp",
        speed: 600,
        timeout: 4000
      });
    }
  });
});
</script>