Footnote Test | Muninn

Testing Footnote.¹

UPDATE: As some of you may have noticed, I have been playing around with something funny here on a post which appears and disappears as I play with it. Here is the thing: I want to include footnotes/endnotes in some blog postings (like the many footnotes in my last posting). I hate having to scroll down to read each endnote, and I really don’t care much for the little anchor links you can click because this means that you still have to scroll up again. Well, after trying half a dozen different CSS and/or Javascript solutions, I think I have hit on one which works in Safari, Opera, and Mozilla-based browsers like Firefox (to hell with Internet Explorer—why are you people still using it?—but this may work on it too).

I wanted, and I believe I have succeeded in finding, a way to have a little popup box show footnote text when you hover the mouse above the footnote’s number. Thanks to Cheah Chu Yeow and Dunstan Orchard postings on “nice titles” which I think does the trick nicely.

How to get it work:

1. Upload this Javascript to your server.

2. In the blog template (index.php on WordPress) or web page you wish to use footnotes add the following line of code within the <head> tag:

3. Add the following CSS code to your css file (in the case of WordPress it is wp-layout.css) file. I have commented out some code which gives the footnote reference rounded corners in some browsers.

Ok, that is all you need to do to get it set up. Then whenever you post something to your blog or that web page and want to add a footnote to some text, create a link going nowhere with a “title” attribute containing the text of your footnote:

Notes

1. I need to somehow modify the script to accept some kind of pseudo-HTML to pass on the bolding of book titles, as it is now, you can’t put book titles in italics by just adding an “em” tag. I could perhaps modify the code to translate [em]Book Title[/em] or something like it into HTML equivalent. UPDATE: I tried to do this with a simple search and replace command inserted in the javascript and it doesn’t work, the tags aren’t interpreted. It would take more scripting than I had imagined.

2. My version of nicetitle.js has deleted the code which produces a 2nd line with the link it is going to. Just uncomment that code if you want to show the link URL to an Amazon page with the book or something like that within the popup.

3. Whenever you want to use quotations in the footnote reference you need to put " instead of quotations marks or it won’t work.

4. Of course, now if any links on your page have a “title” attribute they are going to be showing this in a pop up window.

5. If some of you are wondering how I make the font small and superscripted:

2 thoughts on “Footnote Test”