Last active
December 23, 2015 09:09
-
-
Save Sinetheta/6612205 to your computer and use it in GitHub Desktop.
Add a footnotes style list of links at the bottom of a page. Hide with class `.printOnly`. Depending on your environment, it may be necessary to scope the target container (eg: avoid including navigation links).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*------------------------------------------------------------------------------ | |
Function: footnoteLinks() | |
Author: Aaron Gustafson (aaron at easy-designs dot net) | |
Creation Date: 8 May 2005 | |
Version: 1.3 | |
Homepage: http://www.easy-designs.net/code/footnoteLinks/ | |
License: Creative Commons Attribution-ShareAlike 2.0 License | |
http://creativecommons.org/licenses/by-sa/2.0/ | |
Note: This version has reduced functionality as it is a demo of | |
the script's development | |
------------------------------------------------------------------------------*/ | |
function footnoteLinks(containerID,targetID) { | |
if (!document.getElementById || | |
!document.getElementsByTagName || | |
!document.createElement) return false; | |
if (!document.getElementById(containerID) || | |
!document.getElementById(targetID)) return false; | |
var container = document.getElementById(containerID); | |
var target = document.getElementById(targetID); | |
var h2 = document.createElement('h2'); | |
addClass.apply(h2,['printOnly']); | |
var h2_txt = document.createTextNode('Links'); | |
h2.appendChild(h2_txt); | |
var coll = container.getElementsByTagName('*'); | |
var ol = document.createElement('ol'); | |
addClass.apply(ol,['printOnly']); | |
var myArr = []; | |
var thisLink; | |
var num = 1; | |
for (var i=0; i<coll.length; i++) { | |
var thisClass = coll[i].className; | |
if ( coll[i].getAttribute('href') || | |
coll[i].getAttribute('cite') ) { | |
thisLink = coll[i].getAttribute('href') ? coll[i].href : coll[i].cite; | |
var note = document.createElement('sup'); | |
addClass.apply(note,['printOnly']); | |
var note_txt; | |
var j = inArray.apply(myArr,[thisLink]); | |
if ( j || j===0 ) { | |
note_txt = document.createTextNode(j+1); | |
} else { | |
var li = document.createElement('li'); | |
var li_txt = document.createTextNode(thisLink); | |
li.appendChild(li_txt); | |
ol.appendChild(li); | |
myArr.push(thisLink); | |
note_txt = document.createTextNode(num); | |
num++; | |
} | |
note.appendChild(note_txt); | |
if (coll[i].tagName.toLowerCase() == 'blockquote') { | |
var lastChild = lastChildContainingText.apply(coll[i]); | |
lastChild.appendChild(note); | |
} else { | |
coll[i].parentNode.insertBefore(note, coll[i].nextSibling); | |
} | |
} | |
} | |
target.appendChild(h2); | |
target.appendChild(ol); | |
addClass.apply(document.getElementsByTagName('html')[0],['noted']); | |
return true; | |
} | |
window.onload = function() { | |
footnoteLinks('content','content'); | |
} | |
/*------------------------------------------------------------------------------ | |
Excerpts from the jsUtilities Library | |
Version: 2.1 | |
Homepage: http://www.easy-designs.net/code/jsUtilities/ | |
License: Creative Commons Attribution-ShareAlike 2.0 License | |
http://creativecommons.org/licenses/by-sa/2.0/ | |
Note: If you change or improve on this script, please let us know. | |
------------------------------------------------------------------------------*/ | |
if(Array.prototype.push == null) { | |
Array.prototype.push = function(item) { | |
this[this.length] = item; | |
return this.length; | |
}; | |
}; | |
// --------------------------------------------------------------------- | |
// function.apply (if unsupported) | |
// Courtesy of Aaron Boodman - http://youngpup.net | |
// --------------------------------------------------------------------- | |
if (!Function.prototype.apply) { | |
Function.prototype.apply = function(oScope, args) { | |
var sarg = []; | |
var rtrn, call; | |
if (!oScope) oScope = window; | |
if (!args) args = []; | |
for (var i = 0; i < args.length; i++) { | |
sarg[i] = "args["+i+"]"; | |
}; | |
call = "oScope.__applyTemp__(" + sarg.join(",") + ");"; | |
oScope.__applyTemp__ = this; | |
rtrn = eval(call); | |
oScope.__applyTemp__ = null; | |
return rtrn; | |
}; | |
}; | |
function inArray(needle) { | |
for (var i=0; i < this.length; i++) { | |
if (this[i] === needle) { | |
return i; | |
} | |
} | |
return false; | |
} | |
function addClass(theClass) { | |
if (this.className != '') { | |
this.className += ' ' + theClass; | |
} else { | |
this.className = theClass; | |
} | |
} | |
function lastChildContainingText() { | |
var testChild = this.lastChild; | |
var contentCntnr = ['p','li','dd']; | |
while (testChild.nodeType != 1) { | |
testChild = testChild.previousSibling; | |
} | |
var tag = testChild.tagName.toLowerCase(); | |
var tagInArr = inArray.apply(contentCntnr, [tag]); | |
if (!tagInArr && tagInArr!==0) { | |
testChild = lastChildContainingText.apply(testChild); | |
} | |
return testChild; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// If insetead you're already using jQuery | |
(function($){ | |
$(document).ready(function() { | |
var appendFlag = function(i, el) { | |
$('<sup class="footnote-flag printOnly">' + (i + 1) + '</sup>') | |
.insertAfter(el); | |
} | |
var pluckHref = function(i, el) { | |
return $(el).attr('href'); | |
} | |
var toLi = function(i, href){ | |
return '<li>' + href + '</li>'; | |
} | |
var links = $('a') | |
.each(appendFlag) | |
.map(pluckHref) | |
.map(toLi) | |
.toArray(); | |
$('<h2 class="printOnly">Link List</h2>') | |
.appendTo('body'); | |
$('<ol class="footnotes printOnly">') | |
.append(links.join('')) | |
.appendTo('body'); | |
}); | |
}(jQuery)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Smashing winery | |
Example site for article at Smashing Magazine | |
by Christian Krammer, ck@css3files.com | |
Print style */ | |
/* Reset quotes */ | |
q { | |
quotes: none | |
} | |
q:before, q:after { | |
content: "" | |
} | |
/* Hide everything unneeded */ | |
header h1, header nav, footer, img { | |
display: none | |
} | |
/* font sizes */ | |
body { | |
font: 12pt Georgia, "Times New Roman", Times, serif; | |
line-height: 1.3; | |
color: #000; | |
} | |
h1 { | |
font-size: 24pt | |
} | |
h2 { | |
font-size: 14pt; | |
margin-top: 25px | |
} | |
aside h2 { | |
font-size: 18pt | |
} | |
/* Show printer-frindly logo. */ | |
header .print { | |
display: block | |
} | |
/* If you like things a little bit easier and more semantic you can alternatively just leave the h1 of the header visible, switch off the margin and make it bigger than the rest of the headlines */ | |
/*header nav, footer, img {display: none} | |
header h1 { | |
margin: 0; | |
font-size: 30pt; | |
}*/ | |
/* Some browsers like to show a border around images. Switch it off */ | |
img { | |
border: 0 | |
} | |
/* Mover the header a little bit awy from the content */ | |
header { | |
margin-bottom: 40px | |
} | |
/* Display the URL of the site so that the user knows where the printout came from */ | |
header:after { | |
display: block; | |
content: "www.smashing-winery.com" | |
} | |
/* Additionally/optionally a little message could be displayed */ | |
/*header:before { | |
display: block; | |
content: "Thank your for printing our content at www.smashing-winery.com. Please check back soon for new offers about delicious wine from our winery."; | |
margin-bottom: 10px; | |
border: 1px solid #bbb; | |
padding: 3px 5px; | |
font-style: italic; | |
}*/ | |
/* Separate blockquotes a little bit from the rest */ | |
blockquote { | |
font-size: 13pt; | |
font-style: italic; | |
} | |
/* By default links are blue. For optimal legibility change them to black */ | |
p a { | |
color: #000 | |
} | |
/* Show the URL after each link, whereby internal links are preceeded by the site's URL */ | |
p a:after { | |
content: " (http://www.smashing-winery.com/" attr(href) ")"; | |
font-size: 80%; | |
word-wrap: break-word; | |
} | |
/* External links don't get this treatment */ | |
p a[href^="http://"]:after, p a[href^="https://"]:after { | |
content: " (" attr(href) ")"; | |
} | |
/* Append the source of the citation */ | |
q:after { | |
content: " (" attr(cite) ")" | |
} | |
/* The Sidebar is placed under the content automatically. To distinguish it from the rest a border and a gap is set before */ | |
aside { | |
border-top: 1px solid #bbb; | |
margin-top: 30px; | |
display: block; | |
/*page-break-before: always; */ /* Moves the sidebar to new page */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment