Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing table cell color dynamically based on url

    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>&nbsp;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>&nbsp;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!

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Western US
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

    Code:
    <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

  • #3
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hey ShriekForth

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

    Thanks for the sage advice!

    Pathfinder

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Location
    Western US
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •