Archives for June 2011
You are currently browsing 2 articles posted June 2011.
How to Create a Scrolling Twitter Feed Using jQuery
Published Friday 24th of June 2011
In this tutorial I'll explain how to create one of those scrolling twitter feed boxes that are quite common on many websites today.
I'll be using jQuery as well as Remy Sharp's Silky Smooth Marquee plug-in.
The HTML
Most of the code will be generated with JS. But we'll add a container and a little "Loading..."-text directly in the HTML.
<div id="twitter">
<h2>Latest tweets</h2>
<p>Loading...</p>
<noscript>This feature requires JavaScript</noscript>
</div>I'll also use the noscript element to inform users without JS that they need to turn it on in order to see the tweets.
You could fetch the tweets using PHP and CURL but that makes your entire page halt until the tweets are loaded so I prefer the JS-approach.
The CSS
You can style it any way you like really but this CSS will make it look kind of like in the image above.
/* The container for the module */
#twitter {
background: #f1f2f8;
width: 600px; /* Up to you but remember to change the div width below as well if you change it */
padding: 0 10px;
overflow: hidden; /* clearfix */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
#twitter h2 {
float: left; /* We'll make the heading sit on its own line next to the tweets */
width: 85px; /* Might wanna change this depending on the text in the heading */
margin: 0;
padding: 6px 0; /* I'll set the top and bottom padding here rather than in the container so as not to cut off any text */
font-size: 12px;
color: #4b9fff;
line-height: 1;
}
/* The marquee plug-in turns a marquee element into a div */
#twitter p,
#twitter marquee,
#twitter div {
float: left;
width: 505px; /* Container width - heading width - 10px (for some right padding) */
margin: 0;
padding: 6px 0; /* Again we set the padding in here so as not to cut text */
line-height: 1;
}
/* All the tweets will be links pointing to your page on twitter */
#twitter marquee a,
#twitter div a {
margin: 0 10px 0 0;
color: #333;
text-decoration: none;
}
/* The i is used to display the date of the tweet */
#twitter marquee a i,
#twitter div a i {
font-style: normal;
color: #999;
}The JavaScript
Now for the interesting bits.
var Twitter = {
init: function () {
// Pass in the username you want to display feeds for
this.insertLatestTweets('realjknoxville');
},
// This replaces the <p>Loading...</p> with the tweets
insertLatestTweets: function (username) {
var limit = 5; // How many feeds do you want?
var url = 'http://twitter.com/statuses/user_timeline.json?screen_name=' + username + '&count=' + limit + '&callback=?';
// Now ajax in the feeds from twitter.com
$.getJSON(url, function (data) {
// We'll start by creating a normal marquee-element for the tweets
var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';
// Loop through all the tweets and create a link for each
for (var i in data) {
html += '<a href="http://twitter.com/' + username + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
}
html += '</marquee>';
// Now replace the <p> with our <marquee>-element
$('#twitter p').replaceWith(html);
// The marquee element looks quite shite so we'll use Remy Sharp's plug-in to replace it with a smooth one
Twitter.fancyMarquee();
});
},
// Replaces the marquee-element with a fancy one
fancyMarquee: function () {
// Replace the marquee and do some fancy stuff (taken from remy sharp's website)
$('#twitter marquee').marquee('pointer')
.mouseover(function () {
$(this).trigger('stop');
})
.mouseout(function () {
$(this).trigger('start');
})
.mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}
})
.mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
})
.mouseup(function () {
$(this).data('drag', false);
});
},
// Takes a date and return the number of days it's been since said date
daysAgo: function (date) {
// TODO: Fix date for IE...
if ($.browser.msie) {
return '1 day ago';
}
var d = new Date(date).getTime();
var n = new Date().getTime();
var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
var daysAgo = numDays + ' days ago';
if (numDays == 0) {
daysAgo = 'today';
}
else if (numDays == 1) {
daysAgo = numDays + ' day ago';
}
return daysAgo;
}
};
Twitter.init();And there you have it. View the scrolling twitter feed in action here.
Join 33 others and post a comment
E3 Was Shite... As Usual
Published Monday 6th of June 2011
I had really high hopes for this year's E3. Rumors of a new Nintendo console had me hoping that Sony and M$ would follow suite and announce the PS4 and XBOX 720.
Microsoft
Microsoft's presentation was by far the worst of the three showing pretty much nothing but Kinect bollocks and a few expected games (GoW, Halo and Forza 4). The fact that the only promising XBOX exclusive for ages (Ryse) turned out to be Kinect crap didn't exactly help.
One thing that looked kind of cool, I thought, was the new Bing for XBOX thingy (although Bing really is a crap service that has to rely on Google to produce relevant search results). Voice command was just a ridiculous gimmick of course but I reckon what they have going is the closest to the type of media centre I wrote about recently.
What was missing: GTAV, BF3 on a console, XBOX 720.
Sony
Sony didn't really have any nice surprises either but at least they didn't spend as much time on the casual market as MS did with Kinect.
Uncharted 3 obviously looked totally awesome and Resistance 3 seemed like an improvement from the previous iterations. Sly 4 is apparently meant to be really good as well and the God of War and ICO collections are highly awaited.
They also presented their new portable device officially named PS Vita. It looks quite powerful and after what Nintendo showed I wouldn't be surprised if Sony tried to copy what Nintendo are doing with their new Wii U controller.
If you think about it it really shouldn't be that difficult seeing as the PS Vita basically is a controller with a screen that has WiFi plus a shit load of horse power. I guess the fact the the PS Vita is missing some of the DualShock's buttons could be a bit of a problem. But not for every game.
Update: VG247: Sony: Vita could be used as PS3 controller
What was missing: Last Guardian, Agent, FFvs13, new Quantic Dream title, Gran Turismo 6 and of course the PS4.
Nintendo
After Sony's and Microsoft's disappointing presentations I had super high hopes for Nintendo's new (supposedly hard core) console.
They started out with 45 minutes of kiddy games that made most people yawn it seemed (why do these clowns insist on showing the E3 crowd - most likely the most hard core gamers on the planet - kid games and motion controls? We don't give a fuck about that).
Eventually, however, they finally got to the interesting bit, the new Wii U. They didn't actually show the console itself which confused quite a lot of people into thinking it was nothing more than a Wii add-on (Sweden's number 1 gaming magazine's editor in chief for one, LOL).
But I have to say the new console was a disappointment as well. Seeing as they didn't focus at all on showing anything that looked remotely next gen I assume it won't be more powerful than the 8 year old tech we have in our lousy consoles today.
The new controller seemed like it had potential for some cool gimmicks but at the same time it looks stupidly uncomfortable and ridiculously expensive.
What was missing: A proper next gen console with GTAV running in crazy good looking graphics.
Conclusion
If they don't announce new consoles before or during the next E3 I'll be switching to PC again. The tech that's in current gen systems is a fucking joke and they've reached the limits of what can be done with it now. Sure you can always tweak a few algorithms to squeeze out a couple of extra frames per second but what we really need is up to date hardware!
I want to see games that utilize Euphoria, PhysX, DX11, completely destructible environments (ala Red Faction) all at once while looking as good as BF3. That will never happen on today's rubbish consoles.
All the hope I had for Nintendo was lost as well as their latest crap box didn't seem to bring anything new to the table. Like I mentioned before it seems feasible that Sony might use the PSVita the same way Nintendo uses its Wii U controller anyway so then they've got shit all.
Did you watch it? What did you think?
Be the first to post a comment