| Tweet |
|
This news ticker like jQuery/ajax based solution is ideal in most of the case where your web page has limited space for all. I found it amazingly simple and charmingly work. I am rewriting/rearranging the steps with due credit to the original post that you can find here.
http://www.fuzionpro.info/2010/11/add-horizontal-twitter-ticker-widget-to.html
OK, first thing first, create following javaScript file and save it as say twitterticker.js
// JavaScript Document
var tweetUsers = ['auroracslk'];
var buildString = "";
$(document).ready(function(){
for(var i=0;i<tweetUsers.length;i++)
{
if(i!=0) buildString+='+OR+';
buildString+='from:'+tweetUsers[i];
}
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", "http://search.twitter.com/search.json?q="+buildString+"&callback=TweetTick&rpp=50");
document.getElementsByTagName("head")[0].appendChild(fileref);
});
function TweetTick(ob)
{
var container=$('#tweet-container');
container.html='';
$(ob.results).each(function(el){
var str = '<li class="rotating-item">'+formatTwitString(this.text)+'</li>';
container.append(str);
});
$('#tweet-container li').hide();
InOut();
}
function formatTwitString(str)
{
str=' '+str;
str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
return str;
}
function InOut()
{
var initialFadeIn = 1000;
var itemInterval = 12000;
var fadeTime = 1000;
var numberOfItems = $('#tweet-container li').length;
var currentItem = 0;
$('#tweet-container li').eq(currentItem).fadeIn(initialFadeIn);
var infiniteLoop = setInterval(function(){
$('#tweet-container li').eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('#tweet-container li').delay(1000);
$('#tweet-container li').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
The following html page demonstrate use of twitter ticker in a web page.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/twitterticker.js"></script>
<style type="text/css">
#tweet-container {
width:300px;
overflow:hidden;
}
#tweet-container {
background: #d5e8ef;
padding: 10px;
margin: 0 0 20px 0;
font-size: 10px;
color: #6e6f73;
font-weight: bold;
font-family: verdana;
float: left;
}
#tweet-container p {
padding: 0px;
margin: 0px;
}
#tweet-container p a {
color: #45799f;
text-decoration: none;
}
</style>
</head>
<body>
<div id="twitter-ticker">
<ul id="tweet-container"></ul>
</div>
</body>
</html>
you can view this example demo here.
Adding this twitter ticker is very simple.
- Add the JavaScript file to your web code base.
- In the javaScript code look for the
var tweetUsers = ['auroracslk'];
and replace auroracslk with your twitter user name.
- Add the JavaScript include and styles code in the above example to the head section of your web page.
- Add the following code to the place in your web page that you like your twitter ticker appear.
<div id="twitter-ticker">
<ul id="tweet-container"></ul>
</div>
Isn't it simple ?
Ok now you may like to customize it a bit. Firstly you may change the time interval by changing the 'itemInterval' javascript variable value in the javascript.
Simillarly you may change initialFadeInand and fadeTimevalues as well.
var initialFadeIn = 1000; var itemInterval = 5000; var fadeTime = 1000;
You can customize width, background color, alignment, border, floating etc modifying the style. OK, it is time for you to add it to your personal or corporate web site. If you have any issues do not hesitate to post it as a comment.
If you want to have rounded border, just change the styles as explained in our previous post "Adding rounded borders using CSS and HTML".
Credits and reference:
http://www.fuzionpro.info/2010/11/add-horizontal-twitter-ticker-widget-to.html
3 comments:
This is something i was looking for :-). Charmingly explained. sooo cool.
Cool
hi, im trying this and i have a problem.
i don't know where i have to put the .js thing, i could only do this in my web (wordpress) and i don't know how to continue o resolve this.
thanks
http://www.fastfashion.es
Post a Comment