Anchors are sweet. But they can be troublesome. After taking a look at modulo 26’s current Daily Flight, and recognizing the topic as one of my pet peeves, I was extremely pleased to see their suggestion for improving the anchor functionality. It’s elegant and well thought out. However, I think the javascript that they provide could use some improvement.

Andy’s code seems straighforward enough, but it has a big problem: It requires the use of two different id's for each anchor. One for the anchor itself (the one that will be used in the href) and one for the visual cue element (the one that contains the arrow / pointing device). This could rapidly become a hassle in a large document that includes links to multiple sections. We’ll try to provide a simpler solution.

Our main intent is to make life easier for the designer, not necessarily for the developer (that’s what geeks are there for after all, right?). Thus, we won’t mind if we make a mess of Andy’s nicely simple code. Also, we’ll toggle a class attribute instead of an inline style. Because we can (and it scales better).

First off, we eliminate the need for a separate id to identify the visual cue. This allows us to have a standard cue element that we can add to all anchors. It will look like this:

<span class="alt">&#8658;&nbsp;</span>

The “alt” class is my css class for “alternative” elements. It has display:none; set, so it’s not rendered by the browser. The ugly number is the right-pointing arrow character “⇒” (you may see a square if your browser is not using Unicode). The other thing is a non-breaking space.

The lack of id introduces a new problem: what if there’s more than one <span> inside the element we want to go to?. To solve this, we’ll use extra functions provided by the DOM spec to fetch our visual cue element. Instead of trying to get to it directly, we’ll get our anchor (for which we already have an id) and ask it for its inner <span> elements. Thus, instead of

cue = document.getElementById(cueId);

we’ll have

anchor=document.getElementById(anchorId); spans=anchor.getElementsByTagName("span");

This returns a list of nodes [?] that we can go through. When we reach the one we want (we recognize it by its class attribute) we’ll toggle its class by changing the className value. To be honest, I’d rather use

element.setAttribute("attr","value");

for consistency, but that call is not compatible with ie5.0/ie5.5 for the class attribute in particular.

The finished (and heavily commented) code can be seen here. The end result is that we need only specify an id for the element we’re referencing with our anchor. The visual cue is placed in a <span> inside said element, regardless of what it is (it may be a <div>, <h1> or another <span> for all we care) and our call looks like this

<a href="#anchor" onclick="toggleAnchor(this);">...</a>

Notice that we pass the this keyword as parameter. That gives the script a reference to its caller, allowing it to read the href attribute of the caller to get the id of our anchor.

To see the script in action, click here. That will send you to the bottom of this page and show an arrow pointing to the referenced element (in this case, this page’s validation links). Click again and you’ll go there sans arrow. This example also illustrates the worst case scenario. We’re going to a <div> with multiple <span>’s inside. The script finds the invisible one and toggles its class.

Thanks galore to Andy Arikawa for his fine method. Hopefully you’ll find this addition to it useful.

— sergio at 07:31 PM  

Yes. Low level programming is exactly like this.

— sergio at 01:05 AM  

I have one of those faces. You know. The “has anybody ever told you that you look just like - “ kind of face. I can’t meet up with new people without someone commenting on my striking similarity to X. What’s even worse: it changes. Over time. Yes. I’m a goddamned Age Chameleon. It’s like my very own superpower. A fairly useless one, but a superpower nonetheless. Hell, even I have trouble recognizing myself in old pictures.

For some time now, people have told me I look like Quentin Tarantino. I’m not bragging, mind you. I’d be bragging if I said I directed movies, or wrote dialogs like him. Actually looking like the guy doesn’t make me beam with pride. Actually, I would deny the accusations, were it not for the fact that the resemblance is fairly obvious. The latest running joke at the office is that I was photographed with Daryl Hannah and Uma Thurman. All of my friends started passing out links to that picture. To be perfectly honest, I think I could do a lot worse.

But that’s not the end of it, just the latest installment. When I was younger, and Doogie Howser, M.D. was on TV, I used to get the “You know who you’re just identical to?” about once a week. Since I’ve never been a big Neil Patrick Harris fan, that was far more embarrasing than being compared to a hotshot Movie Director. But it was somewhat hard to deny, too, given it was true. I’ll have to get back to you on a comparison shot for this one, though, since I can’t find good Doogie Howser pictures anywhere.

After my Doogie Howser stage, I gained some weight, lost some hair, cropped it short and basically turned myself into… Kelsey Grammer (you may know him from the TV Sitcom “Frasier”). This one was just plain… weird. It was spotted by someone at a forum I posted in. I thought the claim had no merit, but after googling for pictures and arranging those side by side I couldn’t carry the argument much further.

Although I’d like to say that people confuse me all the time with Brad Pitt, Edward Norton, or Colin Farrell rather than these guys, I don’t see my current situation as a big problem. I could even have fun with it: next time I walk into a bar, I’ll tell the “dick-tar” joke from Desperado and see if I get shot. That should be fun. Or maybe I should start hitting on girls using the line “Yo, sweetie, did you like Pulp Fiction? Yeah, girl… that was me… One-huundred percent… yup…”. I wonder how many of those fake paternity lawsuits against the famous start out this way.

— sergio at 09:16 PM