About 6 months ago i reorganized my website, this included a new homepage ( here ). A lot of the code was borrowed from a friends web page ( here ), recently a friend who likes it asked me how the code worked, and to go through it, so i thought it might be worth making a blog post on it.
All the code is under the license “Creative Commons Attribution-Noncommercial 2.0 UK: England & Wales License” and is copyright to Tom Brearley.
I assume a basic knowledge of HTML / JavaScript.
There are 4 parts to the web page in question, the tag line, recent blog posts (items from an RSS feed), recent tweets(items from twitter), recent music (from last.fm).
All of the code requires jQuery, i used it from the Google CDN but you can use it locally. The code to use it from the Google CDN is:
[javascript][/javascript]
Simply place this in the header of your HTML.
The Tag Line
This is rather simple. We have an array of tag lines, and we pick on random when the page loads.
The first this we need is a placeholder for the final message. Insert it in to the body of the page. Also include a fall-back message, which will be displayed if for some reason the JavaScript fails.
[javascript]is awesome[/javascript]
Then the code which will actually pick a tag line and insert it correctly into the document. In the head of the document, create a script tag, and insert the following function (modifying the tags to your taste). This simple function just creates an array called “phrases”. Then using the jQuery notation, sets the HTML property of the tag with the name “tagline” with a random phrase.
[javascript]
function go(){
var phrases = Array(
“uses <a href=”http://www.bing.com”>Bing!</a>”,
“loves <a href=”http://www.microsoft.com/windows”>Windows</a>”,
“uses <a href=”http://www.microsoft.com/ie”>Internet Explorer 9</a>”,
“loves <a href=”http://www.microsoft.com/windowsphone”>Windows Phone 7</a>”,
“uses <a href=”http://www.microsoft.com/windows”>Visual Studio 2010</a>”,
“is a <a href=”http://www.conservatives.com/default.aspx”>Conservative</a>”,
“reads <a href=”http://conservativehome.blogs.com/”>Conservative Home</a>”,
“dislikes <a href=”http://www.apple.com/macosx/”>OS X</a>”,
“loves his <a href=”http://www.apple.com/macbookpro/”>MacBook Pro</a>”,
“used to be a <a href=”http://en.wikipedia.org/wiki/Scouting”>Scout</a>”,
“programs in <a href=”http://en.wikipedia.org/wiki/C_Sharp_(programming_language)”>C#</a>”,
“prefers <a href=”http://en.wikipedia.org/wiki/Dogs”>dogs</a> over <a href=”http://en.wikipedia.org/wiki/Cat”>cats</a>”
)
$(“#tagline”).html( phrases[ Math.floor(Math.random() * phrases.length) ] )
}[/javascript]
Finally we need to call this function once the page is loaded. To do this insert the following code just before the “go()” function.
[javascript]
$(document).ready(function(){
go()
})
[/javascript]
And that is Part 1, watch out soon for the final 3 parts.