19th Jan 2006
Multiple Link Targets
I’ve been working on some dom scripting skills lately. A good book for this is DOM Scripting, by Jeremy Keith.
It’s also given me a chance to address something about the web that’s bugged me for a dozen years. What’s that, you say? It’s links! Stinkin’ links! I sometimes want links to give me a choice of target, or to simply give me more detail.
Here’s an example: sometimes people will write “for reference, see this, this, this, and that. It’s a drag, because you need to hover over every link to see where it will go. It’d be better, to say “for reference, see these”, and have the link present multiple options.
Of course, that sounds like putting a menu anywhere. It’s like that, and more. It makes sense some of the time, when you would want to present multiple options, or explain something in more detail. We might also want our information to be obtained dynamically, so that it’s customized to whatever else we have going on with our current web page.
Here’s some sample text with a link:

Let’s click it:

As you can see, the basic idea is a popup div with arbitrary content. The key to making it work is to give each link a unique id, such as id=”example_1”. We would, of course, add a simple means to close the popup. We can easily add images:

The goal is to enable the popup content from two sources:
- from data embedded in JavaScript when the page is delivered (arrays, objects, etc)
- as return value from an XMLHttpRequest call (plain text, JSON, or XML)
I’ll take a step back and explain a few of the puzzle pieces:
- JavaScript, XHTML, etc. to enable all links (or some subset) on a page to call an event handler
- prototype.js, or some other off-the-shelf package, to handle AJAX calls to get dynamic content
- JSON to handle parsing complex content
There’s quite a bit I am not explaining here. When I put up a demo, it’ll become clearer.
p.s. This post was mostly generated via RedCloth. I’m experimenting with Textile to see if it helps me write an entry faster. You can infer that since I’m using RedCloth, I’ve installed Ruby on Rails. This also points to the fact that I’m probably using TextMate. Yep, it’s all true :-) It’s also true that I’ve resurrected my old Perl CLI package, from circa 1992. Stay tuned.
So you took the red pill and entered the rabbit hole.
I hope you like it in here… ’cause there’s no going back!