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

Wed Jul 9 09:54:38 CDT 2003

--- Stephen Caudill <SCaudill at municode.com> 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.

With due respect to the other suggestion, I'll offer another. It's
real easy in JS to get complicated with your solution when you can do
things easily.

This suggestion can be tweaked a few ways, but you'll get the idea.

What I've done is simply pass the ID name to my function when the
link is clicked (you can go the extra mile and keep the this.href and
strip off the # if you want). I use that to get the element. Before I
do that though, I turn all questions 'off'. I do this using an array
which, yes, would have to be maintained for that page, or somehow
dynamically built. Then I simply turn the one question on. Short and
sweet.

Here is the function.

function hilite(question)
{
	var qArray = new Array('techsup', 'contact');
	// turn them all off first
	for(i=0; i<=qArray.length-1; i++)
	{
		currentQ = document.getElementById(qArray[i]);
		currentQ.style.color = "#000";
		currentQ.style.background = "#fff";
	}
        // turn the one we want on
	currentQ = document.getElementById(question);
	currentQ.style.color = "#ff3300";
	currentQ.style.background = "#ffff00";
}

Short and sweet, should work on any modern browser. Full code below
that I copied from your page to see it work. Just one way of many to
do it.

HTH
Tom
--------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 	
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" type="text/javascript">
function hilite(question)
{
	var qArray = new Array('techsup', 'contact');

	for(i=0; i<=qArray.length-1; i++)
	{
		currentQ = document.getElementById(qArray[i]);
		currentQ.style.color = "#000";
		currentQ.style.background = "#fff";
	}

	currentQ = document.getElementById(question);
	currentQ.style.color = "#ff3300";
	currentQ.style.background = "#ffff00";
}
</script>
</head>
<body>
<h1>Frequently Asked Questions</h1>
<hr />

<h3>Questions on:</h3>
<h4>Contacting MCC Innovations</h4>

<div class="faq">
<a href="#techsup" onmousedown="hilite('techsup')">Q: When I contact
MCC Innovations Technical Support what information do I have to
provide them?</a><br />
<a href="#contact" onmousedown="hilite('contact')">Q: How do I
contact MCC Innovations?</a>
</div>

<h2>Contacting MCC Innovations</h2>
<dl>
	<dt id="techsup">Q: When I contact MCC Innovations Technical Support
what information do I have to provide them?</dt>
	<dd>A: Please have the following information ready when contacting
MCC Innovations Technical Support:
		<ol>
			<li>Product name and version number, plus LSAP number if you know
it</li>
			<li>Description of any hardware involved (e.g. scanner, CD burner,
SCSI card)</li>
		</ol>
	</dd>

	<dt id="contact">Q: How do I contact MCC Innovations?</dt>
	<dd>A: Ways to contact MCC Innovations Sales Support
		<ol>
			<li>If you prefer to send an E-mail inquiry to a Sales
Representative &#8211; <a
href="mailto:info at mccinnovations.com">info at mccinnovations.com</a></li>
		</ol>
	</dd>
</dl>

</body>
</html>

=====
http://www.pixelmech.com/ :: Web Development Services
http://www.DMXzone.com/ :: Premium Content Author / JavaScript / Every Friday!
http://www.maccaws.com/ :: Group Leader
[Making A Commercial Case for Adopting Web Standards]

"That's not art, that's just annoying." -- Squidward