I'm Simon, I like to design & build websites.

Sprucing up HTML validation links

Most websites these days have got the classic ‘Valid HTML’ and ‘Valid CSS’ links and sure, we should be expecting no less these days. But if you’re up for improving the cosmetics of the standard links then these three little lines of jQuery will be right up your street.

It’s worth noting that you can use this link - http://validator.w3.org/check?uri=referer which will automatically grab the current url once you reach the validation page but if you’re using jQuery already (like me!) then with 3 lines of code you can make the links much more attractive.

The idea of this small tutorial is to take the validation links a bit further and using a sprinkle of jQuery we can make sure the link will show the path of the current page that the user is on, rather than just the URL you chose to point it or the uri=referer link. The format we will be using looks like this:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.blink-design.net/

Obviously if you set this as a link at the bottom of your page it will always point to your home page, not so great. To create a link that will always be relative to your page we need to grab hold of the current URL and then shove on the end of the link. We can grab hold of everything after the .net, .com etc using the following code:

window.location.pathname;

For example this would return /post/sprucing-up-html-validation-links/ when used on this blog post. It’s worth noting you can grab the other parts of the URL too, as shown in this article. Let’s go ahead and chuck that into a variable to use later

var currenturl = window.location.pathname;

While we’re here, let’s throw the validation link into a variable as well.

var valid = 'http://validator.w3.org/check?uri=http%3A%2F%2Fwww.blink-design.net';

Now all we need to do is plug the two together and this is easy using one more line of jQuery.

$("#footer a[title='valid xhtml']").attr('href', valid + currenturl);

So in English the first part will grab hold of any link in the #footer that has a title attribute of ‘valid xhtml’ and then sets the href of the link to be the valid variable (http://validator.w3.org/check?uri=http://www.blink-design.net) plus the currenturl variable (/post/sprucing-up-html-validation-links/) and therefore forms the complete link. Let’s have a look at the finished product:

var currenturl = window.location.pathname;
var valid = 'http://validator.w3.org/check?uri=http%3A%2F%2Fwww.blink-design.net';
$("#footer a[title='valid xhtml']").attr('href', valid + currenturl);

Now on each page the validation link in the footer will reflect your current location in the URL, a handy little cosmetic touch

Posted on Thursday, April 16th 2009 and there are 3 comments

Categories: jQuery, Tricks n Tips

• Next: Creating your own toolbox menu with jQuery
• Previous: Me, Myself and IE