Universität Bielefeld

© Universität Bielefeld

AnkerKlapp-Funktion

Wenn Sie auf bestimmte Inhalte in einer Seite mit Ausklapp-Boxen verlinken möchten und sich die entsprechende Box bereits beim Aufrufen der Seite ausklappen und hervorgehoben werden soll, können Sie dies auf unterschiedliche Weise erreichen:


Version 1

Für Klappboxen, die komplett hervorgehoben werden sollen.

Die URL muss folgende Form haben, um den Anker direkt aufzurufen:
https://www.uni-bielefeld.de/Ordner/datei.html#ankername
ankername steht hierbei für den Namen der Box, die sich ausklappen und hervorgehoben werden soll.

Code-Schnipsel - HTML

So sollte Ihre Klappbox aufgebaut sein:

<div class="klappbox contentbox" id="ankername">
    <div class="klappbox-klick"> ... </div>
    <div class="klappbox-text"> ... </div>
</div> <!-- klappbox ende -->

Code-Schnipsel - JavaScript

Binden Sie diesen Quellcode in den Fuß der Seite ein, die den Anker beinhaltet:

<script>
    //AnkerKlapp-Funktion: Der Anker muss diese Form haben: /kommunikation/index.html?boxname#ankername
    $(function() { AnkerKlappVersion1(); });
    window.onhashchange = function() { AnkerKlappVersion1(); }
</script>


Version 2

Für Klappboxen, in denen nur einzelne Textabschnitte hervorgehoben werden sollen.

Die URL muss folgende Form haben:
https://www.uni-bielefeld.de/Ordner/datei.html?text1#abschnitt1
text1 steht hierbei für den Namen der Box, die sich ausklappen und
abschnitt1 für den Abschnitt, der gehighlightet werden soll.

Wenn Sie keinen Abschnitt definiert haben, der gehighlightet werden und sich lediglich eine Box ausklappen soll, so geben sie einfach einen Anker dieser Form an:
https://www.uni-bielefeld.de/Ordner/datei.html?text1#

Hier finden Sie eine Beispiel-Seite
      https://www.uni-bielefeld.de/kommunikation/internet/cd/ankerklapp.html?box2#anker3

Code-Schnipsel - HTML

So sollte Ihre Klappbox aufgebaut sein:

<div class="klappbox contentbox" id="text1">
    <div class="klappbox-klick"> ... </div>
    <div class="klappbox-text">
        <p id="abschnitt1"> ... </p>
        ...
    </div>
</div> <!-- klappbox ende -->

Für den gehighlighteten Abschnitt können Sie statt <p> ebenso <span> oder <div> verwenden.

Code-Schnipsel - JavaScript

Binden Sie diesen Quellcode in den Fuß der Seite ein, die den Anker beinhaltet:

<script>
    //AnkerKlapp-Funktion: Der Anker muss diese Form haben: /kommunikation/index.html?boxname#ankername
    $(function() { AnkerKlappVersion2(); });
    window.onhashchange = function() { AnkerKlappVersion2(); }
</script>


Wenn Sie eine andere Portalfarbe als das unigrün verwenden, können Sie die Farbe des gehighlighteten Abschnitts folgendermaßen anpassen:

<script>
    $(function() { AnkerKlappVersion2("#f7f0a0"); });
    window.onhashchange = function() { AnkerKlappVersion2("#f7f0a0"); }
</script>

Achtung: Vorschau in Roxen

Dieser Code funktioniert leider nicht ohne weiteres in der Roxen-Vorschau, da Roxen hinter die View-URL noch einen Ausdruck hinter das Fragezeichen schreibt.

Um also eine Vorschau dieser Anker-Funktion sehen zu können, müssen Sie in der View-URL den hinteren Teil löschen:
https://wwwedit.uni-bielefeld.de/Ordner/datei.html?__sb_force_userid=1234&100231456
und durch Ihren Anker ersetzen:
https://wwwedit.uni-bielefeld.de/Ordner/datei.html?text1#abschnitt1