Carrying on from the first part of creating a Flash-less home page on Untold Entertainment, we add to the tutorial on animating Twitter text with some more usability and style.
We start off by generating links (to URLs and Twitter pages) inside the text, make a couple of buttons to skip the tweets backwards and forwards, then animate the Twitter bird and speech bubble as a background.
Try out the new styled Twitter bar demo.
The New HTML Structure
To add in our new elements, we’ll have to mess about with the layout of our HTML tags.
The container still holds the text as before, but we add in the bird image and navigation buttons inside a div. The holder is there to keep the buttons beside the text, and the outer wrapper collects all of it including the bird image.
1 2 3 4 5 6 7 8 9 10 11 12 | <div id="wrapper"> <div id="holder"> <div id="tweet_buttons"> <a id="prev" href="#">◄</a> <a id="next" href="#">►</a> </div> <div id="container"> </div> </div> <img id="bird" src="bird.gif" alt="bird" /> </div> |
The HTML entities are the forward and backward pointing arrowheads you see. These can be images, but the entities will do for now to make things simpler.
Adding Links to the Text
To find URLs and Twitter usernames, we have to do a check on each word. Here we’re looking for anything starting with “http://” and “@” respectively.
We change our add_text() method from last time with the following lines of code. This should replace the line beginning with var new_text = ....
The first three sections change text inside add_text(). For the full replacement code, use the new function at the end of the tutorial.
1 2 3 4 5 6 7 8 9 10 11 12 | var word = updates[update_key][word_key]; if(word.substr(0, 1) == '@') { word = '<a href="http://twitter.com/' + word.substr(1) + '">' + word + '</a>'; } else if(word.substr(0, 7) == 'http://') { word = '<a href="' + word + '">' + word + '</a>'; } var new_text = $('#container').html() + ' <span class="rot' + rand + '">' + word + '</span>'; |
This wraps any usernames and URLs inside an anchor <a> tag and turns them into clickable links.
Animating the bird
These few lines go after $('#container').html(new_text);.
1 2 3 4 5 6 | $('#bird').attr('src', 'bird_shout.gif'); $('#bird').oneTime(chirp_time, 'blabel_' + update_key, function() { $('#bird').attr('src', 'bird.gif'); }); |
The variable chirp_time should be added to our list of Variables at the top of the JavaScript section. Here I’ve set it to 100 as it works well for the GIF animation. And while you’re there add in a delay that we’ll use later.
1 2 3 4 5 | ... var length_min = 4; var length_max = 6; var chirp_time = 100; var delay = 2000; |
This is what makes the bird’s mouth move, held open by the time we’ve specified in chirp_time as 100 milliseconds.
Animating the Speech Bubble
Look for the “if” statement of if(word_key < updates..., add this line just inside.
1 | $('#bubble').css('background-image', 'url("bubble.gif")'); |
This sets the background to be the non-animated image of a speech bubble.
In the "else" of this statement, look for the first timer event (the first line inside). In here we add the code to make the background animate as the text transitions into a new tweet. It's similar to the line above, but instead links to an animated image.
1 | $('#bubble').css('background-image', 'url("bubble_animated.gif")'); |
Setting Up the Controls
To add JavaScript "onclick" events to our navigational buttons, we call jQuery on page load. This is to allow the elements to be created before we bind events to them.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | $(function() { $('#prev').click(function() { $('#container').stopTime(); $('#container').html(''); word_key = 0; update_key--; if(update_key < 0) { update_key = updates.length - 1; } $('#bubble').css('background-image', 'url("bubble_animated.gif")'); $('#container').oneTime(delay, 'label_' + word_key, add_text); return false; }); $('#next').click(function() { $('#container').stopTime(); $('#container').html(''); word_key = 0; update_key++; if(update_key > updates.length - 1) { update_key = 0; } $('#bubble').css('background-image', 'url("bubble_animated.gif")'); $('#container').oneTime(delay, 'label_' + word_key, add_text); return false; }); }); |
The code should look very familiar to what's inside add_text(). Simply put, the #previous code skips to the previous tweet and #next goes to the one after, so this changes the increment or decrement of the update_key variable.
Updating the Stylesheet
The new styles for these elements are also as follows.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #bubble { width:700px; height:60px; display:inline-block; background:url('bubble.gif') 50% 50% no-repeat; } #buttons { float:right; margin-top:40px; } #buttons a { color:#999; text-decoration:none; } #bird { vertical-align:top; } |
And that's it for now.
Next we'll make the image slider.
(Here's the new code for add_text())
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | function add_text() { var rand = Math.ceil(Math.random() * 4); var word = updates[update_key][word_key]; if(word.substr(0, 1) == '@') { word = '<a href="http://twitter.com/' + word.substr(1) + '">' + word + '</a>'; } else if(word.substr(0, 7) == 'http://') { word = '<a href="' + word + '">' + word + '</a>'; } var new_text = $('#container').html() + ' <span class="rot' + rand + '">' + word + '</span>'; $('#container').html(new_text); $('#bird').attr('src', 'bird_shout.gif'); $('#bird').oneTime(chirp_time, 'blabel_' + update_key, function() { $('#bird').attr('src', 'bird.gif'); }); word_key++; if (word_key < updates[update_key].length) { $('#bubble').css('background-image', 'url("bubble.jpg")'); set_timer(); } else { $('#container').oneTime(wait, 'reset', function() { $('#container').html(''); word_key = 0; update_key++; if(update_key > updates.length - 1) { update_key = 0; } $('#bubble').css('background-image', 'url("bubble_animated.gif")'); $('#container').oneTime(delay, 'label_' + word_key, add_text); }); } } |