Making anchor links smarter... and sexier

2007-02-14T00:00:00-08:00

So I have a small bone to pick with Jacob Nielsen and his opinion on within-page links or anchor links^.1 There clearly is a benefit to not just linking to a specific page, but linking to a specific part of a page.

With a little help from script.aculo.us we can spice up our anchor links by highlighting them as well as linking to them.

For this article we'll limit our scope to internal anchors only.² We'll write the code using the symfony framework and in straight up XHTML. This is really dirt simple and is more of a design pattern with an example than a tutorial.

Let's do the XHTML first:

Yup, that's it... I told you it was dirt simple. You just need to include the proper prototype and script.aculo.us libraries.

In symfony we avoid repeating ourselves with a helper function:

and call it by doing:

That's it.

Jacob Nielsen is an easy target. ↩
Anchors on other pages are equally useful. To implement that, you need to have an event listener to examine the URL for an anchor and appropriately highlight the correct element. ↩

How to make Prototype Window Class as easy as Lightbox Gone Wild

2006-11-13T00:00:00-08:00

I like the way that Lightbox Gone Wild will automatically pickup any links with the class=lbOn, but I wanted to use (at some point) Prototype Window Class instead.

Luckily PWC is built on Prototype which means we've already loaded a helpful library.

In order to take all class=lbOn objects and run them through PWC we just write a simple loop and iterate.

So here's the low-down:

Download PWC
Copy window.js
Use the included prototype & script.aculo.us if you don't already include it in your page
copy any themes you wish to use.

In your page add this bit of JavaScript:

So, this code simply looks for all the anchor tags with class=lbOn and then creates a new mylb instance for each anchor. The end.

Dave Dash

Making anchor links smarter... and sexier

How to make Prototype Window Class as easy as Lightbox Gone Wild