Create a vertical skills graph with simple CSS and jQuery

Show off your skills (like, in a couple ways)

Chances are, if you’re a designer or developer, you run across design sites where people tout their skills using a fun graph.  Sometimes they’re simply rendered in static HTML, but the cool ones are animated using Javascript. (Yes, the animated ones are the ‘cool’ ones.)  Even then, you’ve likely only seen them in a horizontal format.

Enough with that!

It’s time to free the world from the sideways animations! (Said as though I’m saving the world or something…)  This article will show how to create a CSS/jQuery driven chart, and we’ll be doing it vertically with very little markup.

How will we do that?

Um, that’s what I’ll show you…

Let’s examine the simplest markup that’ll get it accomplished.

  • We need a container to hold our graph, so we’ll use a <div>.
  • We’ll hold all the bars in a <ul>.
  • Each bar itself will be a <li>,
  • and the bar that slides up the <li> will be a simple <a> tag.

Like so!

<div class="the-container">
<ul>
<li><a id="super-skill" href="#" class="tooltip" title="coding!"></a></li>
<li><a id="super-other-skill" href="#" class="tooltip" title="stuff!"></a></li>
</ul>
</div>

Sweet!  We’re done!

Yeah, just kidding.  We have more work to do.

We need to animate it.  And we also need to style it.  The simplest we could do is animate it when the document is ready (when the page is fully loaded in the browser, that is.)

Something like this:

<script>
 $(document).ready(function() {
 $('#super-skill').animate( { height: '183px' }, 2500);
 $('#super-other-skill').animate( { height: '203px' }, 2500);
 });
 </script>

When the page is loaded (yep, when the “document is ready”), the selector with the id of super-skill animates to a height of 183px, and super-other-skill animates for the same 2.5 seconds to 203px tall.  But…we need an original height (I mean, what is it animating from for Pete’s sake?), so let’s get to the CSS…

<style>
 .the-container { width:400px; height:250px; background-color:#aaa; }
 .the-container ul { margin:0; padding:0; list-style:none; }
 .the-container li { width:30px; height:250px; margin:0 5px; position:relative; float:left; }
 .the-container li a { position:absolute; bottom:0; width:100%; height:0; background-color:#ccc; }
 .the-container li a:hover { background-color:#eee; }
 </style>

Just those few rules…

So “the-container” is the div that holds our list-items.  It has a fixed width/height, and a background color.  The background color is just for aesthetics, to set it apart from the bars that animate up.

The <ul> gets margin/padding of 0 for the demo.  It dumps the browser’s default margin/padding so that we get things lining up flush.  And we say “list-style: none” so that we don’t have a silly bullet point appearing next to each vertical bar.

The <li> tags get fixed widths and the same height as the containing div.

  • The margin just gives breathing room on the sides, between the <li>’s.
  • We float them left so that they don’t stack (since list-items are block-level) and we give them a CSS position rule.

The <a> tags get absolute positioning.  This is crucial (and it’s why we set “relative” on the containing <li> tags).  Absolute position means little unless there is a parent container that has position set as well.  In our case, the list-items are set to relative, so we’re good.  By setting the <a> tags to absolute, we can use the left and bottom CSS properties.

  • We set bottom: 0, and height: 0.  Doing so, when the height animates it’ll animate from the bottom and rise up.  Easy, huh?
  • We give it a width of 100% (“display: block” is fine too) – we just want the <a> tag to fill the <li>.
  • And we give it a background color that is different from the containing div.  So we can watch it rise.

The :hover pseudo class is just for effect to invoke the tooltip when mousing over the bars.

Don’t believe it’s that simple?  Test it!

Just copy this and paste it into a blank html document, then preview it in a browser.  Super sweet, no?!

<!DOCTYPE html>
<html>
<head>
<title>The coolest vertical graph the world has even seen, by www.focus97.com </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#super-skill').animate( { height: '183px' }, 2500);
$('#super-other-skill').animate( { height: '203px' }, 2500);
});
</script>
<style>
.the-container { width:400px; height:250px; background-color:#aaa; }
.the-container ul { margin:0; padding:0; list-style:none; }
.the-container li { width:30px; height:250px; margin:0 5px; position:relative; float:left; }
.the-container li a { position:absolute; bottom:0; width:100%; height:0; background-color:#ccc; }
.the-container li a:hover { background-color:#eee; }
</style>
</head>
<body>
<div class="the-container">
<ul>
<li><a id="super-skill" href="#" class="tooltip" title="coding!"></a></li>
<li><a id="super-other-skill" href="#" class="tooltip" title="stuff!"></a></li>
</ul>
</div>
</body>
</html>

Have fun and markup away!

To add more list-items, just add more html.  Give them a unique id, and then copy/paste the line of jQuery that animates it. Just be sure to declare your new list-item’s id in the jQuery instantiation.

It’s super slim and simple coding, but it’s a fun effect and works on iOS devices as well (as all markup should!)

3 Comments

  1. Comment by Applaud Media
    on January 21, 2013

    Very nice, slim and simple — thanks!

  2. Comment by Allegra
    on January 21, 2013

    Exactly what I’ve been looking for :) SUPER simply and awesome.
    Thanks :)

  3. Comment by Daniel
    on August 13, 2013

    Excellent, Just what I needed. Thanks for a great tutorial

  4. Leave a Reply

    To include code, just include it in [code] [/code] square brackets. Sweet.