Click to See Complete Forum and Search --> : click link makes cell background color change?
etard
03-24-2004, 05:13 PM
okay - I have built a long FAQs list that has the questions (Q) at the top and the answers (A) down below. Each Q is linked to the A with an anchor tag naturally. As well, when a person mouse over an A, the table cell the A is in becomes highlighted by using this code:
<tr ONMOUSEOVER="this.style.backgroundColor='#CCCCCC'" ONMOUSEOUT="this.style.backgroundColor=''">
this works awesome. BUT, then I wondered, is there a way so that when they click the link on the Q they want to read, it will still link down AND trigger the cell of the A to change the background rather than mousing over the cell as it is now. This way, there is a visual que on that loooong page of FAQs that 'here' is your A. It is essentially like a disjointed rollover, but I am having trouble making it happen. Any thoughts? I am thinking you must somehow id the cell (ID=1), and then on the click of the link the link needs to activate that correct cell to change colors.
I'm thinking, yeah. Just set a variable to the index of the TR, and onclick set the variable's value to that of the specific TR, and run a function to highlight it. Do you have this online, and do you need help writing the script? It would help if you had it online so I could see what you were doing and wouldn't have to worry about what colors should be changed to what other colors, and so on.
etard
03-24-2004, 07:42 PM
do not have it online.
I was thinking the same thing, but I am having a heck of a time trying to write it all out in JS. some help would be good. just use any colors you want as once I see it, I will be able ot follow it. But, I have failed thus far. Thanks!
Well, what you want to do is just use onclick="id = 0; if(sel==false){sel = true;} else {sel=false;} if(sel==false){document.getElementsByTagName('TR')[id].style.backgroundColor='yellow';} else {document.getElementsByTagName('TR')[id].style.backgroundColor='red';}" for the first TR and so on down the line, changing id = 0 to id = 1, 2, 3, etc...
Be sure to specify sel=false in your <HEAD> JavaScript.
[J]ona
etard
03-24-2004, 09:26 PM
I am missing something here.
If this is the correctly implemented code for the TR
<tr onclick="id = 0; if(sel==false){sel = true;} else {sel=false;} if(sel==false){document.getElementsByTagName('TR')[id].style.backgroundColor='yellow';} else {document.getElementsByTagName('TR')[id].style.backgroundColor='red';}"><td>highlight this cell when link is clicked</td></tr>
how do you call it to act from the text link above it? I tried something like this to call the TR code you provided. but no joy
<a href="#1" id="0">click here</a>
lastly, sorry, not sure what you mean by this "Be sure to specify sel=false in your <HEAD> JavaScript"
Paul Jr
03-24-2004, 09:59 PM
Well, I dunno if this'll work for you or not, but I figured I'd give it a shot. ;)
***EDIT***
Granted, I am using links, and they aren't actually leading anywhere, but all that can be changed to fit your needs, I believe.
***EDIT 2***
Changed attached file. There was an error. :o
etard
03-24-2004, 10:14 PM
Paul -
That seems to be it! Awesome, I appreciate it! Let me look through the code, but it seems A LOT cleaner than what I was trying to do. well done.
Paul Jr
03-24-2004, 10:17 PM
Originally posted by etard
Paul -
That seems to be it! Awesome, I appreciate it! Let me look through the code, but it seems A LOT cleaner than what I was trying to do. well done.
Awesome. I re-read your first post more carefully, and realized it'd need some modifying, as you are using tables not only for the answers, but for the questions, too. The script highlights the td whose array index is passed with the onclick="highlight('0');" with the number being the <td>'s array index in the table with the id "faq". So if you have other cells, things are gonna need to be changed.
Also, check my second edit in my first post. :o
etard
03-24-2004, 11:03 PM
I was just getting ready to post about this after toying with it for 1 hr. yes, there is an issue if you are using many tables and cells to control layout. the original code worked if it was the only table and cell on the entire page, but it wil not be. even giving the other tables different ID's did not help. I will try this new code.
etard
03-24-2004, 11:15 PM
that was it
your change addressed the fact that it needs to not worry about other TD's in the many tables on the page and just pay attention to the TD's relative to the table with ID="faq"! fantastic.
FYI
On a Mac with OS X 10.3 it worked in the following browsers: Safari, Camino, FireFox, IE, NS.. but not in Opera. That is a great result though. if you ad anchor links, even if the highlight is not triggered, the browser will still scroll down to the A anyway, so it acts like most any other FAQs seen out there. I will report back about PC browser tests.
update
for those that care, this code worked well in XP on IE, newer NS, and Opera.