Permalink
Browse files

Format/display footnotes for web version.

Previously, footnotes weren't shown on the web version; now they are.
  • Loading branch information...
1 parent 231bd2b commit bb70c24c4a33a2b06088c19da5ae8dbe253fecec @runpaint runpaint committed May 12, 2009
Showing with 40 additions and 12 deletions.
  1. +1 −1 TODO
  2. +20 −0 js/footnotes.js
  3. +1 −3 templates/recipe.html
  4. +16 −5 templates/web.css
  5. +2 −3 text/01_pre/00-head.html
View
2 TODO
@@ -53,5 +53,5 @@ Web Version
* Add CC license fragment to recipe template.
* Link PDF from recipes?
* Gzip HTML.
-* Format footnotes.
* Add Atom feed of recipes sorted by ctime.
+* Add Analytics to all templates.
View
@@ -0,0 +1,20 @@
+/* Derived from http://www.brandspankingnew.net/specials/footnote.html */
+window.onload=function()
+{
+ var noteholder = document.getElementById('footnotes');
+ var spans = document.getElementsByTagName("span");
+ var notes = 0;
+
+ for (i=0;i<spans.length;i++)
+ {
+ if (spans[i].className == "fn")
+ {
+ notes++;
+ noteholder.innerHTML += "<div class='footnote'><a name='note"+notes+"'></a>" + notes + ". " + spans[i].innerHTML + " <a href='#nlink"+notes+"' title='return to text'>&#8617;</a></div>";
+ spans[i].innerHTML = "<sup><a name='nlink"+notes+"' href='#note" + notes + "' title='view footnote' class='fn'>" + notes + "</a></sup>";
+ spans[i].style.display = 'inline';
+ }
+ }
+
+}
+
View
@@ -2,9 +2,6 @@
<head>
<title>Vim Recipes: <%= title %></title>
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
- <!--<link rel="stylesheet" type="text/css" href="/css/layout.css"/>
- <link rel="stylesheet" type="text/css" href="/css/user.css"/>
- <link rel="stylesheet" type="text/css" href="/css/web.css"/> -->
</head>
<body>
<form action="http://www.google.com/cse">
@@ -18,6 +15,7 @@
<p><a href="/toc/">Vim Recipes</a> <span>&#8227;</span> <a href="/<%= section_id %>/"><%= section %></a> <span>&#8227;</span>
<i><%= title %></i></p>
<%= body %>
+ <div id="footnotes"></div>
<div class="nav"><a
rel="prev" href="/<%= prev_e[:section_id] %>/<%= prev_e[:id]
%>/">&#x21A9; &nbsp; <%=
View
@@ -18,15 +18,26 @@ table {
margin-right: auto;
}
+/* Initially we hide footnotes. A JavaScript function is then run to render
+ * them at the bottom of the page, replacing their previous location with a
+ * link to their new location. Having done this, the JavaScript sets span.fn
+ * _display_ to 'inline', thus avoiding the footnotes initially appearing in
+ * their original position prior to being moved.
+ *
+ * This is imperfect because it hides footnotes from users with CSS enabled
+ * and JS disabled, but it will do for now.
+ */
span.fn {
- display: always;
- position: static;
- color: #f30;
+ display: none;
}
-a.footnote {
+span.fn a:link {
vertical-align: super;
- font-size: 0.7em;
+ color: black;
+ font-weight: bold;
+ font-size: 100%;
+ padding-left: 1px;
+ border: none;
}
#footnotes {
View
@@ -4,9 +4,8 @@
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Vim Recipes - A cookbook for the Vim text editor</title>
- <link rel="stylesheet" type="text/css" href="../templates/layout.css"/>
- <link rel="stylesheet" type="text/css" href="../templates/syntax.css"/>
- <link rel="stylesheet" type="text/css" href="../templates/user.css"/>
+ <link rel="stylesheet" type="text/css" href="../templates/main.css"/>
+ <link rel="stylesheet" type="text/css" href="../templates/pdf.css"/>
<meta name="author" content="Run Paint Run Run" />
<meta name="subject" content="Vim text editor" />
<meta name="keywords" content="vim cookbook recipes technical software

0 comments on commit bb70c24

Please sign in to comment.