How to make a selected link from a list of links bold? 2

[royboy75]

Hello,

Suppose I have a frameset with a menu on the left with some links and a data on the right. Pressing a link in the menu on the left opens the relevant html page on the right.
I would like to add the very common effect that bolds the selected link now presenting it's page, same as in the list of threads every user has in his left menu in this web site. How do I do that?

 

[Foamcow]

Give each link an id then use javascript to apply a style or, better still, a css class to it.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[royboy75]

Can you show me a simple example using css please?

 

[nickdel]

royboy75, you still need to use javascript

<style>
.LinkBold{
font:bold 10px verdana;
}

.LinkNorm{
font:10px verdana;
}

</style>

<script language="javascript">

function ChangeLinkStyle(WhichLink){
document.getElementById(WhichLink).className = "LinkBold";
}

</script>

<a href="[URL unfurl="true"]www.tek-tips.com"[/URL] class="LinkNorm" id="Link1" onclick="ChangeLinkStyle(this.id);)>Hello!</a>

That should work

Cheers

Nick

 

[nickdel]

oops the id I used is obviously a reserved word on here!

<a href="[URL unfurl="true"]www.tek-tips.com"[/URL] class="LinkNorm" id="ThisLink" onclick="ChangeLinkStyle(this.id);)>Hello!</a>

Nick

 

[royboy75]

Thanks Nick!
The question now is how do I go over the rest of the links in the page to put them back to LinkNorm so that only the one that was clicked will be bold?

 

[nickdel]

I suppose the quickest way would be to give each link a consistent ID. i.e. ID="MyLinkID1", ID="MyLinkID2"

Then we call a little javascript loop to set them all to normal before setting the selected on to bold.
Add this before the "document.getElementById..." in the code above

for (i=1; i<=10; i++)
{
document.getElementById('MyLinkID'+i).className = "LinkNorm"
}

You need to change the "10" part of "i<=10" to the number of links you want to loop through.

 

[monksnake]

I'd go about it like this:

var anchorArray = document.getElementsByTagName("a");
var anchorArrayLength = anchorArray.length;
for (a = 0; a < anchorArrayLength; a++) {
   anchorArray[a].className = "LinkNorm";
}

That way you don't have to change any id's and it also runs faster.

<.

 

[nickdel]

I agree, use monksnakes, thats much better... must be my coffee time!

 

[royboy75]

Thanks again but I am planning to embed this in many pages and I don't know the number in advance. What I do know though is that all the links will have this id: link1, link2, link3...

 

[nickdel]

yeh, thats why I said use monksnakes code instead... his just looks for all <a> tags...

Nick

 

[royboy75]

Thanks guys perfect and elegant solution!

 

[royboy75]

One last problem guys: The code works great but if I take it our to a js file and add a decleration in my html for it like this:
<script type="text/javascript" src="javascripts/menuStyle.js"></script>

I get errors.
Any idea why?

 

[monksnake]

Do you have <script> tags in your external JS file?

If so, you need to remove them.

Another thing is to make sure your path is correct.

<.

 

[royboy75]

My path is correct and no <script> at the js file, here it is:

function ChangeLinkStyle(selectedLink)
{
	document.getElementById(selectedLink).className = "LinkBold";
	var anchorArray = document.getElementsByTagName("a");

	for (i=0; i<anchorArray.length; i++) 
	{
		if (anchorArray[i].id != selectedLink)
		{
   			anchorArray[i].className = "";
   		}
   	}
}

 

[royboy75]

Wait guys, my path wasn't correct! my fault!

 

[nickdel]

Roy, regarding you code above. You need to put

document.getElementById(selectedLink).className = "LinkBold";

after you do your loop, otherwise your setting it to bold and then setting it to nothing.

Nick

 

[royboy75]

That's why I have the if part but you're right setting it after the loop without the if is indeed simpler!