• Stefan Buchali (UDG)
• 07.05.2018
• DE

Kleine Helferlein - Teil 2: RedDots in Blocklevel-A-Tags verwenden

Seit HTML5 ist die Verwendung des A-Tags auch als Blocklevel-Element erlaubt.

Somit ist es möglich, nicht nur Teile z.B. eines Teasers zu verlinken (Bild, Button, …), sondern die gesamte Fläche.

Dies verschafft nicht nur dem User eine angenehmere Experience auf der Website, es bringt auch SEO-Vorteile, da sich hierdurch die Anzahl an internen Links, die auf ein und dieselbe Unterseite zeigen, reduziert.

<a class="teaser-link" href="#">
    <div class="teaser">
        <img src="bild.png">
        <h4>Headline</h4>
        <p>Text.</p>
        <p><span class="btn"><span>Jetzt informieren</span></span></p>
    </div>
</a>

Im SmartEdit jedoch führt dies zu einem entscheidenden Nachteil: Möchte man (nach SmartEdit-BestPractice) einzelnen Elemente pflegbar machen, würde bei Klick auf einen der RedDots (die sich dann innerhalb des A befinden) der Link ausgeführt, so dass die Elemente nicht mehr bedienbar wären.

Eine denkbare, aber unschöne Abhilfe wäre, alle RedDots außerhalb des Teasers zu platzieren, mit entsprechendem Label. Diese ist aber nicht „Philosophie-gemäß“.

Die bessere Lösung sind ein paar Zeilen jQuery, das in vielen Website-Projekten sowieso verwendet wird. Da der SmartEdit die Website „ganz normal“ im Browser darstellt, kann man auch für die Optimierung der Pflege auf dessen Funktionen zurückgreifen:

jQuery(document).ready(function($) {
    // Enables editing of RedDots within an A-Tag (HTML5)
    $('a.nohref').removeAttr('href');
});

Damit wird allen A-Tags, die die Klasse „nohref“ haben, das href-Attribut entfernt. Der Link ist somit nicht mehr klickbar, die RedDots können bedient werden!

Natürlich vergibt man diese Klasse nicht jedem A-Tag, sondern setzt sie per Blockmarkierung nur im im RedDotOpenPageMode. Somit bleiben alle Links wie gehabt bedienbar, bis auf die des momentan zum Pflegen geöffneten Moduls.

Über den Autor: