HanMade

When I built this version (the umpteenth) of my personal web site, I wanted to use a few more tricks I’d learned in the past few years, and thought it would be nice to make them do some of the work for me.

If you’ve seen my resume page, you might have noticed the table of contents in the upper right corner.  It’s supposed to help the intrepid wanderer jump to different spots within the page, without having to read the whole darned thing.  (ed. Yes, my resume is long, and yes, I really should do something about that).

Anyhoo…I wanted a Table of Contents, but I didn’t want to have to update it every time I changed my resume.  Ok, I don’t change my resume that often, but bear with me here.

Well, along came Prototype and Scriptaculous.  If you haven’t heard of these, they are both JavaScript “libraries”, or collections of functions and utilities, maintained by a particular community or group, which provide certain higher-level capabilities than if you just wrote JavaScript, yourself.  jQuery is another such library, and between Prototype and jQuery, I still lean toward the former.  jQuery has a more modular architecture, and a tidier core syntax.  However, I have found its extensions lacking in a lot of areas, whereas Scriptaculous, etc, seem to be more flexible.  Maybe I haven’t done enough with jQuery, who knows…

A word about using JavaScript to manipulate a page:  I tend to do this sort of thing only when the content I’m adding is not absolutely critical to the content.  The core page functions and content should always be built right into the HTML, primarily so people who don’t use JavaScript can still read your page, but also, so search engines can still find and read your content.  JavaScript is great for adding little utilities to enhance the user experience, but should rarely be the entire experience.  (I’ve violated this rule a number of times before, usually for expediency, but it ALWAYS hinders the UE, even if it’s just for Safari users =]).

As it happens, one of the neatest things about Prototype (and jQuery, for that matter), is that it’s really easy to look into a page, using JavaScript, move things around, add stuff, remove stuff, and manipulate the page, without having to constantly rewrite your HTML whenever you want to change something.

To make a long-ish post relatively short(er), let me just paste the code that builds my table of contents, and if you’d like to know more, feel free to ask…sound good to you?  Good, here ’tis:

TOC JavaScript:

  <script type="text/javascript" src="scripts/prototype.js"></script>
  <script type="text/javascript" src="scripts/scriptaculous.js?load=effects,controls"></script>
  <script type="text/javascript" src="scripts/lowpro.packed.js"></script>
  <script type="text/javascript">
    TOC = {
      show: function() {
        $("resume").select(".sect").each(function(header) {
            var totop = new Element("a", {href: "#", className: "helper"}).update("[Return to Top]");
            var url = "#"+header.id.split("_")[1];
            var title = "";
            if (header.match('h3')) {
                title = "<strong>"+header.innerHTML+"</strong>";
                header.insert(totop);
            } else {
                title = new Element("div", {className: "indent"}).update(header.innerHTML);
            }
            var entry = new Element("a", {href: url}).update(title);
            $("toc").insert(entry);
        });
      }
    };

  Event.onReady( Toc.show );
</script>

HTML:

<div id="toc"></div>
<div id="resume">
  <h3 class="sect">Summary</h3>
  <p>Twas brillig, and the slithy toves.
  <h4 class="sect">Skills</h4>
  <p>Did gyre and gimbal in the wabe.
  <h3 class="sect">Jabber</h3>
  <p>All mimsy were the borogoves.
  <h4 class="sect">Wock</h4>
  <p>And the mome wraiths outgrabe.
</div>

Walkthrough:

If you’re curious, here’s how the above works:

Event.observe(window, "load", function() {});

Hopefully, you’ll find the above useful, somewhat informative, and if not, vaguely unusual. At any rate, let me know if you like it…or not =]