jQuery JSONP

by Joshua McNeese

HTML

<div class="clear">
    <div class="clear" id="user-login">
        <div id="user-avatar"><a href="" target="_parent"><img alt="" class="avatar" src=""/></a>
        </div>
        <div id="user-overview">
            <h1><a href="" target="_parent" title=""></a></h1>
        </div>
    </div>
    <div id="user-content">
        <div id="octocat">
            
            <div id="user-info">
                <p class="languages"></p>
                <ul class="clear" id="list-user-info">
                    <li>
                        <p><strong class="repos"></strong><span> repos</span>
                        </p>
                        <p><strong class="forks"></strong><span> forks</span>
                        </p>
                    </li>
                    <li class="last">
                        <p><strong class="followers"></strong><span> followers</span>
                        </p>
                        <p><strong class="watchers"></strong><span> watchers</span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

#user-login {
    background-color: #fff;
    padding: 4px 7px 2px 7px;
}
#user-avatar {
    float: left;
}
#user-avatar .avatar {
    border: 1px solid #ddd;
    padding: 1px;
    width: 24px;
}
#user-overview {
    margin-left: 36px;
}
#user-overview h1 a {
    font-size: 13px;
    text-decoration: none;
}
#user-overview h1 a:hover {
    text-decoration: underline;
}
#user-overview p {
    color: #666;
    font: italic normal 10px arial, sans-serif;
}
#user-overview p a {
    color: #333;
    text-decoration: none;
}
#user-content {
    background: #fafafa;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fafafa', endColorstr='#efefef');
    background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#efefef));
    background: -moz-linear-gradient(top, #fafafa, #efefef);
    border-top: 1px solid #eee;
}
#octocat {
    background:...

JavaScript

$.ajax({
    url: 'http://githubbadge.appspot.com/badge/jmcneese',
    dataType: 'jsonp'
}).done(function (data) {
    $('#user-avatar img')
        .attr('alt', data.user.login)
        .attr('src', data.user.avatar_url);
    $('#user-overview h1').html(data.user.login);
    $('#user-info p.languages').html(data.languages.join(', '));
    $('#list-user-info strong.repos').html(data.own_repos);
    $('#list-user-info strong.forks').html(data.fork_repos);
    $('#list-user-info strong.watchers').html(data.project_followers);
    $('#list-user-info strong.followers').html(data.user.followers);

}).then(function () {
    $('#badge').fadeIn();
});