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.

9 thoughts on “Target Highlighting Library

  1. 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.

  2. 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

  3. 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;
    + }

  4. 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