Helper use Links on same page
Hier ist befindet sich eine HTML Box mit etwas CSS.
Diese sorgt dafür, dass beim scrollen der fixe Header der CVJM Baden Homepage berücksichtigt wird. In diesem Fall wird ein fixer "Offset" von 120 Pixel gesetzt.
ACHTUNG:
Im Bearbeitungsmodus (bzw. wenn man eingeloggt ist) hat man einen höheren Header (bzw. einen zusätzlichen Header) als ein ganz normaler unangemeldeter Besucher der CVM Baden Homepage.
Beispiel einfaches Inhaltsverzeichnis
Inhaltsverzeichnis und Kapitel sind manuell verlinkt.
Das bedeutet es handelt sich um ein normales "Editor Feld". Die Kapitel Überschriften hier werden von Hand nieder geschrieben und dann über das "Link"-Symbol mit den Kapiteln unten auf der Seite verlinkt.
Dafür wird einfach die entsprechende ID mit einem vorangestelltem '#' in das "URL" Feld eingetragen.
Automatisch generiertes Inhaltsverzeichnis
Inhaltsverzeichnis wird automatisch generiert.
Das Skript durchsucht alle HTML-Elemente auf der Seite und zeigt die Elemente an, welche in ihrer ID mit dem Text 'unique_id_on_all_page_chapter_' beginnen. Der "Suchtext" kann natürlich im Skript beliebig angepasst werden.
Wichtig ist dass all IDs auf der ganzen Seite eindeutig sind (also sie dürfen nicht mehrfach vorkommen/verwendet werden.).
Die gefunden Elemente werden hier angezeigt mit dem Inhalt des HTML-Elements (dies sollte die Überschrift sein) und automatisch verlinkt.
Kapitel 1
jedem Kapitel wird eine eindeutige ID vergeben.
Dadurch, kann darauf verlinkt werden und automatisch dort hin gescrolled werden.
Eine solche ID lässt sich hinzufügen, indem man in das Editor Feld klickt und dann in der Toolbar auf Werkzeuge -> Quelltext
Es öffnet sich ein Popup-Fenster in welchem der "HTML-code" zu sehen ist, welcher dieses Kapitel darstellt.
Die Überschrift sollte textuell recht einfach zu finden sein. Dem zugehörigen Überschrifts Tag muss dann nur noch eine eindeutige ID hinzugefügt werden und fertig.
Falls das "automatisch generierte Inhaltsverzeichnis verwendet werden soll, muss diese ID natürlich textuell mit der im Skript definierten Zeichenfolge beginnen. In diesem Fall lautet diese: 'unique_id_on_all_page_chapter_'
Für dieses Kapitel sieht die Überschrift im Quelltext dann übrigens wie folgt aus:
<h2 id="unique_id_on_all_page_chapter_1" style="text-align: left;">Kapitel 1</h2>
Ich habe in diesem Fall nur das id="unique_id_on_all_page_chapter_1" hinzugefügt.
Platzhalter
etc
einfacher "Füll-Text"
Kapitel 2
Text
Platzhalter
etc
einfacher "Füll-Text"
Kapitel 3
Text
Platzhalter
etc
einfacher "Füll-Text"