[thelist] A JavaScript query

[Joshua Olson]

----- Original Message ----- 
From: <john at johnallsopp.co.uk>
Sent: Sunday, December 28, 2003 1:37 PM


> Thanks Joshua
>
> > Your code is suffering from what we lovingly refer to as "classitis".
> > This means that there is an over abundance of class assignments to
> > elements on the page.
>
> Ah, yes, I got the impression that was a good thing from the first page of
> a Meyer book. Obviously incorrectly :-)

To which book are you referring?

> Did your work actually solve the problem (which is, that here
> <http://www.johnallsopp.co.uk/test/test1/index2.html>, in Mozilla the
> second line of the menu (which appears upon rollover of the first line)
> appears correctly in green, but in IE6/W98, it appears in the default red
> which is wrong)?

Using the exact code that I pasted into the post, the links in the second
line were green in IE, which I assume is the effect you were looking for.

> If you removed the rollover parts, that's where my problem is, so I guess
> not. I've worked for a couple of hours on tidyup stuff as you suggest but
> I've not solved the problem.

Once the code is tidied up there should be almost no need to set the classes
using JavaScript.

But, if you do want to set the class for elements on the page, you can set
it directly using the className attribute as apposed to using the
setAttribute method.

objRef.className = 'myclass';

As opposed to:

objRef.setAttribute('class', 'myclass');


It seems as though you may be doing a lot more work than is necessary to
make this menu work.  Two simplifications come to mind.

For each of the links in the second nav, you already have placeholders.  So,
as opposed to dynamically creating new links, consider simply changing the
display, inner text, and target of the existing links in the 2nd row on each
rollover on the top nav.

Alternatively, you could fully construct the second row of the nav in html
and then hide or display the second rows depending on which top nav item is
rolled over.  Mozilla doesn't handle hiding and showing rows in a table very
well via css, so in the following example I put the second nav in separate
div's and hide those instead.  The JS has been reduced to two very small
functions.  The effect is similar to what you are looking for, I think.

I've posted the example code here:

http://concepts.waetech.com/2_tier_nav/

(Please note that I'll change the colors and links soon after you've taken a
look at the navigation so that it doesn't look like what you're working on)

There are a couple notable benefits to this solution:

1.  The entire nav structure is indexable by robots.

2.  The nav works sans-JS and sans-CSS.  It doesn't work sans-JS only since
the CSS hides the 2nd level options.  It would be possible to work around
this if the initial hiding of the 2nd level items was triggered via the
onload event of the body, though, instead of within the CSS directly.

3.  It's faster and less complex than fully dynamic solutions, which is
always a good thing.

4.  You have more flexibility if you want to add graphics, icons, on custom
events on rollover on individual items.

Best of luck,

<><><><><><><><><><>
Joshua Olson
Web Application Engineer
WAE Tech Inc.
http://www.waetech.com/service_areas/
706.210.0168