Beispiel:Javascript Autofootnotes.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Demo: autoFootNoter.js</title>
<style>
/* wenige allgemeine Style */
body {margin:30px; padding:0; font-size:16px; line-height:1.4;}
q { font-style:italic }
h2{font-size:18px;}
/* Demo Original-Fussnoten, falls nicht ersetzt */
.fn_no_js {font-size:12px; display:inline-block; vertical-align:top; height:1.3em; overflow:hidden; }
.fn_no_js:hover { height:auto; }
/* Original-Fussnoten, falls nicht mit JS ersetzt */
.fn {font-size:12px; display:inline-block; vertical-align:top; height:1.3em; overflow:hidden; }
.fn:hover { height:auto; }
/* Fussnotenspezifisch */
a[id^="fna"]{
vertical-align:top;
font-size:12px;
padding:0 2px 0 0px;
margin-left:-3px;
}
#footnotes {
margin-top:1em;
font-size:14px;
}
#footnotes h3 {
margin:0;
font-size:16px;
line-height:2;
width:20em;
border-top:1px solid #ccc;
}
#footnotes > div{
padding:0 0 5px 40px;
text-indent:-40px;
}
#footnotes > div > *{
text-indent:0;
}
#footnotes > div > a:first-child{
display:inline-block;
width:30px;
font-size:12px;
vertical-align:top;
text-align:right;
}
#footnotes > div > div{
width:auto;
display:inline-block;
}
#hovernote{
position:fixed;
display:none;
width:50%;
padding:5px;
font-size:14px;
background:#fff;
border:1px solid #ccc;
}
:root #hovernote{ /* bypass MSIE 8 */
border:0;
-moz-box-shadow: 2px 4px 10px #666;
-webkit-box-shadow: 2px 4px 10px #666;
box-shadow: 2px 4px 10px #666;
}
</style>
</head>
<body>
<h1>Demo: autoFootNoter.js</h1>
<h2>Beschreibung</h2>
<div id="examplecontent">
<p>Dies ist eine Fussnoten-Demo zum autoFootNoter.js
<small class="fn">It's free as in <em>free beer</em> and <em>free speech</em>
.</small>.</p>
<p>Fussnoten
<span class="fn">Fussnoten sind ausgelagerte Texte, die oft Randnotizen, Hinweise zu Quellen
oder weiterführender Literatur beinhalten.
Sie sind in der populären Literatur in der Regel nicht besonders erwünscht.
In der wissenschaftlichen Literatur stellen sie aber oft eine bedeutende und teure Textmasse dar.
</span>
werden aus Elementen gewonnen, die dem im Javascript zugewiesenen CSS-Selector entsprechen. Am Besten verwenden Sie eine einheitliche Klasse für Fussnoten.<br>
Eine bidirektionale Verlinkung wird erstellt.<br>
Die zusammengetragenen Fussnoten werden am Ende des Elements angefügt, dessen ID Sie definieren.
Zusätzlich werden auf Wunsch Hover-Notes erzeugt, welche den Fussnoteninhalt nahe der Mausposition anzeigen.<br>
Die Strategie erlegt Ihnen nur die eine Beschränkung auf:<br>
Fussnoten können keine anderen Fussnoten enthalten
<span class="fn">Was zu <i class="fn">beweisen</i> war!</span>
.</p>
<h2>Umfangreiche Inhalte</h2>
<p>Fussnoten können auch Tabellen oder anderes umfangreiches Markup enthalten.<br>
Achten Sie auf valides Markup.</p>
<div>Dieses Mini Sudoku
<div class="fn">Dieses abgespeckte Mini-Sudoku zeigt das Prinzip.
<table style="border:1px solid black; width:100px; text-align:center">
<tr><td style="color:red">1</td><td style="color:red">2</td><td style="color:blue">3</td><td style="color:blue">4</td></tr>
<tr><td style="color:red">3</td><td style="color:red">4</td><td style="color:blue">2</td><td style="color:blue">1</td></tr>
<tr><td style="color:green">4</td><td style="color:green">3</td><td style="color:black">1</td><td style="color:black">2</td></tr>
<tr><td style="color:green">2</td><td style="color:green">1</td><td style="color:black">4</td><td style="color:black">3</td></tr>
</table>
Vertikalen, Horizontalen und Binnenquadrate müssen jeweils die Ziffern 1 bis 4 einmalig beinhalten.
</div>
ist korrekt gelöst!<br></div>
<h2>Test der Hovernoten Positionierung </h2>
<p>Hovernotes können im Script zugeschaltet werden.</p>
<p>
______ <span class="fn">langes________________________________Wort weitere Worte</span>
______ <span class="fn">langes________________________________Wort weitere Worte</span>
______ <span class="fn">langes________________________________Wort weitere Worte</span>
______ <span class="fn">langes________________________________Wort weitere Worte</span>
______ <span class="fn">langes________________________________Wort weitere Worte</span>
______ <span class="fn">langes________________________________Wort weitere Worte</span>
______ <span class="fn">langes________________________________Wort weitere Worte</span>
______ <span class="fn">langes________________________________Wort weitere Worte</span>
______ <span class="fn">langes________________________________Wort weitere Worte</span>
______ <span class="fn">langes________________________________Wort weitere Worte</span>
______ <span class="fn">langes________________________________Wort weitere Worte</span>
______ <span class="fn">langes________________________________Wort weitere Worte</span>
______ <span class="fn">langes________________________________Wort weitere Worte</span>
</p>
<p>Hovernotes sind mit der Maus nicht direkt erreichbar. Durch Klick auf den Anker gelangt man jedoch zur Fussnote, und kann dort den identischen Text markieren, oder enthaltene Links navigieren.</p>
<p>Diese Fussnote <span class="fn">Hat einen <a href="http://example.org">Link</a></span> müssen Sie klicken, um den Link zu navigieren.</p>
<h2>Anzeige bei deaktiviertem JS</h2>
<p>Dies ist Text <span class="fn_no_js">Dies ist eine einzeilige Fussnote mit <a href="http://example.org">Link</a>.</span> hier gehts weiter.</p>
<p>Dies ist Text <span class="fn_no_js">Dies ist eine ein-<br>zwei-<br>dreizeilige Fussnote.</span> hier gehts weiter.<br>
Und das ist die nächste Zeile im normalen Text.</p>
<h2>Markup und Whitespace</h2>
<p>Sie können im Quelltext vor der Fussnote einen Whitespace als Leerzeichen oder Umbruch anbringen. Das CSS wird diesen durch negativen Abstand kompensieren. Dadurch behalten Sie Überblick im Quelltext.</p>
<pre>
<p>hier ist das Fussnoten-Stichwort
<span class="fn">Fussnoteninhalt</span>
gefolgt von weiterem Text.</p>
</pre>
<h2>Kompatibilität</h2>
<p>document.querySelector() ist implementiert in aktuellen Firefox, Safari, Opera und MSIE 8 Browsern, Nicht jedoch in MSIE 7 oder älteren Browsern. </p>
<div style="height:20em; background:#eee;">( Leerraum zum Link testen )</div>
</div>
<div style="height:5em; background:#eee;">( Webpages haben oft noch einen Footer )</div>
<script type="text/javascript">
function autoFootNoter(){
/* START KONFIGURTATION */
var footnotifyElementsByCssSelector = "body .fn",
appendFootnoteCollectionToElementById = "examplecontent",
footnoteCollectionId = "footnotes",
footnoteCollectionHeadingAsHTML = "<h3>Fussnoten</h3>",
footnoteAnchorIdPrefix = "fna",
footnoteIdPrefix = "fn",
showHovernotes = true;
/* END KONFIGURTATION */
if(!document.querySelector){ return; }
var f = document.querySelectorAll(footnotifyElementsByCssSelector);
if(f){
var col = document.createElement("div");
col.id = footnoteCollectionId;
col.innerHTML = footnoteCollectionHeadingAsHTML;
var hnote = document.createElement("div");
hnote.id="hovernote";
document.getElementsByTagName("body")[0].appendChild(hnote);
for(var i=0, j=1; i< f.length; i++, j++ ){
col.innerHTML += '<div><a href="#' + footnoteAnchorIdPrefix + j
+ '" id="' + footnoteIdPrefix + j + '">' + j + '</a> <div>'
+ f[i].innerHTML+'</div></div>';
var a = document.createElement("a");
a.id = footnoteAnchorIdPrefix+j;
a.href = '#'+footnoteIdPrefix+j;
a.innerHTML=j;
if(showHovernotes){
a.title = ""; // Opera title stört bei Hovernotes
a.onmouseover = function(event){ hoverNote(this,event);};
a.onclick = function(){ hoverNote(); };
a.onmouseout = function(){ hoverNote(); };
}
f[i].parentNode.replaceChild(a, f[i]);
}
document.getElementById(appendFootnoteCollectionToElementById).appendChild(col);
}
}
function hoverNote(el,evt){
var h = document.getElementById('hovernote');
if(!evt) evt = window.event;
if(el){
h.innerHTML = document.getElementById(
el.hash.substr(1,el.hash.length-1)
).parentNode.innerHTML;
h.style.display="block";
h.style.left=(evt.clientX*0.5)+'px';
h.style.top=(evt.clientY+20)+'px';
}
else{
h.style.display="none";
h.innerHTML ="";
}
}
autoFootNoter();
</script>
</body>
</html>
