< jQuery skipnavHighlight - Skip-Link-Ziele Anschaulich machen | Der Webkrauts Adventskalender öffnet mein erstes Türchen >

2008-12-11 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 &quot;EfA-Laborbericht, Teil 7&quot; (german) I got instantly aware that I want to use this technique from now on as well.

To avoid &quot;jumping&quot; of the highlighted Containers the Developers used the CSS 2 Property outline which does not add up to the width of the Element it's surrounding like border would do. Sadly this Property is only available in the newest Browser Generation which makes the effect entirely invisible in the Internet Explorers.

To work around this Issue I used another approach. My little jQuery Plugin &quot;skipnavHighlight&quot;created an empty DIV and uses it to draw a Border around the link target.

You can find the working Demo here and you can download the Code of skipnavHighlight.jquery here.

, , , , ,
Comments (0)
Trackback (1)
Trackbacks
Trackback specific URI for this entry
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 T
Weblog: web output
Tracked: Dec 11, 13:43

Comments

No comments
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