Some code snippets from my home page: Part 1

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.

4 thoughts on “Some code snippets from my home page: Part 1

  1. Greetings I stumbled on your page by mistake when i searched Msn for this subject, I must say your website is really helpful I also seriously like the layout, it is amazing!

  2. I want to express my gratitude for your generosity supporting visitors who must have help on the area of interest. Your personal dedication to passing the solution all over had been extremely interesting and has frequently helped workers like me to achieve their aims. Your informative useful information denotes a whole lot a person like me and even further to my fellow workers. Thank you; from everyone of us.

Leave a Reply