Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 3 days ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 1 week ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Automatically pull in user Gravatar images

AshleyAshley

I was browsing forrst.com and saw a pretty interesting code snippet from Chris Coyier from CSS-Tricks which is pretty useful for WordPress users and allows the gravatar of a commenter to be dynamically pulled into the comment box as soon as the user has clicked out of the email input field.

The Code

This code snippet is pretty easy to grasp. We’re simple replacing the background image of the div #avatar each time the user clicks out of the email input field. you’ll notice that we’re also calling the function MD5(). This is because Gravatar uses your email address encoded into an MD5 hash as an id to pull your avatar. You also need to include the function MD5() which is available in the Download.



$(document).ready(function(){

var email = $("#email"),
avatar = $("#avatar");

email.blur(function() {
avatar.css("background-image","url(http://www.gravatar.com/avatar/" + MD5(email.val()) + ")");

});

});

The HTML


<div id="avatar"><img src="thumb.png" width="80" height="80"/></div>

<form class="gravatar">
<input type="text" onFocus="if(this.value=='Email Address') this.value='';" onBlur="if(this.value=='') this.value='Email Address';" value="Email Address" name="s" id="email" /> 
</form>

download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 3
  • Enamul Hoq
    Posted on

    Enamul Hoq Enamul Hoq

    Reply Author

    Very nice and great article it’s also informative thanks a lot for sharing


  • mayweather vs cotto
    Posted on

    mayweather vs cotto mayweather vs cotto

    Reply Author

    thanks a lot for the post, I will be adding it also in my blog


  • Beben Koben
    Posted on

    Beben Koben Beben Koben

    Reply Author

    hihihihi so cool…ty^^