Blog

24ways is back this year with an article each day until Christmas related to web development tips and techniques. If you've not seen them they're worth a look.

http://24ways.org/

I have just updated my portfolio with my latest web development project. It is the new look Warwick Snooker website.

As well as the new look, the website enables the executive committee to update the website by signing in. They can add news, add events (with optional online signup), add results of competitions and add breaks.

Regular members enjoy a user-friendly website where they can view automatically generated graphs of their progress in the ladder competition. They can also check out the latest breaks, view upcoming events in the AJAX powered calendar and sign up for events online with the click of a button.

As the University of Warwick Snooker Club webmaster I am lucky enough to have an existing community of members with which I can test my web development skills to the limit to deliver functionality which I can see being used by many members and receive feedback throughout the year.

Take a look at the new Warwick Snooker website.

I'm a busy man at the moment but I like to be busy. I have three web development projects going on and another about to begin.

The one I'm working on right now is a new design of the Warwick Snooker Club website with re-developed functionality too. I've gone for rounded corners and simple colours which are in keeping with the theme of snooker. I will be going live with it soon so keep your eyes peeled!

After a dry patch I hope to update my blog more. I had a busy Summer working at a great Research company doing a lot of web development which was fantastic. I also managed to fit a holiday in too :). The work I did over the Summer will be on my portfolio soon.

Just a quick post about a few updates I've made to the website. I have fixed any layout issues that were evident in IE6, partly due to transparent PNGs, and partly due to the design going a bit odd with the content dropping below all the left side menu. I've resorted to conditional comments to fix the layout bugs.

Other updates are that I've now implemented a rather nice javascript syntax highlighter to highlight code I have in my blog posts. You can see it in action in the previous post. For anyone who's interested, it's prettify.

The biggest update of all, however, has to be the new Portfolio section I've added. Any work I do will be added to the current portfolio of all my work.

Since I feel the updates merit it, I've bumped up the version to 2.1 :)

Well it's about time I blogged again, so I thought I'd share a nice bit of code I wrote a while ago to get JavaScript to dynamically convert all my email addresses within a page to linked (or unlinked) proper address with the @ sign and everything.

The reason for not putting them as real email addresses in the first place is that spambots can scan through the page and retrieve emails automatically.

This is where the JavaScript comes in. Using JavaScript, we can set up an event to scan through the page once it's loaded and convert the email addresses to real, clickable email addresses. And since it's been done client-side with JavaScript, spambots won't be seeing them.

So with your emails in HTML like this:

<span class="email">mail [at] joelg [dot] co [dot] uk</span><br/>
<span class="email nolink">jgascoigne [at] hotmail [dot] com</span>

We can use this bit of JavaScript, using some MooTools features, to change them to real emails which are clickable by default and with the additional 'nolink' class become plain emails with no link.

The JavaScript looks like this:

/* convert all elements with class name 'email' to valid 
clickable email links, protected from email harvesters */

window.addEvent('domready', function() { // run the script once the page has loaded

	emailProtect();

});

function emailProtect() {
	var emailElements = $('content').getElements('.email'); // get all elements with class name 'email'
	for(i = 0; i < emailElements.length; i++) { // for each email element
		if(emailElements[i].hasClass('nolink')) {
			link=false;
		}
		else link=true;
		current = emailElements[i].innerHTML; // retrieve the innerHTML
		current = current.replace(/\[at\]/g, "@"); // convert occurences of [at] to the HTML entity for @
		current = current.replace(/\[dot\]/g, "."); // convert occurences of [dot] to the HTML entity for .
		current = current.replace(/ /g, ""); // remove spaces
		if(link) {
			emailElements[i].innerHTML = "<a href=\"mailto:" + current + "\">" + current + "</a>"; // set the innerHTML to a clickable email link
		}
		else {
			emailElements[i].innerHTML = current; // set the innerHTML to email
		}
	}
}

The end result:

mail [at] joelg [dot] co [dot] uk
jgascoigne [at] hotmail [dot] com

To use this code, simply include the above JavaScript, saved as emailprotect.js, and MooTools in the head of your page:

<script src="/js/mootools.v1.11.js" type="text/javascript"></script>
<script src="/js/emailprotect.js" type="text/javascript"></script>

If someone doesn't have JavaScript, they'll see the email in the long form. So it's completely unobtrusive, and it works well for me.

Feel free to use the code, alter it, do whatever you want. Grab the JavaScript here. Let me know if it's been useful, I'd love to hear from people.