When it comes to building sites or applications, it’s nice to provide some form of user experience improvement that differentiates your project. This doesn’t necessarily have to be a major feature – just a small addition to something that already exists.
Case in point: The majority of us have a Gravatar icon that helps to identify us across the web whenever we leaves our comments. Of course, they typically only show up after leaving a comment, but that’s no fun.
Here’s how you can add a fade effect to your comment form that will automatically show the user’s Gravatar icon before they publish their comment.
Getting Started
Before getting started on a coding project, I always find it useful to setup a directory in which I’ll be keeping my source code.
Although it doesn’t matter what you name the directory or where it’s kept, it’s important that all files are kept in said directory.
The Dependencies
There are two libraries that we’re going to need in order to get started:
- jQuery is a JavaScript framework that makes it easy to write cross-browser compatible code with concise syntax. Luckily, there’s no download as Google hosts the library for us. We’ll be referencing it in the project.
- MD5.js is a JavaScript implementation of the MD5 hash algorithm. We need this because Gravatar retrieves each icon by converting the user’s email address to an MD5 hash. You’ll need to download that file. Remember to keep it in your working directory.
The Markup
The first thing that we’re going to do is so setup our HTML document. Of course, HTML files are normally going to contain much more markup than this. I’m scaling it down for the purposes of this demo.
We’re going to need an image that represents the Gravatar icon and an input field for the user’s email address. The initial version of the page’s code should look like this:
Note that the ID of the image tag representing the Gravatar. Here, it’s simply gravatar and the ID of the input tag representing the user’s email address is email. This will become important once we’re begin writing our JavaScript functionality.
Ultimately, your page should look like this:
The JavaScript
Now we’re ready to begin writing JavaScript. But first, we need to include jQuery and the MD5 library in our page. Update the head section of your page to include those two files just above the title tag:
It’s a good practice to keep JavaScript out of your markup, so the following code is going to reside in its own file.
The first thing that we need to do is to tell the browser to pay attention to our code as soon as the browser has loaded the page. This is achieved using jQuery’s ready function:
$(function() {
// The rest of our code with go here.
});
For this particular demo, we’re going to update the Gravatar icon whenever the user moves the cursor from the email field to another area of the page.
To do this, we need to tell the browser to fire a function whenever the focus moves away from the email text box. Here’s, we’ll use jQuery’s blur() function.
$('#email').blur(function() {
// only fire if there's input in the text field
if($(this).val().length !== 0 && $(this).val() !== '') {
// ...more to come...
}
});
We need to grab the user’s email address, convert to to an MD5 hash, and then retrieve that image from Gravatar.
To do this, we’ll combine the initial Gravatar URL with the hash that’s been retrieved from the hex_md5() function. Next, we’ll modify the image tag’s source attribute to reference this new URL. Finally, we’ll use jQuery’s fadeOut() and fadeIn() functions to provide us with the fading effect:
// Convert the email address to an MD5 hash
var sMD5 = hex_md5($(this).val());
var sUrl = 'http://gravatar.com/avatar/';
$('#gravatar').fadeOut('fast', function() {
// update the src tag of the image to refer to the URL of the gravatar icon
$(this).attr('src', sUrl + sMD5);
}).fadeIn('slow');
The final version of your code should look like this:
$(function() {
$('#email').blur(function() {
if($(this).val().length !== 0 && $(this).val() !== '') {
var sMD5 = hex_md5($(this).val());
var sUrl = 'http://gravatar.com/avatar/';
$('#gravatar').fadeOut('fast', function() {
$(this).attr('src', sUrl + sMD5);
}).fadeIn('slow');
}
});
});
Save the file in your working directory. I named mine gravatarupdater.js.
Putting It All Together
Finally, we need to tie it all together. Update the head section of your page one more time to reference the JavaScript file you just saved:
That’s it! Enjoy.
Note that as we begin to experiment with different types of content here on Co.de, we’re curious to know what you think of stuff like this. Like it? Hate it? Want more? Talk back.
Speak your mind...