jQuery: Interne Sprungziele anbieten
12.04.2010 in: Interna, Javascript, Trickkiste und Webdesign • Ein Kommentar
Meine Leidenschaft gilt dem Subtilen, dem unaufdringlichen Detail. Deshalb fange ich leere Suchanfragen ab, oder ich vergrößere die Eingabefelder im Kommentarformular, sobald sie fokussiert werden.
Heute habe noch so ein Detail nachgerüstet. Wenn ich einen Artikel mittels Überschriften in mehrere Abschnitte eingeteilt habe, dann lasse ich per Plugin ein Inhaltsverzeichnis erstellen. Dabei werden alle Überschriften mit einer id versehen, die dann als Sprungziel dient. Bis hierhin nichts Neues; so verfahre ich schon lange. Heute aber habe ich den Nutzwert der id-Attribute erhöht.
CSS pur – nur für Auserwählte
In meinem Userstylesheet lasse ich mir interne Anker gerne zeigen:
h1[id]:hover:after,
h2[id]:hover:after,
h3[id]:hover:after,
h4[id]:hover:after,
h5[id]:hover:after,
h6[id]:hover:after
{ /* Findet interne Links, falls ich mal auf
einen Abschnitt in einer Seite linken will. */
content: " #" attr(id);
font: bold 14px/1 Consolas;
}
Das könnte ich hier auch einbauen. Leider hat aber Mozilla an dieser Stelle einen unangenehmen Bug, der erst zehneinhalb Jahre alt ist und deshalb noch nicht repariert wurde: Generated Content kann nicht kopiert werden. Ihr sähet also einen Text, den ihr nicht erreichen könnt. So etwas biete ich nicht an.
Javascript macht’s möglich
Zu den vielen Vorteilen eines Javascript-Frameworks gehört, daß ich mich um die Bugs und Besonderheiten der einzelnen Browser kaum noch kümmern muß. Seit dem letzten kleinen Redesign setze ich hier jQuery ein, und damit läßt sich das Problem sehr elegant lösen.
Man kann in jQuery meistens ganz normale CSS-Selektoren benutzen, um Elemente auszuwählen. Beispielsweise füllt jQuery(' einen Array mit allen Überschriften zweiter und dritter Ordnung, die ein Attribut h2[id], h3[id]')id besitzen.
Mit each() schlendert man dann gemütlich jeden Treffer ab und löscht, ersetzt oder bearbeitet ihn, bis die Finger bluten. Und das mache ich jetzt auch:
<script defer>
jQuery(document).ready(function hpoint()
{
jQuery('h2[id], h3[id]').each(function jumplink()
{
// Klasse setzen
jQuery(this).addClass('haslink');
// Link ankleben
jQuery(this).append(
' <a class="hpoint noprint" href="#'
+ jQuery(this).attr("id")
+ '" title="Direkter Link auf diese Position">#</a>'
);
});
});
</script>
Jetzt haben also alle anspringbaren Überschriften einen Link, mit dem jeder etwas anfangen kann.
CSS zur Feinarbeit
.hpoint:link,
.hpoint:visited
{
color: #ccc;
text-decoration: none;
}
.haslink:hover .hpoint,
.haslink:focus .hpoint,
.haslink:target .hpoint
{
color: #059;
}
Das Script sollte irgendwo am Ende der Seite stehen oder ausgelagert werden. jQuery selbst muß natürlich vorher eingebunden werden.
Wie findet ihr das? Lästig, nützlich, oder verbesserungsbedürftig?
Ich finde diese Option absolut, nicht nur für Besucher, absolut hilfreich, doch fällt es mir soeben schwer, das ganze in ein nicht-Word-Press template einzubauen ...