W3C Valid Buttons, A jQuery Approach
There are many people who consider the W3C valid buttons as good indicators of a web designers’s understanding and attention to Web Standards. Although, this may not be entirely true, it is a reasonable and understandable way of thinking. Thus, almost every site built these days will display a valid link to the W3C’s validation app somewhere in the site (more often than not in the “footer” section). However, most designer will refrain from using the W3C provided valid buttons and will instead cook a textual or visual solution of their own. But wouldn’t it be nice if you could use these somewhat-iconic buttons only when needed? Wouldn’t it be nice if they were less obtrusive and had a place in your design? If these inquiries gave you a sense of excitement, take a look at the demo and read on.
A jQuery Approach
For those of you who are long time readers, it comes with no surprise that I have chosen jQuery for this tutorial. For those of you who are new, visit the jQuery homepage and prepare yourself to be amazed by this versatile and lightweight java framework.
There are two main problems with the W3c valid buttons, which prevent most designers from using them. Firstly, the color choices … rather, the lack of color choices for the buttons makes it hard for it to blend with any design. Secondly, unless the site being built is a W3C site, chances are the design will have a more 2.0 look. In other words, unless the design of your site is outdated, these buttons will clash with your current design.
My solution to these problems is rather simple (thanks to jQuery), hide the buttons unless needed. In other words, use jQuery to append the W3C button(s) to your validation link(s), position it above the link(s), and animate them. In order to have a better sense of this technique, take a look at the demo.
Ready To Use Script
If you wish to download the script, scroll to the end of this post and click on the download button. However, before you hurry away with a big smile in your face here are a few things you should know (AKA how-to):
- jQuery is needed for the script to work.
- You will need to add one of the following classes to your validation links:
- valid_html
- valid_xhtml
- valid_css
Note: the .js file is set to work with the valid_xhtml and valid_css classes. If you wish to use the valid_html class instead of the valid_xhtml one, uncomment that line of code and viceversa. Also, if you are using this script with WordPress make sure to read my Using jQuery with Wordpress post.
Download & Copyright Things
The script is free for you to use, modify, or destroy (hopefully not the latter). But recognition or a link back is always well received. Please make sure to leave any thoughts or problems you have with the script. Enjoy!
