Dies ist eine Fussnoten-Demo zum autoFootNoter.js It's free as in free beer and free speech ..
Fussnoten
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.
werden aus Elementen gewonnen, die dem im Javascript zugewiesenen CSS-Selector entsprechen. Am Besten verwenden Sie eine einheitliche Klasse für Fussnoten.
Eine bidirektionale Verlinkung wird erstellt.
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.
Die Strategie erlegt Ihnen nur die eine Beschränkung auf:
Fussnoten können keine anderen Fussnoten enthalten
Was zu beweisen war!
.
Fussnoten können auch Tabellen oder anderes umfangreiches Markup enthalten.
Achten Sie auf valides Markup.
1 | 2 | 3 | 4 |
3 | 4 | 2 | 1 |
4 | 3 | 1 | 2 |
2 | 1 | 4 | 3 |
Hovernotes können im Script zugeschaltet werden.
______ langes________________________________Wort weitere Worte ______ langes________________________________Wort weitere Worte ______ langes________________________________Wort weitere Worte ______ langes________________________________Wort weitere Worte ______ langes________________________________Wort weitere Worte ______ langes________________________________Wort weitere Worte ______ langes________________________________Wort weitere Worte ______ langes________________________________Wort weitere Worte ______ langes________________________________Wort weitere Worte ______ langes________________________________Wort weitere Worte ______ langes________________________________Wort weitere Worte ______ langes________________________________Wort weitere Worte ______ langes________________________________Wort weitere Worte
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.
Diese Fussnote Hat einen Link müssen Sie klicken, um den Link zu navigieren.
Dies ist Text Dies ist eine einzeilige Fussnote mit Link. hier gehts weiter.
Dies ist Text Dies ist eine ein-
zwei-
dreizeilige Fussnote. hier gehts weiter.
Und das ist die nächste Zeile im normalen Text.
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>hier ist das Fussnoten-Stichwort <span class="fn">Fussnoteninhalt</span> gefolgt von weiterem Text.</p>
document.querySelector() ist implementiert in aktuellen Firefox, Safari, Opera und MSIE 8 Browsern, Nicht jedoch in MSIE 7 oder älteren Browsern.