HTML Dog

Skip to navigation

Suckerfish :target

By Patrick Griffiths and Dan Webb.

CSS3 brings with it quite a funky little pseudo-class, :target, which can be used to highlight a targeted page anchor:


h2:target {
	color: white;
	background: #f60;
}

Basically, using the above as an example, if someone were to select a link in a page with href="#balloon" and in that page was an h2 element with the attribute id="balloon" then not only will the page jump to that element, it will also apply the styles specified by the h2:target selector.

This pseudo-class is already supported by the Mozilla family of browsers. To get the same results in Internet Explorer, this Suckerfish should work a treat:


sfTarget = function() {
	var sfEls=document.getElementsByTagName("H2");
	var aEls = document.getElementsByTagName("A");
	document.lastTarget = null;
	for (var i=0; i<sfEls.length; i++) {
		if (sfEls[i].id) {
			if (location.hash==("#" + sfEls[i].id)) {
				sfEls[i].className+=" " + cls;
				document.lastTarget=sfEls[i];
			}
			for (var j=0; j<aEls.length; j++) {
				if (aEls[j].hash==("#" + sfEls[i].id)) aEls[j].targetEl = sfEls[i]; aEls[j].onclick = function() {
					if (document.lastTarget) document.lastTarget.className = document.lastTarget.className.replace(new RegExp(" sftarget\\b"), "");
					if (this.targetEl) this.targetEl.className+=" sftarget"; document.lastTarget=this.targetEl;
					return true;
				}
			}
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfTarget);

This 'sfTarget' function is a little more complex than the other Suckerfish functions. This is because, in order to replicate the behaviour, the function must perform 3 actions:

  1. On load, if the page URL contains an anchor (for example, '#something') then the 'sftarget' class must be applied.
  2. If a target is already activated and another anchor is clicked the previous target must be reverted to normal by removing the 'sftarget' class from it.
  3. If a link containing an anchor is selected it must add the 'sftarget' class to the anchors target.

So, let's have a stroll through the 'sfTarget' function to see what's going on.

  1. Firstly, using the standard Suckerfish method, we collect up the elements we want the function to work on. In this case, we are going to collect up all the h2 elements in the document (var sfEls=document.getElementsByTagName("H2");).
  2. We then need to collect up all the a elements as we will need to work on those later too (var aEls = document.getElementsByTagName("A");).
  3. Then we create an empty variable attached to the document element (document.lastTarget = null;) that will hold a reference to the last target element that was activated. Later, we'll use this to deactivate it before activating a new target element therefore keeping only one target element active at a time. Now we'll start looping through all of the h2 elements we collected above to apply the behaviour.
  4. Firstly, we will find out if the page URL contains an anchor to the element in question. We can find this out by examining the location.hash property. If it contains a reference to the id of the element in question then we need to add the 'sftarget' class to it.
  5. Now we get to the meat - much like the other Suckerfish functions we go about assigning event handlers to the elements in question but this time we must assign the onclick handler to the anchor that points to the target rather than the target itself. Secondly, the anchor must know who it's target is so that it can add 'sftarget' to its classname. We do this by looping through each anchor element and checking if it's hash property (the target it links to) is the same as the target in question's id. If it is we give it a reference to the target element ('targetEl') and apply the onclick event handler. Note that we do not need to use the onkeypress event handler to accommodate users who do not have pointing devices - onclick will work with key presses just as well.
  6. Inside the onclick handler, we turn off the last target, if there is one, by removing the 'sftarget' class and then turn on the new target by adding the 'sftarget' class to 'targetEl'. Finally, we return true so that the link acts as normal.

As with all of the other Suckerfish methods, once the JavaScript is implemented, all you have to do is replicate the :target pseudo-class selectors:


h2:target, h2.sftarget {
	color: white;
	background: #f60;
}

Examples

Perhaps the simplest beneficial application of such a method would be when there are a lot of headings in a page that are linked to, and a little extra cue would help.

If the anchors are blocks of code instead of headings, then a whole area can be restyled (rather than just a heading). The comments on the HTML Dog Blog now employ this approach for example.