< Der Webkrauts Adventskalender 2008 öffnet seine Türchen | jQuery-skipnavHighlight - nicely highlighting skip link targets >

2008-12-11 jQuery skipnavHighlight - Skip-Link-Ziele Anschaulich machen

[switch to english Version of this Post]

Als Tomas Caspers in seinem gestrigen "EfA-Laborbericht, Teil 7" auf die Skip-Links der frisch relaunchten Website der Stadt Stockholm verwies war mir klar, daß ich diese einfache und einfach Sinnvolle Technik zukünftig unbedingt ebenfalls nutzen möchte.

Um ein "Springen" der markierten Container zu vermeiden setzten die Entwickler der Webseite auf die CSS2 Eigenschaft: outline die das umrandete Element nicht verbreitert wie es border machen würde. Leider ist diese Eigenschaft nur in der neuesten Browser Generation verfügbar, was das Feature in den Internet Explorern vollständig verschwinden lässt.

Um diesen Makel zu umschiffen habe ich einen anderen Lösungsweg eingeschlagen. Mein kleines jQuery Plugin "skipnavHighlight" erzeugt ein leeres DIV und malt damit einen Rahmen um zu markierende Linkziel.

Eine funktionierende Demo gibt es hier und herunterladen kann man den Code von skipnavHighlight.jquery hier.

, , , , ,
Comments (2)
Trackback (1)
Trackbacks
Trackback specific URI for this entry
jQuery-skipnavHighlight - nicely highlighting skip link targets
[deutsche Version dieses Beitrags anzeigen]When I read about the Skip Links of the recently relaunched Website of City of Stockholm in the "EfA-Laborbericht, Teil 7" (german) I got instantly aware that I want to use this technique from now on
Weblog: web output
Tracked: Dec 11, 13:42

Comments

UteJ.Danke für das Script.

Funktioniert bei mir aber nur, wenn der Anker an keine URL gebunden ist.

Habe daher die Zeile
var el = $( $(o).attr('href') );

geändert in
var el = $('#' + $(o).attr('href').split('#')[1]);


Damit klappt es.

Viele Grüße.
#1 UteJ. (Homepage) on 2009-02-23 16:21 (Reply)
Dirk GinaderDanke für den super Hinweis Ute :-)
Das werde ich auf jeden Fall einbauen!
#1.1 Dirk Ginader (Homepage) on 2009-02-23 17:28 (Reply)
Add Comment

Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

Gravatar/Favatar/Pavatar/MyBlogLog author images supported.
You can use [geshi lang=javascript/css/html4strict/php]your code[/geshi] tags to embed source code snippets