Note: This post serves to address the creation of my piece in the 2009 UTC Senior Show, previously covered in this article.
The HTML
The markup for this document is relatively short and simple. It serves to create a template into which the Javascript can inject content. Both tweets and images are later inserted into #tweets via javascript, using jQuery’s DOM manipulation to create <p> and <img> tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Stephen Bush Thesis</title>
<link type = "text/css" rel = "stylesheet" href = "style.css" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="tweets"> </div>
</body>
</html>
The Javascript
The javascript uses the jQuery library, a solid foundation upon which to build the AJAX functionality of this site. The script first creates arrays for both photos and tweets, then establishes the functions which will retrieve and parse data from Flickr and Twitter, and then injects the results in the HTML.
// Create arrays var tweets = new Array(); var photos = new Array(); // Create <p> and <img> tags in #tweets. If each photo in the array has been used, reuse the first. function processData(){ $("#tweets").html("<p>" + tweets.shift() + "</p><img src='" + photos.shift() + "' />") if (photos.length){ var preload = new Image(); preload.src = photos[0]; } } // Call Flickr's API and return the most recent x photos from the public timeline in JSON format. // Loop through the results in array, selecting nodes from the JSON to construct the URL of respective Flickr image. function getRecentPhotos(){ $.getJSON("http://www.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key={apikey}&format=json&per_page=14&jsoncallback=?", function(data){ $.each(data.photos.photo, function(i, item){ photos[i] = "http://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + ".jpg"; }); }); } // Call Twitter's API and return the public timeline in JSON format // Loop through each tweet in the array, extracting the text node from each. function getRecentTweets(){ $.getJSON("http://search.twitter.com/search.json?q=the&callback=?", function(data){ $.each(data, function(i, results) { tweets[i] = "" + results.text + ""; }); }); } // Once the window has loaded, execute processData() each 7 seconds, injecting new content into the template. $(window).load( function() { processData(); setInterval(processData, 7000); }); // When the document is ready, initialize AJAX Setup, do not cache. // Return a new set of photos every 50 seconds // Return a new set of tweets every 61 seconds $(document).ready( function() { $.ajaxSetup({cache: 0 }); setInterval(getRecentPhotos, 50000); getRecentPhotos(); setInterval(getRecentTweets, 61000); getRecentTweets(); });
The CSS
Cascading Style Sheets give style to the document, centering the tweets and images in a fixed-width frame in the center of the page. The background color becomes black and the text is set in white Lucida Grande. Also a slight gradient .png file is placed behind the content inside the frame. The html bottom-margin 1px hack ensures that the scroll bar is always present on the right of the browser to avoid shifting the image left on longer pages.
#tweets {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
border: 1px solid gray;
width: 500px;
padding: 10px;
background-image: url(gradient.png);
}
p {
font-family: Lucida Grande, Helvetica Neue, Helvetica, Sans-Serif;
font-size: 20px;
line-height: 26px;
color: white;
float: left;
width: 500px;
height: auto;
display: block;
margin: 0 auto;
padding-bottom: 10px;
}
img {
width: 500px;
height: auto;
clear: left;
}
body {
background-color: black;
}
html {
height: 100%;
margin-bottom: 1px;
}
The Result
This piece was displayed in UTC’s Cress Fine Arts Gallery during the 2009 Senior Show, a collection of works from graduating students of painting and graphic design. It filled a small side gallery and was projected to such a size that images were 5 feet wide, not just 500 pixels.
The finished product behaves like a slideshow of image and caption, with one random tweet paired with one random image every seven seconds. The downfall of this code is that if a user has javascript disabled or javascript should be disrupted by another browser window, the application fails to function at all. To address this, I will recreate the functionality of this piece in PHP in my next post. Enjoy!
Sample
Tags: API, BFA, CSS, DOM, Flickr, Javascript, jQuery, stephen bush, Stephen Wyatt Bush, Thesis, twitter, UTC, wyattdanger, XHTML
[...] Wyatt Danger Brains « Coding Thesis Piece in Javascript [...]