JavaScript Code

Through the course of my job and free time I'll have random ideas for things that need to be implemented but really aren't worth selling or even open-sourcing.

I am donating everything here to the public domain and hence, it is all absolutely, 100%, free to use/distribute/modify/remix/love/hate/etc. I don't even ask that you cite me as the author. If you do happen to improve on any of this code, I'd love to see what you've done and if you are feeling generous - please let me incorporate your modifications into the existing source and pay it forward as more public domain.

footnotes.js

It's kind of interesting how and why I decided to write this script. I wanted to make csmajor.com into a public domain code repository and I wanted to display the Creative Commons' Public Domain information on the site without it being all "in your face". One thing led to another and here we are, a short & sweet script for footnote referencing.

Download It

You can download the footnotes.js zip here. (contains footnotes.css and a readme in addition to the JavaScript)

footnotes.js Tutorial

Download the zip and extract it into a folder within your site somewhere. For the sake of this tutorial we'll say you unzipped it into the directory /httpdocs/footnotes, where /httpdocs is the root of your web site and is where the HTML file we're going to use footnotes with resides.

In your HTML document's <head> section add the following lines:

<link ref="stylesheet" href="./footnotes/footnotes.css" type="text/css" charset="UTF-8" />
<script type="text/javascript" src="./footnotes/footnotes.js" charset="UTF-8"></script>

There are two main areas to think about when you want to reference a footnote:

the text that is referring to the footnote,
and the footnote itself.

With footnotes.js, you refer to a footnote by using an anchor tag and you store your footnotes in a list.

Depending on the settings you specify within footnotes.js, what you need to do can vary, but we'll assume you stuck with the default values.

Assume you have the following paragraph in your HTML (from Jules Verne's Around the World in Eighty Days):

<p>
  Mr. Phileas Fogg lived, in 1872, at No.7, Saville Row, Burlington Gardens, the 
  house in which Sheridan died in 1814. He was one of the most noticeable members 
  of the Reform Club, though he seemed always to avoid attracting attention; an 
  enigmatical personage, about whom little was known, except that he was a 
  polished man of the world.  People said that he resembled Byron - at least that 
  his head was Byronic; but he was a bearded, tranquil Byron, who might live on a 
  thousand years without growing old.
</p>

And assume we want to add a link to a footnote after the first sentence that says this:

At least we think it was the house where Sheridan died, but we're not 100% sure.

As well as another footnote referenced after each mention of Byron that has a link to the Wikipedia article about Byron:

See the article at 
<a href="http://en.wikipedia.org/wiki/George_Gordon_Byron,_6th_Baron_Byron">Wikipedia</a> 
to learn who George Gordon Byron was.

We would introduce three anchor tags into the paragraph which would look like so:

<p>
  Mr. Phileas Fogg lived, in 1872, at No.7, Saville Row, Burlington Gardens, the 
  house in which Sheridan died in 1814.<a class="footnote"></a> He was one of the 
  most noticeable members of the Reform Club, though he seemed always to avoid 
  attracting attention; an enigmatical personage, about whom little was known, 
  except that he was a polished man of the world.  People said that he resembled 
  Byron<a class="footnote"></a> - at least that his head was Byronic; but he was a 
  bearded, tranquil Byron<a class="footnote" name="2"></a>, who might live on a 
  thousand years without growing old.
</p>

If you notice, you'll see two different kinds of anchor tags we added there:

One with only a class attribute "footnote" - These will get auto-numbered by the script in the order in which they appear. This is useful if you know your references will be in the same order as the footnote list you're using.
One with two attributes: class and name - The class attribute is still set to "footnote", but the name attribute is identifying the "target" footnote to reference (I would've loved to make the attribute be the "target" HTML attribute, but in XHTML Strict there is no such thing).

Of course we also need to add a list containing the content of our actual footnotes (you can put it anywhere):

<ol id="footnotes">
  <li class="footnote">
    At least we think it was the house where Sheridan died, but we're not 100% 
    sure.
  </li>
  <li class="footnote">
    See the article at 
    <a href="http://en.wikipedia.org/wiki/George_Gordon_Byron,_6th_Baron_Byron">Wikipedia</a>
    to learn who George Gordon Byron was.
  </li>
<ol>

There we go, you're done!

toc.js

Just like footnotes.js, I coded toc.js out of necessity for this very site. I decided that I should have a table of contents for certain pages and being the lazy person that I am: I don't like the idea of manually building a table of contents for a page.

toc.js will scour your page for heading tags and build a table of contents for you. All you have to do is create an empty ordered list and give it a specific ID that the script will look for. toc.js will then automatically construct the table of contents and set up anchor-links for your users to use to quickly navigate to specific sections of your page.

Download it!

You can download toc.js from here. (Contains toc.css and a readme file in addition to the JavaScript)

toc.js Tutorial

[placeholder]

Advanced Options