Badges widget for badges earned on http://teamtreehouse.com
Inspired by http://cdpn.io/BovGu
A Pen by James Barnett on CodePen.
<div class = "container"> | |
<h2>Recently Learned at Treehouse</h2> | |
<div id = "badges"></div> | |
</div> |
$(document).ready(function() { | |
var user = "jamesbarnett"; /* treehouse username*/ | |
var num = 12; /* number of badges to display, starting w/ most recent */ | |
$.getJSON("http://teamtreehouse.com/" + user + ".json", function(data) { | |
var output = "<ul>"; | |
/* array starts from 0, so you access the 10th element at position 9, add 1 to stop to account for the array starting from 0 */ | |
var i = data.badges.length - 1; | |
var stop = data.badges.length - (num + 1); | |
for(i; i > stop; i--){ | |
output += '<li>'; | |
output += '<img src ="' + data.badges[i].icon_url + '" />'; | |
output += '<span class = "tooltip">' + data.badges[i].name + '</span>'; | |
output += "</li>"; | |
} | |
output += "</ul>"; | |
document.getElementById("badges").innerHTML = output; | |
}); | |
}); |
li,ul,img { | |
margin: 0; | |
padding: 0; | |
} | |
.container { | |
width: 600px; | |
margin: 20px auto; | |
} | |
h2 { width: 500px; margin: 50px auto; } | |
#badges { width: 400px; margin: auto;} | |
/* number of badges per line, the formula is ((2x)n + (x + 1)) where x is badges per line, 3 per line that's 6n+4, math magic from http://cdpn.io/BovGu */ | |
.container li:nth-child(6n + 4) { | |
margin-left: 55px; | |
} | |
li { | |
position: relative; | |
list-style-type: none; | |
display: inline-block; | |
width: 100px; | |
margin-right: 5px; | |
margin-top: -25px; | |
} | |
img { width: 100px; } | |
img:hover { | |
position: relative; | |
z-index: 2; | |
transform: scale(1.5); | |
} | |
/********** tooltips **********/ | |
/* CSS tooltips based on: http://www.red-team-design.com/css3-tooltips*/ | |
li .tooltip { display: none; } | |
img:hover + .tooltip { | |
display: inline-block; | |
z-index: 3; | |
position: absolute; | |
top: 15px; | |
left: -190px; | |
width: 150px; | |
min-height: 40px; | |
padding: 3px; | |
text-align: center; | |
background-color: #ddd; | |
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; | |
border-radius: 4px; | |
} | |
/****** little triangle on the tooltip *****/ | |
.tooltip:before { | |
content: ""; | |
z-index: 4; | |
position: absolute; | |
width: 0; | |
height: 0; | |
top: 11px; | |
right: -10px; | |
border-top: 11px solid transparent; | |
border-bottom: 11px solid transparent; | |
border-left: 11px solid #ddd; | |
} |
Badges widget for badges earned on http://teamtreehouse.com
Inspired by http://cdpn.io/BovGu
A Pen by James Barnett on CodePen.