Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
John Weland
42,478 PointsBadges
Maybe I've missed it but it would be great to be able to embed or otherwise add our badges to your website in a way that categorizes them. e.g. I display my HTML badge and upon someone clicking on it it will display all the sub-category badges I have, like wise with my CSS badge. When I complete the Web Developer track as a whole It will display that badge with all of its sub badges.
Sure I could build this out myself and download all of the badges and put them on my web host. I just thought it would be cool to have right from treehouse.
10 Answers
Adam Sackfield
Courses Plus Student 19,663 PointsAlso here is a codepen of it working just enter your name in the js part here
John Weland
42,478 PointsSweet! thanks
John Weland
42,478 PointsI made some edits to fit my needs. I am building my portfolio website now and I have a "resume" page that plays out much like my paper resume but I wanted ot add some interactivity to it and then just hide the non-essentials when in print. this is pretty slick thanks again.
James Barnett
39,199 PointsThe Treehouse badges JavaScript has gotten a major upgrade http://reportcard.rileyh.com/
Adam Sackfield
Courses Plus Student 19,663 PointsI like that one less James Barnett!
James Barnett
39,199 PointsAdam Sackfield - You can also tweak limit the number of badges and have CSS tool tips.
Adam Sackfield
Courses Plus Student 19,663 PointsJames Barnett Do you know how I could pull the data from Json for the to create the home page on here on my site. So would like to recreate the circle with the points breakdown and the key to the right of it.
Thanks
John Weland
42,478 PointsWow all of these are great I was going to use Riley Hillard's most recent version as it includes CodeSchool as well which is where I started my online classes. However his requires an older version of JQuery and older Bootstrap. I am not sure I have what it takes to rip up his code to update it to Bootstrap 3 and JQuery 2+.... yet.
James Barnett
39,199 Points> However his requires an older version of JQuery and older Bootstrap.
Why bother? There's great support for both of those versions.
John Weland
42,478 PointsI love how the new bootstrap handles the grid system as well and its icons being a font versus being a spritsheet. I hate having to include both versions (if that's even possible)
James Barnett
39,199 Points> icons being a font versus being a spritsheet
Not sure why one is superior to the other. In both cases the icon is added via a class. A font file & a spritesheet image both require an HTTP request.
John Weland
42,478 PointsYeah I hadn't thought that all the way through... you're right it is a separate HTTP request.. The new Bootstrap still handle the grid system so much better IMO. I would be awesome to be able to bundle all your web-fonts into a single file and separate them after. I hate having more than 3 or 4 HTTP request. (fonts, javascript, css, other-crap).
John Weland
42,478 Pointsupdate: So I included the latest JQuery and Bootstrap JavaScript and CSS with the existing reportcard.jsand I have it working... sort of... the badges display HUGE... but they do display.
James Barnett
39,199 PointsYou got a codepen to show us?
James Barnett
39,199 PointsAdd in .badges img { width: 100%; } that should get you pointed in the right direction.
John Weland
42,478 PointsI won't be able to try this on the actual code until the admins get done doing there 'remote-whatever' on my system but it work in the PEN I didn't think it would have worked because the .js file is setting the widths and its being called at the end of my document. (I was always told call .js files just before the closing body tag to speed up load times to the user. and since the last file called was setting the widths I didn't think my CSS would override it.
Thanks
John Weland
42,478 PointsI don't yet. I 'think' the issue is it looks like the badge size is being dictated by the reportcard.js file. i'll get a pen up asap
John Weland
42,478 PointsOK so I have a codepen but nothings showing up on it (never use codepen before.)
edit:: the PEN is working now, I had to include my HTML pages script in the JS portion of the PEN. http://codepen.io/johnweland/pen/uxyCI
John Weland
42,478 PointsHmm I realized this morning that my update while working in the latest bootstrap and JQuery. and now showing badges properly still the progress bar at the bottom only shows the first section "css" and its hover-able and gives corresponding info. The second portion HTML shows a section of the progress bar with no label and is not hover-able and JavaScript the third section doesn't show at all.
Adam Sackfield
Courses Plus Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsSee this tutorial here found on this thread here on how to embed your badges.
Also a wordpress plugin here
Hope this helps!