Skip to content

Instantly share code, notes, and snippets.

@kazuhirosaji

kazuhirosaji/coderwall_badge_markup.html

Forked from bguthrie/coderwall_badge_markup.html
Last active November 23, 2019 14:50
Show Gist options
  • Save kazuhirosaji/9572251 to your computer and use it in GitHub Desktop.
Save kazuhirosaji/9572251 to your computer and use it in GitHub Desktop.
Download ZIP
Display badge's description when you hover badge image.
Raw
coderwall_badge_markup.html
<html>
<!-- Add these tags to the HEAD section of your page. -->
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'> </script>
<link href="http://coderwall.com/stylesheets/jquery.coderwall.css" media="all" rel="stylesheet" type="text/css">
<script src="http://coderwall.com/javascripts/jquery.coderwall.js"></script>
<style type="text/css">
/* Add style about badge's badge_description */
#badge_description {
display:none;
position:absolute;
padding:5px; margin-left:10px;
color:white;background-color:#505050;
}
</style>
<script type="text/javascript">
/* Display descripton when you hover badge */
function set_description() {
var msg_box;
$("img").hover(function(){
if ( $(this).hasClass("coderwall-badge")) {
var text = $(this).attr("alt");
var offset = $(this).offset();
msg_box = $("#badge_description").get(0);
msg_box.style.display = "inline";
msg_box.innerText = text;
msg_box.textContent = text;
msg_box.style.left = offset.left;
msg_box.style.top = offset.top + 60;
}
}, function() {
msg_box = $("#badge_description").get(0);
msg_box.style.display = "none";
});
};
</script>
</head>
<body onload="set_description()">
<!-- You also need to place a container where you'd like the Coderwall badges to render. -->
<section class="coderwall" data-coderwall-username="kazuhirosaji" data-coderwall-orientation="vertical"></section>
<span id="badge_description">badge_description about badge's</span>
</body>
</html>
Raw
coderwall_badge_style.css
section.main {
position: relative;
}
section.coderwall {
position: absolute;
top: 0px;
left: 800px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment