Demo: autoFootNoter.js

Beschreibung

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! .

Umfangreiche Inhalte

Fussnoten können auch Tabellen oder anderes umfangreiches Markup enthalten.
Achten Sie auf valides Markup.

Dieses Mini Sudoku
Dieses abgespeckte Mini-Sudoku zeigt das Prinzip.
1234
3421
4312
2143
Vertikalen, Horizontalen und Binnenquadrate müssen jeweils die Ziffern 1 bis 4 einmalig beinhalten.
ist korrekt gelöst!

Test der Hovernoten Positionierung

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.

Anzeige bei deaktiviertem JS

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.

Markup und Whitespace

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>

Kompatibilität

document.querySelector() ist implementiert in aktuellen Firefox, Safari, Opera und MSIE 8 Browsern, Nicht jedoch in MSIE 7 oder älteren Browsern.

( Leerraum zum Link testen )
( Webpages haben oft noch einen Footer )