[thelist] [JS] hilite function for in-page link

[David Dorward]

On Wed, Jul 09, 2003 at 09:47:51 -0400, Stephen Caudill wrote:

> I hope someone can clear me up on this.  I have a relatively short
> FAQ page with in-page links (questions) at the top and answers at
> the bottom.  At higher monitor resolutions, since the page doesn't
> scroll much, it's difficult to (at a cursory glance) tell which
> answer has been linked to (even though the question is reiterated
> above it).  So my thought was to simply change the color of the
> question once a link had been clicked... this has proven more
> difficult than I expected.

> If anyone could take a look and maybe point me in the right
> direction, I'd greatly appreciate it.

I had the same problem a while back, and put together a solution. It
doesn't require editing the HTML at all, just including the script (it
dynamically rewrites the document to add onclick events where
appropriate). 

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

You also need to define the "fragment" class in your style sheet.

.fragment {
  background-color: yellow;
  color: black;
}

/*********** Start of JavaScript Library *********/

//*** This JavaScript library is copyright 2002 by Gavin Kistner and Refinery; www.refinery.com
//*** Re-use or modification permitted provided the previous line is included

//Adds a new class to an object, preserving existing classes
function AddClass(obj,cName){ KillClass(obj,cName); return obj.className+=(obj.className.length>0?' ':'')+cName; }

//Removes a particular class from an object, preserving other existing classes.
function KillClass(obj,cName){ return obj.className=obj.className.replace(new RegExp("^"+cName+"\\b\\s*|\\s*\\b"+cName+"\\b",'g'),''); }

/*********** End of JavaScript Library ***********/

//*** This JavaScript highlight code is copyright 2003 by David Dorward; http://david.us-lot.org
//*** Re-use or modification permitted provided the previous line is included and
//*** modifications are indicated

/* Fragment Highlight */

/* Indicates area that has been linked to if fragment identifiers have
 * been used. Especially useful in situations where a short fragment
 * is near the end of a page. */

var fragHLed = '';
var fragExclude = ('header');

Array.prototype.search = function(myVariable) { for(x in this) if(x == myVariable) return true; return false; }

/* Highlight link target if the visitor arrives at the page with a # */

function fragHLload() {
    fragHL(location.hash.substring(1));
}

/* Highlight link target from an onclick event after unhighlighting the old one */

function fragHL(frag) {
    if (fragHLed.length > 0 && document.getElementById(fragHLed)) {
	KillClass(document.getElementById(fragHLed),'fragment');
    }
    if (frag.length > 0 && document.getElementById(frag)) {
	fragHLed = frag;
	AddClass (document.getElementById(frag),'fragment');
    }
}

/* Add onclick events to all <a> with hrefs that include a "#"  */

function fragHLlink() {
    if (document.getElementsByTagName) {
	var an = document.getElementsByTagName('a');
	for (i=0; i<an.length; i++) {
	    if (an.item(i).getAttribute('href').indexOf('#') >= 0) {
		var fragment = an.item(i).getAttribute('href').substring(an.item(i).getAttribute('href').indexOf('#') + 1);
		if (fragExclude.search(fragment)) {
		    var evn = "fragHL('" + fragment + "')";
		    var fun = new Function('e',evn);
		    an.item(i).onclick = fun;
		}
	    } 
	}
    }
} 

/* Init the script */

window.onload = function(){
    fragHLload();
    fragHLlink();
};


-- 
David Dorward                                     http://david.us-lot.org/
         Redesign in progress: http://stone.thecoreworlds.net/
  Microsoft announces IE is dead (so upgrade):
http://minutillo.com/steve/weblog/2003/5/30/microsoft-announces-ie-is-dead