DHTML Menu Editing

[sanddrag]

I made this little DHTML menu with a menu builder tool I have and I was wondering how to change something. Go ahead and take a look at the menu here: www.team696.org I want the menu to be the dark gray color (like when you mouseover) all the time in the cell for the page you are on. Like if you are on the Contact page, I want only the Contact cell in the menu to be dark gray and the rest to be light gray. Could someone please view my source code and tell me what to change? I have the same code for the menu on all the pages of the site. Thanks.

[piotrm]

add this to around line 60-65:

<script type='text/javascript'>

var this_page = "Home"; // this is added; change this on every page to reflect which page this is; make sure you enter exactly what that page's menu text is (case sensitive and all that)

function Go(){return}

and around line 520 - 526 (after adding the previous stuff):

		c=FontSubLowColor;
		d=FontSubHighColor}
	if (MemVal == this_page) {   // this is added
	        a=HighBgColor;       // this is added
	}                            // this is added
	this.LoBck=a;
	this.LwFntClr=c;

hope this helps; this menu thing looks quite complicated and such...

[sanddrag]

Wow, thanks for the quick help. I got it working http://team696.org/menutest.html Now, I just need one more thing, for the text to be white in that dark gray cell. Any help?

[piotrm]

sure; around line 520-527 (in your new modified example):

		c=FontSubLowColor;
		d=FontSubHighColor}
	if (MemVal == this_page) {   // this is added
	        a=HighBgColor;       // this is added
                c=FontHighColor;     // this is added (addition #2)
	}                            // this is added
	this.LoBck=a;
	this.LwFntClr=c;

good luck

[sanddrag]

I just got it by myself actually by just tinkering around a bit before I saw your post. I did the exact same thing you just did. Thanks for your help.

[robot180]

I have a similar question. If you are making a menu, like the one on that website, how would you make the hover, color change effect? It looks like you could use the onMouseOver event, but how would you get it to change back after the mouse leaves it? Is there an event that is the opposite of onMouseOver? If not, then how do you do it?

[piotrm]

yes, the opposite of onmouseover is onmouseout, its used just like onmouseover is

[jonathan lall]

There are a lot of online tutorials regarding this aspect of Javascript, especially in the area of DHTML menus. I personally try not to use the things (it's all about pure CSS menus, which are structured way better and make up for just about all of JS's shortcomings), but I've read some pretty informative and interesting stuff about JS and they include extensive coverage of event handlers like onMouseOut. I'd recommend reading some of that if you're into Javascript.

[Raven_Writer]

Originally posted by jonathan lall
There are a lot of online tutorials regarding this aspect of Javascript, especially in the area of DHTML menus. I personally try not to use the things (it's all about pure CSS menus, which are structured way better and make up for just about all of JS's shortcomings), but I've read some pretty informative and interesting stuff about JS and they include extensive coverage of event handlers like onMouseOut. I'd recommend reading some of that if you're into Javascript.

http://www.robocards.org/design/2/ uses overlib (I'm not sure of the address, it's in the source though). It's pretty simple to use in my opinion...it uses onmouseover & onmouseout. It's complete javascript though. [Edit: This is not the offical site btw, just a design I'm working on]

[sanddrag]

Just FYI, that robocards link above has a picture that takes forever to load. Maybe it's because it's 3520x2400

[Raven_Writer]

Originally posted by sanddrag
Just FYI, that robocards link above has a picture that takes forever to load. Maybe it's because it's 3520x2400

Heh, yea...I've got a more-resonable sized image on my comp I keep forgetting to upload /notes to do that tomorrow since I'm gettin off the comp. soon

[robot180]

Thanks for all that information, but I think I can figure out how to use onMouseOut. Just one quick question to avoid going through all the tutorials, Does the onMouseOver and onMouseOut have to go on every td tag in the table?

[Raven_Writer]

Originally posted by robot180
Thanks for all that information, but I think I can figure out how to use onMouseOut. Just one quick question to avoid going through all the tutorials, Does the onMouseOver and onMouseOut have to go on every td tag in the table?

Unless you want it to stay that color when you move the mouse over it, yes...Also, it's a good idea to add a "return false;" [w/o the quotes] after whatever you do in both (it's either return false or return true).

[robot180]

I thought that return flase only applies to onClicks used with hyperlniks, so that it doesn't jump back to the top of the page.

[Raven_Writer]

Originally posted by robot180
I thought that return flase only applies to onClicks used with hyperlniks, so that it doesn't jump back to the top of the page.

I'm not sure on that, you are probably right though {I'm not good w/ JavaScript'in and such, just design}.