Animated Twitter Feed widget with Simple JavaScript

By Clain Dsilva October 28, 2012

Demo Download Code
Here is a quick implementation of Twitter Feed using Simple JavaScript, No frameworks are used. Lets start with the HTML

<div id=”feedWraper”>
<div id=”twitterFeed”></div>
<div id=”feedCache”></div>
</div>

  • “feedWraper ” holds the widget , hence its width and height should be fixed.
  • “twitterFeed” contains all the tweets , and its will be animated with simple JavaScript
  • “feedCache” is a hidden div that stores the tweets.

 

The whole process can be divided into three

  1. JSONP Call
  2. Parsing JSON results [tweets]
  3. Animation

For the JSON call to work properly, all the supporting elements and reference functions should be available before the JSON request. That means all the HTML , CSS and JavaScript for the widget should be on the top and JSON Call should be at the bottom.

function twitterCallback2(tweets){
var tstatus=”;
//Generate HTML links by identifying the protocols
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
for(var i=0; i<tweets.length; i++){
tstatus = tstatus+'<li>’+tweets[i].text.replace(exp,”<a href=’$1′>$1</a>”)+
‘<br><span>’+tweets[i].created_at+'</span></li>’;
}

document.getElementById(‘feedCache’).innerHTML = tstatus;
}

Function name should be same as the Json Response wrapper, here in this case twitterCallback2(). A JavaScript object is created on the JSON call and is passed into the function, here lets call it “tweets”.

The tweets object is plain text wrapped under object notation, hence its easy to iterate using a loop and construct the necessary HTML string. HTML string thus created is injected into the hidden div “feedCache”.

Call the JSONP request in a JavaScript <Script> tag with its “src” attribute pointing to the JSON API address

<script type=”text/javascript” src=”https://api.twitter.com/1/statuses/user_timeline.json?screen_name=clain4u&callback=twitterCallback2&count=10″></script>

Here the query string has 3 parameters.

  1. screen_name this is your twitter username. mine is clain4u
  2. callback this is the twitter defined call back identifier. Nothing to change here
  3. count this is the number of tweets you want to fetch

Alright feeds will now start showing on the twitterFeed div. Now we need to animate the feed for scrolling effect. More clearly an infinite loop of tweets with no breaks.

Lets make twitterFeed relatively positioned to feedWraper, the CSS looks like this.

#feedWraper{

/* fixed width & height */
width:300px;
height:400px;
overflow:hidden;
}
#twitterFeed{
position:relative;
width:280px;
padding:10px;
}
#feedCache{
display:none;
}

Make the overflow property of the feedWraper hidden so that the first fold of twitterFeed div is visible and rest are hidden.

Animation concept

Reduce the “margin top” property of twitterFeed div from “0px” to negative values , the div twitterFeed being relatively positioned will start to move vertically upwards beyond the feedWraper div. The overflow property of the CSS is triggers and makes the top’er part hidden. Use a loop to trigger this process , such that margin-top property value is continuously reduced with a delay.

One issue with this method is that, after a wile of scrolling up, the twitterFeed div element will have its end point and may completely disappear into the hidden wrapper. So we need to make the twitterFeed longer vertically, append the twitterFeed div with the tweets stored in the feedCache in regular intervals such that the twitterFeed grows longer and end point is never reached. Adjust the appending process timer such that you do not overload the twitterFeed div.

Here I use a recursive function to trigger this animation.

function animate(val){
var margin = parseInt(document.getElementById(‘twitterFeed’).style.marginTop.replace(‘px’,”))-1;
document.getElementById(‘twitterFeed’).style.marginTop=margin+’px’;
if(val % 200 == 0){ // after every 200 loops
document.getElementById(‘twitterFeed’).innerHTML = document.getElementById(‘twitterFeed’).innerHTML
+document.getElementById(‘feedCache’).innerHTML;
}
setTimeout(‘animate(‘+(parseInt(val)+1)+’)’,50);
}

Set the margin-top property to 0px at some point before the animate function call

Here is the complete final code

<html >
<head>
<title>Twitter Feed</title>
<style>
<!–
#feedWraper{
width:300px;
height:400px;
border:3px solid #3B8ECD;
overflow:hidden;
border-radius: 8px;
background:#E5F7FD;
}
#twitterFeed{
position:relative;
width:280px;
margin-top:0px;
padding:10px;
font-family:Verdana,sans-serif;
font-size:11px;
text-align:justify;
color:#333333;
font-weight:700;
}
#feedCache{
display:none;
}
#twitterFeed a{
color:#0099FF;
}
#twitterFeed ul{
padding:0px;
margin:0px;
margin-left:10px;
}
#twitterFeed li{
margin-bottom:10px;
margin-left:10px;
}

–>
</style>
</head>
<body onload=””>
<div id=”feedWraper”>
<div id=”twitterFeed”></div>
<div id=”feedCache”></div>
</div>
<script>
function twitterCallback2(tweets){
var tstatus=”;
//Generate HTML links by identifying the protocols
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
for(var i=0; i<tweets.length; i++){
tstatus = tstatus+'<li>’+tweets[i].text.replace(exp,”<a href=’$1′>$1</a>”)+
‘<br><span>’+tweets[i].created_at+'</span></li>’;
}

document.getElementById(‘feedCache’).innerHTML = tstatus;
document.getElementById(‘twitterFeed’).style.marginTop=’0px’;
animate(0);
}

function animate(val){
var margin = parseInt(document.getElementById(‘twitterFeed’).style.marginTop.replace(‘px’,”))-1;
document.getElementById(‘twitterFeed’).style.marginTop=margin+’px’;
if(val % 200 == 0){ // after every 200 loops
document.getElementById(‘twitterFeed’).innerHTML = document.getElementById(‘twitterFeed’).innerHTML
+document.getElementById(‘feedCache’).innerHTML;
}
setTimeout(‘animate(‘+(parseInt(val)+1)+’)’,50);
}
</script>
<script type=”text/javascript” src=”https://api.twitter.com/1/statuses/user_timeline.json?screen_name=clain4u&callback=twitterCallback2&count=10″></script>
</body>
</html>

Download Code

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Leave a Reply

Your email address will not be published. Required fields are marked *