Layout problem JSwitch menu in IE 6

[Daniel Tulp]

1) Script Title:
Switch Menu II (or XPmenu)

2) Script URL (on DD):
http://dynamicdrive.com/dynamicindex1/switchmenu2.htm
http://www.jswitch.com/scripts/show/1 (seems parked now, edited 18-12-07)

3) Describe problem:
For starters, when I'm breaking forum rules, please let me know.
I had already posted this: http://www.dynamicdrive.com/forums/s...ad.php?t=27503
but as I can't change the title of the post and this was a bad title, I decided to post this one.

I want two different backgrounds in two different menu's created by the JSwitch menu script (so just one instance of the script). One with a brown background and one with a red background.

I managed to get it working in FireFox, but IE 6 ignores the topItemOver and topItemCloseOver, because these are generated in the JS.

What I did was introduce id tags to the divisions I wanted to have the second layout (in this case with a red background). As id tags cannot have the same value on the same page, this does have it's drawbacks, so if someone has another solution, please let me know.

Please see http://www.dynamicdrive.com/forums/s...ad.php?t=27503 for scripts.

What I tried to do to solve it was add:

<script type="text/javascript">
   document.getElementById("red2").style.backgroundColor="white";
   </script>

to menu.htm.

This does work, but I only want it to work on the onmouseover event.
I probably need to add things to xpmenuv24.js, I tried in function ChangeStyle() but that didn't work.

So basically two questions:
How can I call topItemOver and topItemCloseOver (both a class and not id property) in Javascript?

How can I change their background to #CC3333?

[ddadmin]

Actually, using the attached files, the script doesn't expand/ collapse in Firefox either, so it's kind of hard for me to see what you're trying to accomplish. There are quite a few scripting errors that pop up.

It's probably easier for you to take a step back, and simply describe in general what you're trying to do, using the original script as a reference point. For example, on the original script, there are two collapsible headers. Are you basically asking how to customize it so the second header uses a different style than the first?

p.s: This script is rather limiting in a variety of ways, and probably will be replaced in the next few weeks with something a lot more robust.

[Daniel Tulp]

Actually, using the attached files, the script doesn't expand/ collapse in Firefox either, so it's kind of hard for me to see what you're trying to accomplish. There are quite a few scripting errors that pop up.

ok, weird, but working files can be seen here:
http://www.w-e.nl/menutest/fr_content.htm (this link will not be included permanently)

Are you basically asking how to customize it so the second header uses a different style than the first?

Yes that is exactly what I'm trying to do, see the url above, it should be pritty obvious what I'm trying to do there

p.s: This script is rather limiting in a variety of ways, and probably will be replaced in the next few weeks with something a lot more robust.

ok, that sounds nice, will it be the same xpmenu script, or something completely different with the same functionality?

[ddadmin]

Yes that is exactly what I'm trying to do, see the url above, it should be pritty obvious what I'm trying to do there

Actually, looking at the new link, I'm more confused than before. The menu on that page does work, both in terms of expanding/collapsing, plus two different color themes (brown and red). Why do you feel you need to duplicate the same id attribute ('red1") for more than one element? If this is so you can style the two themes differently, you should simply use an additional CSS class name for the 2nd theme to accomplish what you want. For example, assuming the below chunk is the HTML for the 2nd themed menu items:

    <div id="red1" class="mainDiv" >
        <div id="red2" class="topItemRed bigbold">overheid</div>        
        <div id="red3" class="dropMenu bigbold" ><!-- -->
        	<div class="subMenu" style="display:none;">
        		<div class="subItem"><a href="#">planadvies</a></div>
        		<div class="subItem"><a href="#">implementatie</a></div>
        		<div class="subItem"><a href="#">onderzoek</a></div>

                </div>
        </div>
    </div>

I can compound multiple CSS class names, so these menu items not only use the default CSS class name shared across the entire menu, but further customized based on the CSS class name "bigbold".

ok, that sounds nice, will it be the same xpmenu script, or something completely different with the same functionality?

No, it will be a completely different script, but with a similar functionality as xpmenu.

[Daniel Tulp]

I did not know there could be spaces in class names, I'll try and report back, thanks for checking it out

[Daniel Tulp]

Actually, looking at the new link, I'm more confused than before. The menu on that page does work,....

Yes, but look at it with internet explorer 6, and you'll see it doesn't work there.

Why do you feel you need to duplicate the same id attribute ('red1") for more than one element?

was just for testing, when going live, for every red menu, the number would be increased (so red1, red2, red3 to red9).

If this is so you can style the two themes differently, you should simply use an additional CSS class name for the 2nd theme to accomplish what you want. For example, assuming the below chunk is the HTML for the 2nd themed menu items:
[...]
I can compound multiple CSS class names, so these menu items not only use the default CSS class name shared across the entire menu, but further customized based on the CSS class name "bigbold".

How would I then call this in the cascading stylesheet?

<div class="mainDiv" >
        <div class="topItem red"  >overheid</div>        
        <div class="dropMenu" ><!-- -->
        	<div class="subMenu" style="display:none;">
        		<div class="subItem"><a href="#">planadvies</a></div>
        		<div class="subItem"><a href="#">implementatie</a></div>
        		<div class="subItem"><a href="#">onderzoek</a></div>
                </div>
        </div>
</div>

.topItem red{
background-color:#CC3333;
}

does not seem to have any effect in ie6 and ff, topItemRed also does not work

this is because the classname is changed in the javascript
when I inspect the html in firefox with the FireBug extension, I can see that the classnames are topItemClose and topItemCloseOver, although I had changed it from topItem to topItemRed, so this is not the solution, that is why I started using the id="red2", which does work in firefox, but not in internet explorer 6 (haven't tested in ie7 as of yet)

I hope my method makes sense to you now

[seric]

As the author of the script I am sorry to say that I have not had the proper time to support the script. I will look over your problem and get back to you though. The script would be much better if it were redesigned and rewritten because I was fairly new to javascript concepts at its inception.

[seric]

unfortunately, to support this the script needs to be hacked a fair amount. The problem lies in the fact that many operations in the script are based upon the class names of divs (very bad idea huh). To tell you the truth it would probably be much better to rewrite the script so that the visual portion is complete separated from the logic. Which is something I can do, but because of time constraints its going to take at least a week, if not more.

So the question becomes, how much of a hurry are you in?

[Daniel Tulp]

well, not that much of a hurry, but I'd like to tackle things in the first weeks of january, I know with christmas coming up and everything this is about a week

I really appreciate you doing this, I know what's it like to support scripts (rsgallery2.net) but I'm not a javascript guy, it looks cool, so I just might dive into it, but at this point, I won't be able to assist you

bug hunting of course I can do, killing them is another

perhaps ddadmin can help, he told me:

p.s: This script is rather limiting in a variety of ways, and probably will be replaced in the next few weeks with something a lot more robust.

[ddadmin]

perhaps ddadmin can help, he told me:

No ETA on when the new script would be added (never a good idea to make promises like this), but I'd say by the end of January is a reasonable target.