We’re going to pick up where we left off in our last tutorial on creating our responsive web design footer.
In the last tutorial you may recall that we laid out the large version of our footer and inserted a Twitter feed as well. In this tutorial we’re going to finish off our footer by making it responsive and plugging in the jQuery necessary to make our Twitter feed work.
If your dog ate your work up until this point, you can download the source code here. Before we get started, let’s take another quick look at what we’ll be finishing up today.
We’ll begin with our Twitter feed and break it down in to three parts. The first thing we’re going to need to do is retrieve our tweets and set it up so that we can easily change the account name, how many tweets we want displayed, and what element we want it to look for to display our tweets. To do this we’re going to utilize AJAX to call the Twitter API in JSON format and then process it. My code looks as follows.
JQTWEET = {
user: 'TheScottStanton',
numTweets: 1,
appendTo: '.twitter',
loadTweets: function() {
$.ajax({
url: 'http://api.twitter.com/1/statuses/user_timeline.json/',
type: 'GET',
dataType: 'jsonp',
data: {
screen_name: JQTWEET.user,
include_rts: true,
count: JQTWEET.numTweets,
include_entities: true
},
success: function(data, textStatus, xhr) {
var html = '<div class="tweet">TWEET_TEXT<div class="time">AGO</div>';
for (var i = 0; i < data.length; i++) {
$(JQTWEET.appendTo).append(
html.replace('TWEET_TEXT', JQTWEET.ify.clean(data[i].text))
.replace(/USER/g, data[i].user.screen_name)
.replace('AGO', JQTWEET.timeAgo(data[i].created_at))
.replace(/ID/g, data[i].id_str)
);
}
}
});
},Next we’re going to want to create a dynamic calculator that can tell us how long ago we posted the tweet. We’ll start by getting the time it was posted, which will require having to make an exception for IE as it can’t handle the screwy Ruby dates. After that we’ll create a series of if statements to give our time stamp a relative time like “seconds ago”, or “about 1 hour ago.”
timeAgo: function(dateString) {
var rightNow = new Date();
var then = new Date(dateString);
if ($.browser.msie) {
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 "";
}
if (diff < second * 2) {
return "that just happened";
}
if (diff < minute) {
return Math.floor(diff / second) + " seconds ago";
}
if (diff < minute * 2) {
return "about 1 minute ago";
}
if (diff < hour) {
return Math.floor(diff / minute) + " minutes ago";
}
if (diff < hour * 2) {
return "about 1 hour ago";
}
if (diff < day) {
return Math.floor(diff / hour) + " hours ago";
}
if (diff > day && diff < day * 2) {
return "yesterday";
}
if (diff < day * 365) {
return Math.floor(diff / day) + " days ago";
}
else {
return "back in the dark ages";
}
},Finally we want to convert our trendy hash tag words, other people we tag, and plain old links in to hyperlinks so anyone reading the tweet off our site will be able to click through.
ify: {
link: function(tweet) {
return tweet.replace(/\b(((https*\:\/\/)|www\.)[^\"\']+?)(([!?,.\)]+)?(\s|$))/g, function(link, m1, m2, m3, m4) {
var http = m2.match(/w/) ? 'http://' : '';
return '<a class="twtr-hyperlink" target="_blank" href="' + http + m1 + '">' + ((m1.length > 25) ? m1.substr(0, 24) + '...' : m1) + '</a>' + m4;
});
},
at: function(tweet) {
return tweet.replace(/\B[@＠]([a-zA-Z0-9_]{1,20})/g, function(m, username) {
return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/intent/user?screen_name=' + username + '">@' + username + '</a>';
});
},
list: function(tweet) {
return tweet.replace(/\B[@＠]([a-zA-Z0-9_]{1,20}\/\w+)/g, function(m, userlist) {
return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/' + userlist + '">@' + userlist + '</a>';
});
},
hash: function(tweet) {
return tweet.replace(/(^|\s+)#(\w+)/gi, function(m, before, hash) {
return before + '<a target="_blank" class="twtr-hashtag" href="http://twitter.com/search?q=%23' + hash + '">#' + hash + '</a>';
});
},
clean: function(tweet) {
return this.hash(this.at(this.list(this.link(tweet))));
}
} // ify
};
$(document).ready(function () {
JQTWEET.loadTweets();
});That’s it! Save your document inside your “js” folder, I saved mine as “twitter.js”, then go ahead and close out of it.
Now let’s open our index.php file so we can include the appropriate script source links to make our Twitter feed work. I dropped mine right after the link to my main.css style sheet.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/twitter.js"></script>That does it for our index page. Go ahead and close that and let’s finish up in our main.css file by making our footer a little more responsive.
Open up your main.css file and scroll down to our first media query for tablets in landscape mode. We’re going to switch our mini main navigation to a vertical list and give our .footerLeft class a percentage width so that it’s able to shrink fluidly. This is also where our .stackIcons class will come in to play. This is how I styled my elements to make them responsive. We’re also going to want to post this exact same bit of code under the next media query for tablets in portrait view. This is the code I plugged in to both of my landscape and portrait tablet layout media queries.
.footerLeft {
width:32.5%;
}
.footerLeft ul li{
width:65%;
text-align:right;
float:left;
}
.stackIcons {
position:relative;
top:-100px;
float:right;
width:5%;
padding:0 10%;
}Now that we’ve got our tablet layout taken care of we can finish things up under our mobile media query. Since things get even skinnier on mobile devices I set the three sections of our footer to stack on top of each other rather than sitting next to each other, which means we’ll need to make our footer a little taller. You’ll notice that I also got rid of the right border and swapped it for a bottom border to separate each section. Aside from that it’s just basic styling, centering text and our social icons.
footer {
height:70%;
}
.footerLeft {
width:100%;
border-right:none;
border-bottom:1px solid #fff;
padding-bottom:50px;
}
.footerLeft ul li {
display:block;
text-align:center;
}
.stackIcons {
width:150px;
position:relative;
margin:0 auto;
}
.twitter {
width:90%;
border-right:none;
border-bottom:1px solid #fff;
padding:0 5%;
}
.contact {
width:100%;
border-right:none;
border-bottom:1px solid #fff;
text-align:center;
}That does it for the footer. You have now developed an entirely responsive homepage! Next time we’ll focus on developing our secondary pages, so be sure to check back for that.
Download the completed source code for this tutorial here.
