September 29, 2005

Target Highlighting Library

I've written another small unobtrusive JavaScript library. This one applies a class to the element which was the target of the most recent intra-page link (ones like <a href="#chapter3">). This allows you to style the target to make it more visible. It's called THL - Target Highlighting Library.

I wrote it to solve the problem that currently, browsers don't handle such links very well. When you click one, the page jumps rather than scrolls, which is disorienting, and the new content appears at the top of the viewport - except when it's near the bottom of the page, when it could actually be anywhere in the viewport. This problem creates uncertainty, and makes intra-page navigation less usable than it need be.

There's a test page so you can see it in action.

Posted by gerv at September 29, 2005 9:44 PM
Comments

You know of the :target pseudo-class, right?
I think it is probably part of IE7 by Dean Edwards.

Posted by: Martijn at September 29, 2005 10:20 PM

Martijn: Actually, it had slipped my mind. Good point. :-) But of course IE doesn't support it, and some people don't want the overhead of IE7. It's also not out of beta yet.

Posted by: Gerv at September 29, 2005 10:57 PM

Dean Edwards' IE7 is alpha, not beta ;)

Posted by: Jesse Ruderman at September 29, 2005 11:15 PM

FWIW, the DOM HTML spec defines document.links, which you may want to use instead of that getElementsByTagName() + href checking stuff that you are doing. It's probably much better performance wise, didn't test it though.

See http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-7068919

Posted by: Mathieu Pillard at September 30, 2005 12:24 AM

I don't get it, after clicking the links for a while I noticed that sometimes the title wasn't red, sometimes it was. How does this help? I just assumed all the titles had different colours, not that the title that was red was the one I was looking for.

Why not jump to the correct part of the page, then on a timer have the title go from black to red, or flash twice (black-white-black) to draw the eye to it.

Or make the font big, then slowly shrink back to normal.

Can you use SVG in some cunning way? Big green arrows surrounding and pointing to the text, bouncing in and out (think Simpsons style) then slowly fade away after a second.

Cheers,

monk.e.boy

Posted by: monk.e.boy at September 30, 2005 8:24 AM

Hi Gerv.

Nice script.

I found a bug and have a patch for it.

If you have an element in the hyperlink, such as an img, it dose not work, because e.target is the img, not the A. here is my patch:

Line 95
- // Defeat Safari bug
- if (elem.nodeType == 3)
- {
- elem = elem.parentNode;
- }
+ // Move up the tree until we get to the A
+ while (elem.nodeName != 'A')
+ {
+ elem = elem.parentNode;
+ }

Posted by: Gary van der Merwe at September 30, 2005 5:13 PM

Gary: Thanks! New version uploaded, and testcase added to the page.

Posted by: Gerv at October 3, 2005 9:47 PM

You forget that Firefox can't even handle intra-page links so its no help to me anyay :)

Posted by: Apple at October 5, 2005 6:25 AM

If I go back, the highlight stays. This is not the case with :target, so it would be beneficial to use it. As a hack for IE, you could use the current method as a fallback method...

~Grauw

Posted by: Laurens Holst at October 5, 2005 9:23 PM