Create a course “path” like codeschool — css or js/jquery

[jhnboyko]

I started learning to build websites this year – however I’ve been modifying html and css for years (finally decided to learn how to do it from scratch) — so learning how to write basic html and css was really pretty easy to pick up.

However, learning how to make certain assets for web pages – I’m not sure what would be the best route.

I started making an information website for marketing purposes for our sales staff – and I would like to create a “Progress Path” of different programs we offer as a company. — We have two programs that “cross” areas in which they act the same – and I would like to make something similar to : http://www.codeschool.com/courses : the paths inside of code school’s course section.

I would like our customers to hover over each point to see where the programs differ – and also display features/benefits as they click these points. I know I can do this with individual graphics and jquery – but how would I make something similar to this path that is displayed on the left of each course? use css to align images (like circles and lines – or some other way?)

This is my first post, and I’m looking for a place to visit to get help as I get stuck.

Thanks in advance!

[nickawalsh]

Ahoy –

For the paths on Code School, we’re using a library called [Two.js](http://jonobr1.github.io/two.js). Two allows us to create an SVG object behind the items we’re looking to connect, then draw (and animate) the appropriate paths.

While Two makes it easy to actually draw things like paths, circles, rectangles, etc. in SVG, there’s still some calculation to be done. jQuery is used to figure out the coordinates of the center points of objects to be connected, which are passed into makeLine().

Also important is handling what happens when the browser is resized, since the SVG objects require you to give pixel coordinates. We watch for browser resize events (throttled with Underscore) and redraw the connections when needed.

Let me know if you have any questions!

[jhnboyko]

Thank you so much for the explanation – I’m going to practice a bit and see if I can figure it out for my purposes. Being able to make something similar would be extremely helpful to our clients and sales staff. I was just hoping to get a general understanding of how it was achieved…thanks for the exact explanation!

[jhnboyko]

Okay – so i was playing with it tonight a bit…Is this the general concept? or is this really really inefficient?

var points = document.getElementById(“main”),
two = new Two({
fullscreen: true
}).appendTo(points);

/* —- Render Test —-*/

/* var circle = two.makeCircle (110, 110, 100);
circle.fill= “#dddddd”;
circle.linewidth = 4;
circle.stroke = “#476847”;*/

/* —- Connecting Lines —-*/

var lines1 = two.makeLine(87.5, 50, 50, 100);
lines1.linewidth = 3;
lines1.stroke = “#dddddd”;

var lines2 = two.makeLine(87.5, 50, 125, 100);
lines2.linewidth = 3;
lines2.stroke = “#dddddd”;

var lines3 = two.makeLine(125, 100, 50, 150);
lines3.linewidth = 3;
lines3.stroke = “#dddddd”;

var lines4 = two.makeLine(50, 100, 50, 150);
lines4.linewidth = 3;
lines4.stroke = “#dddddd”;

var lines5 = two.makeLine(125, 100, 125, 150);
lines5.linewidth = 3;
lines5.stroke = “#dddddd”;

/* —- Circle Points —-*/

var circle0 = two.makeCircle (87.5, 50, 18);
circle0.fill = “#dddddd”;
circle0.linewidth = 2;
circle0.stroke = “#cccccc”;

var circle1 = two.makeCircle (50, 100, 18);
circle1.fill = “#dddddd”;
circle1.linewidth = 2;
circle1.stroke = “#cccccc”;

var circle2 = two.makeCircle (125, 100, 18);
circle2.fill = “#dddddd”;
circle2.linewidth = 2;
circle2.stroke = “#cccccc”;

var circle3 = two.makeCircle (125, 150, 18);
circle3.fill = “#dddddd”;
circle3.linewidth = 2;
circle3.stroke = “#cccccc”;

var circle4 = two.makeCircle (50, 150, 18);
circle4.fill = “#dddddd”;
circle4.linewidth = 2;
circle4.stroke = “#cccccc”;

two.update();

[nickawalsh]

Sorry for the delay, I figured I’d be emailed if any additional comments were posted!

You can probably clean it up a little bit if you’re looking for efficiency: the easiest way would probably be using two.makeGroup to group similar objects together and applying fill / linewidth / stroke on the group instead of individual objects.

[Author]

Posts