PDA

View Full Version : Layout problem JSwitch menu in IE 6



Daniel Tulp
12-19-2007, 08:51 AM
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/showthread.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/showthread.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
12-19-2007, 10:31 AM
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 (http://dynamicdrive.com/dynamicindex1/switchmenu2.htm), 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
12-19-2007, 11:46 AM
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
12-20-2007, 02:38 AM
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
12-20-2007, 08:24 AM
I did not know there could be spaces in class names, I'll try and report back, thanks for checking it out :)

Daniel Tulp
12-20-2007, 08:53 AM
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
12-20-2007, 01:57 PM
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
12-21-2007, 04:55 AM
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? :D

Daniel Tulp
12-21-2007, 08:23 AM
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
12-22-2007, 10:59 AM
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. :)

seric
12-27-2007, 01:12 AM
I have an alpha version of the new script working. In this script the logic is separate from the interface and CSS. The script has been completely rewritten so that each menu is an encapsulated DOM object that maintains properties about its own state. It's still not finished (feature complete) but your welcome to play around with it, and please give me some feedback.

Each menu will need to be initiated using the id of the menu div tag. In addition, you must specify the menu's class names for the head (or Menu title) and the sub items. This allows you to customize each menu with different CSS selectors, however if you want you can also use the same ones. Take a look at the attached example.

You can download it here:
http://www.jswitch.com/JS3_0a.zip

var menu1 = JSMenu("menu1");
menu1.setHeadMouseStyle("head1over","head1");
menu1.setSubMouseStyle("sub1over","sub1");

Enjoy!

Daniel Tulp
01-03-2008, 09:30 PM
i'll most certainly have a look at the beginning of coming week, thanks and a happy new year

seric
01-07-2008, 01:31 AM
I now have a beta version ready. It supports the auto menu close and fading capabilities, but it doesn't support cookies. you can download it here.


http://www.jswitch.com/XPMENU30b.zip

Daniel Tulp
01-07-2008, 12:24 PM
ok, I've tested it

it looks indeed that this will be able to handle an infinite number of styles, well done

there are still a few bugs however:
- I cannot set the menu's to be closed by default, so when you visit the page, the menu's are closed:
when I set newNode.state = 2; to newNode.state = 1; then the submenu items are still shown, but when I click on the head, it doesn't close, when I click a second time it does, this is of course logical behaviour when the state = 1.

you'll probably need to add this in the functions called by state = 1 in the switch, like you had with the 2.4 version:

style="display:none;"
or
style="display:inline;"


I thought below was a bug, but it isn't, I had the wrong css filename included to the htm file

- when I set autoclose = false for all menu's (7 in total), and I close one, then I cannot click on the next head
I have added <a> tags to the head:

<div id="menu3">
<div class="head2"><a href="#">My menu 3<a href="#"></div>
<div style="background-color:lightblue;">
<ul >
<li><a href="#">hello0 </a></li>
<li><a href="#">hello1 this one is a very very long one so long that it might have to wrap a couple of times</a></li>
<li><a href="#">hello2</a></li>
<li><a href="#">hello3</a></li>
</ul>
</div>
</div>
as I also want it to link to a page

this happens because:

element.style {
height:38px;
opacity:0;
}
created by:

//setting stlyes
newNode.style.height = newNode.height;
is affecting the <div class="background1"> element of the closed menu, the height is preventing me from clicking on the head of the next menu

I would suggest that you do not include any layout attributes like height in the .js file, but all in the .css file
this class needs to be display:none; when the menu is closed, this can be combined with the previous bug and solution

I'll do the css now and see how that turns out (see next post)

Daniel Tulp
01-07-2008, 01:29 PM
- the submenu items need to have a class="sub1" etc in the <li> tag for styling

- there is no difference in styles for the head, when the menu is closed or open (headClose and headCloseOver)

seric
01-08-2008, 02:24 AM
Thanks for the feedback. I'll be putting up a revised version shortly (within a day or 2). Any other comments you might have about ease of use or ideas?

Daniel Tulp
01-08-2008, 08:50 AM
well, ease of use, I have 7 menus, this results in css code that could be simpler, this is part of my css:

#menu1 a:link, #menu1 a:hover, #menu1 a:visited, #menu2 a:link, #menu2 a:hover, #menu2 a:visited, #menu3 a:link, #menu3 a:hover, #menu3 a:visited, #menu4 a:link, #menu4 a:hover, #menu4 a:visited, #menu5 a:link, #menu5 a:hover, #menu5 a:visited, #menu6 a:link, #menu6 a:hover, #menu6 a:visited, #menu7 a:link, #menu7 a:hover, #menu7 a:visited
{
text-decoration:none;
}

.head1, .head2, .head3, .head4, .head5, .head6, .head7
{
padding:6px 19px 6px 0;
margin: 0 0 0 0;
width:119px;
overflow:hidden;
font: 11px verdana,sans-serif;
color:#A49996;
}

as you see, this gets a bit messy, but I do not see how this could be avoided

o, and there are some typos in the text in the htm file, here is the corrected text:


Each menu needs to be initiated by calling the JSMenu() function on the id of the div element. This call will return an object that you can then set properties for. You should always set the header style using the setHeadMouseStyle by passing the css classname of how the menu header should look when the mouse is over it as the first parameter and how it should look when the mouse is not over it as the second. This also should be done for the sub menus with setSubMouseStyle.

There are 2 additional properties you can set:
autoClose = true or false; // default = false.
If this is set to true this menu will close when another menu is opened. You can mix settings as you like with this, and menus set to true will all close when any menu is opened. Menu's set to false will not be affected by opening a menu.

setFade(true or false); //default = false.
If fade is set to true the menu will fade out and in as it is opening and closing.

These need to be set for each menu in your page. See the example below.


I actually moved the calls for InitMenus(); function InitMenus() to a separate js file and included that, to keep the menu html cleaner.

Daniel Tulp
01-11-2008, 11:21 AM
Hi,

I discovered another bug, that is related to the one I thought was a bug, but wasn't (see
I thought below was a bug, but it isn't, I had the wrong css filename included to the htm file)

in the javascript the height is used for the slideeffect right? well doing this causes the background1 item to have a height, even though the menu is closed, which cause the pointer to remain a 'hand' although you are not on the head menu item

I managed to fix this by introducing

var setHeight = domNode.getElementsByTagName("DIV").item(1).offsetHeight - 2;
above

newNode.getElementsByTagName("DIV").item(1).style.height = setHeight;

then in the function newNode.closeMenu I added

newNode.getElementsByTagName("DIV").item(1).style.height = 0;
after

this.slideTimer = setInterval(this.id +".slideMenu("+ this.id +")", this.slideTime);

and in function newNode.openMenu

newNode.getElementsByTagName("DIV").item(1).style.height = setHeight;
after

this.slideTimer = setInterval(this.id +".slideMenu("+ this.id +")", this.slideTime);

this is perhaps not the best way to do it, but it fixed it for me

Daniel Tulp
01-17-2008, 11:51 AM
Hey Seric,

how is it going? Made any improvements yet, or were my questions and wish-list a bit to extensive? Maybe I can help/test?

Regards,
DaniŽl

seric
01-18-2008, 01:09 AM
Hey Seric,

how is it going? Made any improvements yet, or were my questions and wish-list a bit to extensive? Maybe I can help/test?

Regards,
DaniŽl

Sorry Daniel, I had another extremely busy week and haven't had time to even look at the code. I will have a little time this weekend and I hope to make some progress. Thanks for taking the time to test it, it really helps out a lot. I will be adding some more features and try to kill the bugs you found.

seric
01-22-2008, 04:32 AM
Which browser did you observe this behavior in?


Hi,

I discovered another bug, that is related to the one I thought was a bug, but wasn't (see )

in the javascript the height is used for the slideeffect right? well doing this causes the background1 item to have a height, even though the menu is closed, which cause the pointer to remain a 'hand' although you are not on the head menu item

seric
01-22-2008, 04:45 AM
I've added a bit more functionality.

The script now supports more than 2 styles on head items like the old script did. Of course you need to feed more parameters into the function when setting head items though.

You can set the script to be initially open or closed.

Daniel Tulp
01-22-2008, 08:35 AM
Which browser did you observe this behavior in?
in Fire Fox 2

Daniel Tulp
01-22-2008, 09:23 AM
Seric, thanks for the improvements, it is indeed working better then the previous script. As could be expected there are still a few bugs though.

because you use

getElementsByTagName("UL").item(0)
to hide the submenu, the background class of the parent div of that ul tag is not hidden, so the background color is still shown, although the items are not (in my menu anyway)

replacing a few

getElementsByTagName("UL").item(0)
by

getElementsByTagName("DIV").item(1)

makes it work correctly, I replaced the ones on line 98, 245 and 274

Daniel Tulp
01-22-2008, 09:27 AM
you have added several layout tags into the javascript:
heights
margins

I realise you use these to make the script work, but is it really necessary to do this? it is always better to separate the layout from the technology, a bit like MVC but without the model (database) in this case

seric
01-22-2008, 12:17 PM
Thanks for the comments, they do help a lot. I haven't fixed any bugs you have noted yet so you are most likely still seeing them all:eek:. While it would be nice to completely separate the script from the layout, i don't think it will be possible. This is due to the fact that to some extent the script uses the layout values as part of its behavior and those obliviously will need to be manipulated. The good news is that all but 1 (I think) of those values are parsed from the current DOM structure and not set arbitrarily, so in theory it should work with any browser (right!!!, we know how browser theory is compared to reality right?). So in short, yes the height and margins are necessary. Having said that please remember that the script is very much still in a beta state and there will still many changes made.

OK on to your other observations:D, the reason that I use UL and DIV is because it is my goal to mimic as best as I can the behavior of Windows XP menu (hence the name). To do so I need move the items of the menu, without sliding the background, and so I use the two (UL<DIV) to create this behavior. I am not seeing what you are describing in my FF 2.0 or IE 6&7, but I am using a very simple menu with very simple CSS.

Can you post me your HTML and CSS so that I can observe what you are seeing?

Daniel Tulp
01-22-2008, 12:38 PM
Can you post me your HTML and CSS so that I can observe what you are seeing?

sure, here they are

seric
01-23-2008, 07:17 AM
Thanks for the files, indeed those menu's were looking pretty sad. Hopefully I have squashed some of those bugs out of existents. Try this version with your menus.

5 minutes later:
FYI! I had been developing in FF and didn't look at IE before posting. I quickly looked at the script in IE 7 and there seems to be some weird stuff going on with the menu header. And I inadvertently introduced some bugs when clicking on an already sliding menu. I'll look at these next.

Daniel Tulp
01-23-2008, 08:44 AM
it looks like this is better indeed, i'll wait for the in depth testing for your ie7 fixes

edit: it looks a lot smoother too well done!
edit 2: by smoother I mean more fluid

Daniel Tulp
02-06-2008, 09:19 AM
hey Seric,

it's been a while since we left this nice line of development. Have you made any progress?

Regards,
DaniŽl

Daniel Tulp
02-26-2008, 03:20 PM
Hi,

I manage to solve the differences and bugs with CSS styling.
It looks and acts the same now in FF, IE6 and IE7. I'll post the end result when it comes online.

Thanks for all your time and effort.

Regards,
DaniŽl Tulp

illegal operations
09-24-2008, 03:05 PM
Hi,
Has there been any update on this?

I'm currently running version 2.4 which is what is listed on Jswitch.com.

I had a question, I'm using this in a left menu, that has a width of about 160px.
sometimes my menu items because of the length need to be 2 lines.

When this happens the spacing between the menu items are reduced. So the single line menu items look fine, but the ones with 2 lines, seem to scrunch up against the next menu item. Is there a way to get a constant spacing between items, regardless if the item is 1 or 2 lines in height?

Also, I'm trying to make it so when a user comes to the site it defaults to a certain state. But as they move through the site it remembers where they clicked last. But I want it so if they close their browser, the next time the visit, it goes back to the default state.

I thought I had it by how the cookie is set to
document.cookie = "xpMenuCookv2" + "=" + escape(menuObjArray[4].toString());

But what it's doing now is, it remembers the state for that page only. If I use the menu across several pages, it goes back to the default state each time. If I go back to a previous page, it remembers it.

illegal operations
09-24-2008, 03:22 PM
hmm,

OK, I put back the original JS for this, and it's still only remembering the state of each page.

So page 1 I set the state to expand the second menu, but if I go to page 2 the first menu is expanded instead. Go back to page 1 and menu 2 is expanded.
Close the browser reopen, and page 1 menu 2 expanded (so the cookie must be written?), page 2 Menu 1 expanded instead.

My menu is part of a include file, but that shouldn't make a difference should it?

Edit 2:

did some more testing and it appears to only work if the files are in the same directory???
I have 3 pages, 2 are in the same directory and the menus work fine. But the 3rd won't keep the same state as the other 2.

I've tried messing with the path to the JS, and it doesn't make any difference.
I even tried the full absolute path to the JS, and same effect.

Does this really not work across directories?

illegal operations
09-25-2008, 01:06 PM
It doesn't look like the creator of this menu is supporting it any longer, does anyone know of any other similar menus?

I need one that remembers what menu is expanded as you go from page to page, and one that allows for multiple line menus, that are equally spaced apart.