JSFiddle - React, Tailwind, and code Playground
Simple Twitter Feed with Auto-Scroll
HTML
<div id="tweetFeed">
<div id="jstwitter"></div>
</div>
CSS
@import url(http://fonts.googleapis.com/css?family=Adamina);
#tweetFeed {
width: 500px;
margin: 20px;
}
#jstwitter {
width: 500px;
height: 85px;
font-family: Adamina;
font-size: 14px;
color: #444;
overflow: hidden;
}
#jstwitter .tweet {
margin: 0;
height: 85px;
}
#jstwitter .tweet a {
text-decoration: none;
color: #f26222;
font-size: 12px;
}
#jstwitter .tweet a:hover {
text-decoration: underline;
color: #b15030;
}
#jstwitter .tweet .time {
font-size: 10px;
font-style: italic;
color: #8a98b6;
}
JavaScript
/**
* View Tutorial at:
* http://jenniferperrin.com/blog/tutorial-simple-twitter-scroller-using-jquery
**/
jtweet = {
// Set Twitter username, number of tweets & id/class to append tweets
user: 'uteweather',
numTweets: 5,
appendTo: '#jstwitter',
// Core function of jtweet
loadTweets: function() {
$.ajax({
url: 'http://api.twitter.com/1/statuses/user_timeline.json/',
type: 'GET',
dataType: 'jsonp',
data: {
screen_name: jtweet.user,
include_rts: true,
count: jtweet.numTweets,
include_entities: true
},
success: function(data, textStatus, xhr) {
var html = '<div class="tweet">tweet_text<div class="time">ago</div>';
// Append tweets to page
for (var i = 0; i < data.length; i++) {
$(jtweet.appendTo).append(
html.replace('tweet_text', jtweet.ify.clean(data[i].text)).replace(/user/g, data[i].user.screen_name).replace('ago', jtweet.timeAgo(data[i].created_at)));
}
}
});
},
/**
* relative time calculator FROM TWITTER
* @param {string} twitter date string returned from Twitter API
* @return {string} relative time like "2 minutes ago"
*/
timeAgo: function(dateString) {
var rightNow = new Date();
var then = new Date(dateString);
if ($.browser.msie) {
// IE can't parse these crazy Ruby dates
then = Date.parse(dateString.replace(/( \+)/, ' UTC$1'));
}
var diff = rightNow - then;
var second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24,
week = day * 7;
if (isNaN(diff) || diff < 0) {
return ""; // return blank string if unknown
}
if (diff < second * 2) {
// within...