“JavaScript Endnotes” Instructions

What they are

“JavaScript Endnotes” allow a web author to create an HTML document containing endnotes which are dynamically renumbered as new notes are added, in a similar manner to the <NOTE> tag supported in many WIKI applications. The document may be divided into as many sections as desired, each with its own independently-numbered set of notes. Notice that the accompanying demo contains two such sections.

The two required files are the JavaScript file and the CSS file, downloadable from the main page. Details of the display can be easily altered by anyone with a little knowledge of HTML. No knowledge of JavaScript is required.

For anyone with a little experience of hand-coding HTML, “JavaScript Endnotes” are relatively easy to use and customize. For HTML documents which require frequent revision, they make the handling of endnotes almost as easy as in a desktop Word-processing application, and avoid the need for moving back-and-forth between a word-processed version of a document and an HTML version, which can cause character-conversions and other problems. If you like what you see in the demo, I recommend creating a small trial project using “JavaScript Endnotes” to see if they are right for you.

Around 2002 I developed a script similar to this, except that it is processed server-side (using ColdFusion Markup Language or CFML). I still use it regularly and have found it valuable for many projects, some of them coded from scratch and others converted from older word-processed documents. For example, my very long page on The Harris family of Sandy Cove, which contains over 300 endnotes, was originally a WordPerfect file and has been drastically reformatted on several occasions without any manual renumbering of notes, or having to be revised in anything other than a text editor.

For some time, I have hoped to develop a version of the endnote script which posed no server requirements and would be platform-independent. The present implementation is a first attempt at that goal. Strictly speaking, it does not even require access to a web server, because if the files are required only for personal use, they can be accessed from a local drive. I therefore hope it will be useful to those with access only to an HTML server, but also to group projects where there is shared creation of files and not everyone on the team is able to upload files to a web server.

How they work

In what follows, it is assumed that the required JavaScript file and CSS file just mentioned are residing in the same directory as the file in which the “JavaScript Endnotes” are to be used. Experienced web-developers can easily rewrite the references in the files to point at some other directory if desired.

The document should have a structure something like the following excerpt from the source-code for the demo file (with all code pertaining to the endnotes highlighted):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<title>Javascript Endnotes demonstration</title>
<!-- links to other style sheets may be placed here if desired -->
<link rel=stylesheet href="endnoteStyle.css" TYPE="text/css">

<h1>Javascript Endnotes demonstration</h1>

JavaScript must be enabled for this page to display correctly.

<div class="endnoteBlock">

<b>Thomas Baxter</b>, of Mansfield, Nottinghamshire, was b. 1784-85 in
Nottinghamshire, and was still alive in 1851. He m. by 1807, <b>Anne ____</b>,
b. 1790-91 (aged 50 in 1841, 60 in 1851) in Nottinghamshire, still alive in 1851.
They are enumerated in the 1841 census of Mansfield, in which Thomas is called a
wood sawyer.<span class="endnote">1841 Census of England, Nottinghamshire,
registration district: Mansfield, subdistrict: Mansfield, enumeration district 3,
pp. 21-22; PRO HO107/859/2, folios 14v, 15r.</span> They are enumerated in the
1851 census, in which he is called a labourer, and it is mentioned that he was
deaf, and blind in one eye.<span class="endnote">1851 Census of England,
Nottingamshire, registration district: Mansfield, subdistrict: Mansfield,
enumeration district 1j, p. 27; PRO HO107, piece 2124, folio

<script type="text/javascript" src="endnotePlacement.js"></script>


<div class="endnoteBlock">

<b>John Jarratt</b>, of Brightside, Ecclesall Bierlow, b. probably in 1813,
between April and November,<span class="endnote">The various reports of
John Jaratt&rsquo;s age we have found are consistent with one another, and taken
together, imply a date of birth between April 1813 and Nov. 1813.</span>

<script type="text/javascript" src="endnotePlacement.js"></script>



The rules of construction are simple:

  1. The CSS file (endnoteStyle.css) must be linked to somewhere in the file (customarily in the HEAD).
  2. The <noscript>…</noscript> tagset is there as a courtesy to those using JavaScript-disabled browsers, but it isn’t really required.
  3. a <div class="endnoteBlock">…</div> tagset is optionally used to mark each section of the document which is to have an independently-numbered block of endnotes.
  4. if no <div class="endnoteBlock">…</div> tagset is present, all notes are treated as belonging to a single group.
  5. a <script type="text/javascript" src="endnotePlacement.js"></script> tagset is placed at the end (but inside of) each block, or at the end of the document (but inside the BODY tag), at the point where the endnotes are to be generated.
  6. a <span class="endnote">…</span> tagset is placed in the text at each point where a number pointing at an endnote is to appear.
  7. Any additional CSS, SCRIPT or span tagsets, or other HTML, may be used wherever desired, providing it does not cause naming conflicts with the above.

Pros and cons

“JavaScript Endnotes” have some features which I hope will make them appealing to a wide variety of users:

However, no warantee whatsoever is made or implied for this script, and there are a few specific caviats which must be acknowledged in order to avoid possible disappointment:

Note to users of version 1

Version 1 of this script used <div class="endnote">…</div> where this version uses <span class="endnote">…</span>. HTML files written using version 1 need only this one change to be made, and they will work with the new endnotePlacement.js and endnoteStyle.css files.

John Blythe Dobson
University of Winnipeg Library
Released 25 May 2007
Suggestions welcome

Creative Commons License This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.