Changing table cell color dynamically based on url

pathfinder

08-23-2002, 04:17 PM

Hi,

I have been searching high and low for a solution for a problem that I ran into. I am currently using the following script to drive a menu on the side of my page:

<SCRIPT language=javascript>
function ChangeFont(what,color) {
what.style.fontColor=color;
}

function ChangeBackground(what, color) {
what.style.backgroundColor=color;
}

function MouseOverMenu(what){
what.style.cursor='hand';
ChangeBackground(what, "#CCCC66");}

function MouseOutMenu(what){
what.style.cursor='default';
ChangeBackground(what, "#669966");
}

function Click_URL(url) {
location.href = url
}
</SCRIPT>

The script is attached to this menu:

<table cellspacing=1 cellpadding=1 width=135 border=0>
<tbody>
<tr>
<td class=menuItemSide width=8 height=25></td>
<td class=menuItem onMouseOver=javascript:MouseOverMenu(this); onClick="javascript:Click_URL('index.asp')"; onMouseOut=javascript:MouseOutMenu(this); height=25> Employers Home</td>
</tr>
<tr>
<td class=menuItem width=8 height=25></td>
<td class=menuItem onMouseOver=javascript:MouseOverMenu(this); onClick="javascript:Click_URL('advantages.asp')"; onMouseOut=javascript:MouseOutMenu(this); height=25> Why work with us?</td>
</tr>
<tr>
<td><img height=0 src="../images/pix.gif" width=8 border=0></td>
<td><img height=0 src="../images/pix.gif" width=127 border=0></td>
</tr>
</tbody>
</table>

Here is the question...I want move the menu into a separate file and use it as an include, so I can gain the obvious advantages...but cannot do it now because the first <td> tag calls a style of either menuItemSide, if it is the page that is currently being viewed, or menuItem if it is not active.

Is there a way that I can dynamically change the style based on the page that is currently being viewed? In the above code, if we were to load the advantages page, the <td> would be assigned the MenuItemSide style, and the style would revert to the default MenuItem for the page that we just left in the newly loaded page?

Thanks in advance for any thoughts or help!
:confused:

ShriekForth

08-23-2002, 04:59 PM

Sure you can.

An extrenaly included .js file, can access varaibles set on the page that included it. So, include the .js file, and on each page that you include it on, make a small script at the bottom or top that will hold the menu position. Then have a function that changes the style of that "item" to be the style you want for the current page. Make sense?

<html>
<body>
<script >
your script
</script>
<td id="WhyWork" class=menuItem onMouseOver=javascript:MouseOverMenu(this); onClick="javascript:Click_URL('advantages.asp')"; onMouseOut=javascript:MouseOutMenu(this); height=25> Why work with us?</td>
rest of the menu
Content...

<SCRIPT language=javascript>
menuLocation = 'WhyWork';
highlight(menuLocation);

function highlight(item){
ChangeBackground(document.getElementById(item), "#CCCC66")
}
</script>
</body>
</html>

Add that last bit of script to the bottom of each page, and place into menuLocation the id of the cell you want to be defaulted to be highlighted. Then you can use the menuscript in an include, and have the menu item selected by the client. You could also set a class instead of using the changeBackground function I recycled there. You will need to add a unique ID to each of the cells that you have for your menu, and on each page set that menulocation, but it does get the menu out of the page and into a cental place.

Vaugely clear?

ShriekForth

pathfinder

08-23-2002, 05:13 PM

Let me give it a shot, but it seems to make a lot of sense! I knew there had to be a more easy way to do it - much like you suggested, but all of the ideas I was coming across tended to be to complex.

Stay tuned, I will update you...

Thanks for the timely advice!

pathfinder

08-23-2002, 05:51 PM

Just wanted to let you know that your solution worked like a charm!

Thanks for the sage advice!

Pathfinder
:thumbsup:

ShriekForth

08-23-2002, 06:10 PM

No problem, I did not have the exact code, but I did do that one one of my projects. I figured it would be close.

ShriekForth