Chief Delphi - DHTML Menu Editing

Page 1 of 2

Show 100 post(s) from this thread on one page

Chief Delphi (http://www.chiefdelphi.com/forums/index.php)

- Website Design/Showcase (http://www.chiefdelphi.com/forums/forumdisplay.php?f=64)

- - DHTML Menu Editing (http://www.chiefdelphi.com/forums/showthread.php?t=21319)

sanddrag

12-07-2003 23:31

DHTML Menu Editing

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

13-07-2003 00:04

add this to around line 60-65:

Code:

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

Code:

                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

13-07-2003 00:23

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

13-07-2003 00:28

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

Code:

                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

13-07-2003 00:32

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

03-08-2003 01:33

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

03-08-2003 01:42

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

jonathan lall

03-08-2003 16:56

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

03-08-2003 19:00

Quote:

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

03-08-2003 20:50

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

Raven_Writer

03-08-2003 20:51

Quote:

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 :eek: :D

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

03-08-2003 23:42

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

04-08-2003 10:26

Quote:

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

04-08-2003 17:01

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

04-08-2003 18:18

Quote:

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}.

All times are GMT -5. The time now is 01:40.

Page 1 of 2

Show 100 post(s) from this thread on one page