Hilighting Fragments with JavaScript

Script to hilight document elements according to the URI # anchor.

This article dissects this code and demonstrates what it is useful for.

Introduction

A few months ago, whilst working on the WAVLAN [wavlan.gmm.com.au] site, I hit a problem. In a feeble attempt to be funny, rather than subtly having a go at committee members by name on the front page, I was linking to their names [wavlan.gmm.com.au] in the contact page.

The problem was thus : Just which person was I having a go at?

Depending on which name I had selected, it was not easy to work out which name I was linking to. Even worse was when I linked to one of the names at the bottom of the page, but because the page wasn't long enough, it positioned itself on another name. Damnit, my joke just failed!

Something had to be done to avert this major crisis...

Our Mission (should I choose to accept it)

Ideally, I needed something that would hilight the DIV element dynamically to show clearly who I was talking about. I thought of using some server-side scripting, but that would have meant more logic in there which just didn't seem worth it. Besides, I felt like tinkering with JavaScript and generally making more work for myself.

Of course, silly me didn't think to Google for it at the time - I found today that David Dorward [dorward.me.uk] wrote something to do this [dorward.me.uk] back in 2003.

Worth nothing is that whilst David's code works under IE (my script does not - and I haven't tested in any browsers other than Firefox), my script does have the advantage of mangling <a> elements to call the routine even for navigation of anchors within a page (check out the Contents menu above to see what I mean).

My apologies to David, I previously didn't note that his script does actually do the hilighting onclick. As such, his script is a little more robust than mine, with a few differences in features.

linkHilight.js

The script, which has recently been updated to use id attributes rather than silly <a name="foo"></a> elements (see my earlier discussion somewhere around here), can be found here [blog.griffin.homelinux.org].

It's released under a Creative Commons ShareAlike [creativecommons.org] licence, so you can do anything you like with it, so long as you give modifications back under the same licence.

Furthermore, it finds all the <a> elements in the document that have a href attribute containing a #, and adds an onclick event to cause the new element to be hilighted even for internal anchors.

The rest of this article looks into how the script works, and how to use it.

Using the Script

The script is surprisingly simple to use.

When an anchor is in the URL, the script attempts to find the element with that ID, find the first <div> element which is a parent (or the element with the ID) and change it's class to contentItemHot.

Of course, this is all customizable, which will be discussed later.

Linking

The script has been designed so as that all you need to do is add a single one-liner to your page.

Using linkHilight.js

<script src="linkHilight.js" type="text/javascript" />

Of course, those of you still back in the dark ages that are using HTML4 (-1 Troll) you'll need to do the usual stuff afterwards.

I'm sure you know what I mean...

CSS

The CSS class that the script hilights using is customizable (see here) but the default is the contentItemHot class.

Something like this is all you need :

Using default class

.contentItemHot { background: red; }

Customizing

As I mentioned earlier, the general way the script works is quite easily customizable.

Script Configuration

//Variables for the parseAnchors function
//Parent element to hilight
var ANCHOR_HILIGHT_PARENT = "div";

//Class to set element to
var ANCHOR_HILIGHT_CLASS = "contentItemHot";

Custom Parent Element

As you can probably work out, ANCHORHILIGHTPARENT is the tag name of the element we want to hilight. This needs to be in lower case, but apart from that, there are no restrictions.

Custom Hilight Class

Similarly, the ANCHORHILIGHTCLASS variable denotes the class that the element will be changed to.

Conclusion

I hope you find this script useful, and if you have any feedback or comments, don't forget to drop them in the archive.

It's not perfect, and there are still quite a few things I'd like to get working (IE support for example), but it does offer a nice way for me to continue harassing my fellow committee members without confusion.

Oh, and nothing gets broked if it doesn't work!