show gravatar in div after email input [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 9 years ago.

What I want to do is "ones a user is finished typing his/her e-mail and has moved to password field or just finished typing e-mail, to have jquery load the users gravatar based on the e-mail that was inserted on the login page and load this image into the div that contains temporary no-image image."

How can I do this with jQuery

Answer 1

No HTML given

<input id="email" ... /><img id="gravatar" style="display:none;"/>

It doesn't need ajax as someone suggested because the gravatar call is very simple.

jQuery

$('#email').on('change', function(){
    var hash=md5($('#email').val()); // you will need to find a javascript md5 function
    $('#gravatar').attr('src', 'http://www.gravatar.com/avatar/' + hash).show();
});

I haven't bothered to preload the image.

"or just finished typing e-mail" - if you want to do this you would throw in an email address validation function and check on keyup too.

$('#email').on('keyup change', function(){
    if (is_email_address($(this).val()){
        var hash=md5($('#email').val()); // you will need to find a javascript md5 function
        $('#gravatar').attr('src', 'http://www.gravatar.com/avatar/' + hash).show();
    }
});