I recently started learning javascript and I'm struggling with loading a new twitter feed based on user input. Here is the code I have been working on:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Twitter Feed</title>
<style type="text/css">
body {
background: #111111;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ccc;
}
h1 { padding: 20px 0 0 15px; margin: 0; letter-spacing: -3px; }
h2 { padding: 0 0 0 15px; margin: 0; color: #777; letter-spacing: -2px; }
.loader { position: absolute; top: 250px; left: 105px; }
#twitter { position: relative; width: 280px; background: #222; height: 820px; margin: 50px 0 0 250px; }
#twitter li p { padding: 0 0 15px; }
#twitter p a:link, #twitter p a:active, #twitter p a:visited { color: #6fb2cd; text-decoration: none; }
#twitter p a:hover { text-decoration: underline; }
#twitter ul {
width: 260px;
height: auto;
padding: 15px 0 0 15px;
margin: 0;
}
#twitter li {
float: left;
margin: 3px 0;
list-style-type: none;
}
li.twitter_date {
background: url(../images/date_bg.jpg) no-repeat left top;
width: 95px;
height: 23px;
text-align: center;
line-height: 21px;
}
.twitter_date a:active, .twitter_date a:link, .twitter_date a:visited {
color: #666;
background: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 7px;
}
.twitter_date a:hover {
color: #666;
}
a:link#go_back, a:active#go_back, a:visited#go_back {
display: block;
background: url(/demos/go_back.jpg) no-repeat top left;
width: 120px;
height: 40px;
position: absolute;
top: 50px;
left: 100px;
text-indent: -9999px;
color: #111;
}
a:hover#go_back {
background: url(/demos/go_back.jpg) no-repeat -120px 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//Twitter
window.onload = function() {
var ajax_load = "<img class='loader' src=' loader.gif' alt='Loading...' />";
var url = 'http://twitter.com/statuses/user_timeline/' + 'coldplay' + '.json?call back=twitterCallback2&count=6';
var script = document.createElement('script');
$("#twitter_feed").html(ajax_load);
script.setAttribute('src', url);
document.body.appendChild(script);
}
changeFeed is supposed to update the feed but it's not functioning correctly. Any suggestions?
function changeFeed(){
var ajax_load = "<img class='loader' src=' loader.gif' alt='Loading...' />";
var newSearch = $('#query').val();
var url = 'http://twitter.com/statuses/user_timeline/' + newSearch + '.json?callback=twitterCallback2&count=6';
var script = document.createElement('script');
$("#twitter_feed").html(ajax_load);
script.setAttribute('src', url);
document.body.appendChild(script);
}
function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,
function(url) { return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML.push('<li class="twitter_date"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li> <li><p>'+status+'</p></li>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + " " + values[5] + " " + values[3];
var parsed_date = new Date();
parsed_date.setTime(Date.parse(time_value));
var months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec');
var m = parsed_date.getMonth();
var postedAt = '';
postedAt = months[m];
postedAt += " "+ parsed_date.getDate();
postedAt += ","
postedAt += " "+ parsed_date.getFullYear();
return postedAt;
}
</script>
</head>
<body>
<a id="go_back" href="javascript:history.go(-1)">Go Back</a>
<div id="twitter">
<form>
Search: <input type="text" name="searchstring" id="query" /><br />
</form>
<button type="button" onclick="changeFeed();">Search</button>
<h1>searchstring.text()</h1>
<h2>Twitter Feed</h2>
<ul id="twitter_update_list">
</ul>
</div>