ansaurus

Question

Changing the color of a selected link that is embedded in a table.

Answer 1

A:

Is there an error or is there just nothing happening? A good first step if you are a javascript beginner is to use a tool like Firebug so you see detailed error messages, and you can add in console.log statements to see what's going on while you run your code.

lacker 2008-11-01 21:04:49

Answer 2

A:

By ‘in tables’ do you mean putting each link in its own cell? Because that would make this line:

var siblings = el.parentNode.childNodes;

fail to select other links outside of the cell. You'd have to find another way to signal which element is the link container.

bobince 2008-11-01 21:09:01

Answer 3

A:

there is no error, The links are changing to the "selected" class, but when another link is selected, the old links are keeping the "selected" class instead of changing to "unselected". Basically, as far as i can tell, its functioning like a vlink attribute, which is not what i'm going for.

And yes, the links are all in different cells, how would you suggest i change the code so that it works correctly?

Thanks a lot guys.

2008-11-01 21:19:09

Answer 4

+1 A:

You're looping through the siblings. If the links are in separate <td>'s then they're no longer siblings.

You can loop through all the links like this:

document.onclick = function(evt)
{
    var el = window.event? event.srcElement : evt.target;
    if (el && el.className == 'unselected')
    {
     var links = document.getElementsByTagName('a');
     for (var i = links.length - 1; i >= 0; i--)
     {
      if (links[i].className == 'selected')
       links[i].className = 'unselected';
     }
     el.className = 'selected';
    }

    return false;
}

I've also added a return false; at the end of the function to stop you going to '#'

Greg 2008-11-01 21:33:03

Answer 5

A:

you're my hero.

2008-11-01 21:44:41

Answer 6

A:

Ok, actually, I spoke too soon.

 document.onclick = function(evt)
{
var el = window.event? event.srcElement : evt.target;
if (el && el.className == 'unselected')
{
    var links = document.getElementsByTagName('a');
    for (var i = links.length - 1; i >= 0; i--)
    {
            if (links[i].className == 'selected')
                    links[i].className = 'unselected';
    }
    el.className = 'selected';
 }

 return false;
}

This code you gave me works great, visually, it does exactly what I want it to do. However, It makes my links stop working.... They change color, but dont lonk to anything, and then when I remove the script, they work fine. What am i doing wrong/what do i have to change to make this work???

Also, I want to do the same thing somewhere else in my website, where the links are all in one < div> tag, separated by < p> tags. How can I make this work??

You guys are truly amazing, thank you.

2008-11-02 22:06:08

Answer 7

A:

nevermind, I figured it out.

Thanks.

2008-11-02 22:12:24

Answer 8

A:

I have to second the praise! This very problem has been vexing me and then here is the solution—nice and simple, and short. I owe someone a whole lot of beer.

2009-04-07 00:09:40

Answer 9

A:

Jeff,

How did you work out that last problem.

"They change color, but dont lonk to anything, and then when I remove the script, they work fine. What am i doing wrong/what do i have to change to make this work???"

EDIT: Ignore this....Had to delete the: return false;

2009-09-14 13:54:05

ansaurus

tags:

views:

answers:

Changing the color of a selected link that is embedded in a table.

related questions