Automatic Footnotes

If you use quotes from various sources, be it a website, a book, or a person, then it would be nice to indicate the source of this information in a footnote.

If you take out and arrange footnotes manually, then it will bother even the most persistent "writer." So I suggest you a way to implement footnotes using jQuery.

The text of the footnote will be taken from the attributes (parameters) of the quote tag. The quotes themselves will look like this:
')

  <q title = "Done with your TPS reports?"> 
 Is this good for the company?
 </ q> 

Quote with reference.

  <q title = "Done with your TPS reports?">
 Is this good for the company?
 </ q> 

Quote with remark

  <q title = "Zeldman. <em> Designing withnWeb Standards </ em> New Riders, 2003.">
 We build only to rebuild.
 </ q> 

Quote with nested tag.

The same constructs are for the blockquote tag. The difference between the q and blockquote tags is that the first is a string element and the other is a block element.

Now we’ll start screwing jQuery:
This is how our code looks like:

  $ (document) .ready (function () {
 $ ("# wrap"). append ("<ol id = \" footnotes \ "> </ ol>");
 footnote = 1;
 $ ("q [cite], q [title], blockquote [cite], blockquote [title]"). addClass ("footnote");

 $ (". footnote"). each (function () {
 $ (this) .append ("<sup>" + footnote + "</ sup>");

 cite = "<li>";
 url = $ (this) .attr ("cite");

 title = $ (this) .attr ("title");
 if (title && url) {
 cite + = "<a href=\""+url+"\">" + title + "</a>";
 } else if (title) {

 cite + = title;
 } else if (url) {
 cite + = "<a href=\""+url+"\">" + url + "</a>";
 }
 cite + = "</ li>";

 $ ("# footnotes"). append (cite);
 footnote ++;  });
 });

Update: In haste, at the request of commentators on my blog, I made a version with anchors.

  $ (document) .ready (function () {
 $ ("# wrap"). append ("<ol id = \" footnotes \ "> </ ol>");
 footnote = 1;
 $ ("q [cite], q [title], blockquote [cite], blockquote [title]"). addClass ("footnote");
 $ (". footnote"). each (function () {
 $ (this) .append ("<sup id = \" sn "+ footnote +" \ "> <a href=\"#sl"+footnote+"\">" + footnote + "</a> </ sup>" );
 cite = "<li id ​​= \" sl "+ footnote +" \ ">";
 url = $ (this) .attr ("cite");
 title = $ (this) .attr ("title");
 if (title && url) {
 cite + = "<a href=\""+url+"\">" + title + "</a> <a href=\"#sn"+footnote+"\"> To quote </a>";
 } else if (title) {
 cite + = title;
 } else if (url) {
 cite + = "<a href=\""+url+"\">" + url + "</a> <a href=\"#sn"+footnote+"\"> To quote </a>";
 }
 cite + = "</ li>";
 $ ("# footnotes"). append (cite);
 footnote ++;
 });
 }); 

This script adds after the main content block ( #wrap ), a block with footnotes ( #footnotes ), and then adds the footnotes themselves inside it.

See an example of using the script, as well as go to the website of the author of this wonderful script, you can below. Thanks to all! ;-)

See an example.
Script author website (English)

Subscribe to Chernev's notes (RSS)