ID change by pb_action match

[NetMaster]

ukskc.proboards.com/

Maybe you remember this thread on support board.

Well I've managed to get everything squared away but they want the menu items to remain highlighted if they're on said page. (If they're on the home page then the home button should remain highlighted.)

I've figured out this much so far:

1) Match the function of the anchor tag with the pb_action which then causes it's parent td to have a new id that has different css assigned to it.

<style type="text/css">
<!--

.menutab{
background-color:e2e2e2;
color:#ffffff;
}

#menuitem {
width:120px;
height:65px;
}

#menuitem:hover {
background-color:#87295b;
color:white;
text-decoration:none;
}

#menuitem:hover a {
color:e2e2e2;
text-decoration:none;
}

#currentitem {
background-color:#87295b;
color:white;
text-decoration:none;
}

#currentitem: a {
color:e2e2e2;
text-decoration:none;
}

#menufont {
font-size:14pt;
}

-->
</style>


<script type="text/javascript">
//<!--

var mtds = document.getElementsByTagName('td');

for(i=0;i<mtds.length;i++){
if(mtds.className == 'menubg'){
mtds.style.backgroundColor='#e2e2e2';
mtds.innerHTML='<table border="0" class="menutab"><tr><td id="menuitem" style="border-left:0px solid #000000;"><a href="/index.cgi" class="menul"><font id="menufont">Home</font></a><br/>Homepage</td><td id="menuitem"><a href="/index.cgi?action=newestthreads" class="menul"><font id="menufont">New Topics</font></a><br/>Todays Posts</td><td id="menuitem"><a href="http://help.proboards.com/" class="menul"><font id="menufont">Help</font></a><br/>Getting Started</td><td id="menuitem"><a href="/index.cgi?action=search" class="menul"><font id="menufont">Search</font></a><br/>Site Search</td><td id="menuitem" class="member" style="display:none;"><a href="/index.cgi?action=members" class="menul"><font id="menufont">Members</font></a><br/>Member List</td><td id="menuitem" class="member" style="display:none;"><a href="/index.cgi?action=calendar" class="menul"><font id="menufont">Calendar</font></a><br/>Calendar of Events</td><td id="menuitem" class="admin" style="display:none;"><a href="/index.cgi?action=admin" class="menul"><font id="menufont">Admin</font></a><br/>Admin Controls</td><td id="menuitem" class="member" style="display:none;"><a href="/index.cgi?action=viewprofile" class="menul"><font id="menufont">Profile</font></a><br/>Your Profile</td><td id="menuitem" class="member" style="display:none;border-right:0px solid #000000;"><a href="/index.cgi?action=logout"><font id="menufont">Logout</font></a><br/>Member Logout</td><td id="menuitem" class="guest"><a href="/index.cgi?action=login" class="menul"><font id="menufont">Login</font></a><br/>Member Login</td><td id="menuitem" class="guest" style="border-right:0px solid #000000;"><a href="/index.cgi?action=register" class="menul"><font id="menufont">Register</font></a><br/>New Members</td></tr></table>';
}
}
//-->
</script>

<script type="text/javascript">
//<!--
var menutds = document.getElementById('menuitem');
var menulink = document.getElementsByTagName('a');
for(i=0;i<menulink.length;i++){
if(menulink.className=='menul' && menulink.href.match(pb_action){
menutds.id='currentitem';
}
//-->
</script>

I know I need some way of stating that the td to change is the one that contains the anchor tag but I'm not sure if I use parent/child relationship and then if that is right, how to set it up (I know append.child...I'm still confused as to the reverse process).

[Wormopolis]

does this inspire you?

<script type="text/javascript">
<!--
// Menu Button highlight on current page
// By Wormopolis
// not for distribution yet

for (bh=document.getElementsByTagName('table')[0].getElementsByTagName('a'), t=0; t<bh.length; t++ ) {
if (bh[t].href==location.href && bh[t].firstChild && bh[t].firstChild.style) {
with (bh[t].firstChild.style) {
borderColor="0000FF";
borderStyle="solid";
borderWidth="2px";
}
}
}

// -->

</script>


I use it on this site.

[NetMaster]

<script type="text/javascript">
//<!--
for(menutds = document.getElementsByTagName('td').getElementsByTagName('a'),i=0;i<menutds.length;i++){
if(menutds.firstchild.id=='menuitem' && menutds.href.match(pb_action){
menutds.id='currentitem';
}
//-->
</script>

[Wormopolis]

for loop missing closing bracket

dont comment out the <!--

[NetMaster]

I do that because when I filter it through the syntax checker it always gives me an error about the
<!--

And it doesn't work...will try some more but not today..today I get married.

[Wormopolis]

holy caramel covered apples dude! congrats!

[Wormopolis]

and you cant get a collection of elements from a collection of elements.

[NetMaster]

Okay let me first see if I understand the relationship factor.

<td id="menuitem" class="admin" style="display:none;"><a href="/index.cgi?action=admin" class="menul"><font id="menufont">Admin</font></a><br/>Admin Controls</td>

So the td would be the parentNode and would the anchor tag be the firstChild?

[Wormopolis]

correct. but this:

document.getElementsByTagName('td').getElementsByTagName('a')

isnt valid because it would be a collection of a collection. you can only get a collection from a single element or the document. it would have to be

document.getElementsByTagName('td')[n].getElementsByTagName('a')

where n is one of the items in the td collection

[NetMaster]

Okay I've been trying this two different ways and neither is working just yet:

<script type="text/javascript">
//<!--
for(menutds = document.getElementsByTagName('td')[0].getElementsByTagName('a'),i=0;i<menutds.length;i++){
if(menutds.parentNode.id=='menuitem' && menutds.href==location.href){
menutds.id='currentitem';
}
}
//-->
</script>



<script type="text/javascript">
//<!--
var menutds = document.getElementByTagName('td');
for(i=0;i<menutds.length;i++){
if(menutds.className=='menuitem' && menutds.firstChild.href==location.href){
menutds.id='currentitem';
}
}
//-->
</script>

Which way is closer to accomplishing the effect?

[Wormopolis]

the first one wouldnt work because td[0] doesnt have any links. the second one wouldnt work because td elements dont have href attributes.

you will need to scan the td elements looking for the td element you want, then scan it for the links. or do what I did above and use the first table itself.

[NetMaster]

The problem with using the first table is that I've replaced the first table completely with other tables.
So in the second one I want to find a td that has an id of menuitem and then target an anchor tag within that td which according to the relationship I established before would be the firstChild of the td element.

Targeting the anchor tag then gives me the ability to check for href=='location.href' and then target the parent element (the td) and change it's id to currentitem so the css will change.

<script type="text/javascript">
//<!--
var menutds = document.getElementByTagName('td');
for(i=0;i<menutds.length;i++){
if(menutds.className=='menuitem'){
var menulink = document.getElementsByTagName('a');
for(j=0;j<menulink.length;j++){
if(menulink[j].href=='location.href'){
menutds.id='currentitem';
}
}
}
}
//-->
</script>

[Wormopolis]

much closer. menulinks doesnt need the document collection though, just the collection of the td element you landed on

[NetMaster]

<script type="text/javascript">
//<!--
var menutds = document.getElementByTagName('td');
for(i=0;i<menutds.length;i++){
if(menutds.id=='menuitem'){
var menulink = document.getElementsByTagName('a');
if(menulink.item.href=='location.href'){
menutds.id='currentitem';
}
}
}
//-->
</script>

Would it be better to fetch the anchor tag by className? Because the script would first look for the TD and then located the first instance of the className within that td?

[Wormopolis]

dont get the document collection here

var menulink = document.getElementsByTagName('a');

get the collection for the td you stopped on

var menulink = menutds.getElementsByTagName('a');