slidemenu2 - by Rod Morelos

[GanJa]

I've used this code off and on for years now on various sites and never had a problem. Started to make a new site about a week ago and started to look into cross browser compatibility and found that the script I have does not go the distance it's supoused to for the dropdown menus.

http://kiss.nrgservers.net

While viewed in IE it works fine... Although for some reason http://kiss.nrgservers.net/?p=300&section=values comes up with an error every once in a while but I'm sure that's my error somewhere.

The main issue though is when viewed in any other browser besides IE the dropdown menus don't fully load and are cut off around 30px. This is an issue on any of the pages. I have tried removing the javascript I added to allow http://kiss.nrgservers.net/?p=300&section=values to work and see if that was the issue but it turned out to not be the issue. I cannot seem to find the issue with the script nor any information on the script itself anymore.

All data is available via the links provided, code, source code etc. If you need any additional information please let me know.

[molonaesp]

will have a look at it, but I may not be able to give you an answer before the weekend as I have an urgent thing to do that will take almost all my time til thursday. Hope that you are not in a hurry.

[GanJa]

Nah not really in a hurry still have alot of programming to do before this site is released just want it to work for all users =)

[GanJa]

Nevermind I figured out the issue... Rather stumbled across it... I'm no longer having that issue with the cross browser. The menus come down as far as they are supoused to. Although now I'm trying to get another menu to apper but it's position seems to be messed up...

slideMenuContainer7
Click the button that doesn't look like it belongs and you'll see what I mean.

Also if you happen to figure out what is causing this error...

Line: 622
Char: 3
Error: Unexpected call to method or property access
Code: 0
URL: http://kiss.nrgservers.net/?p=300&section=Values

[molonaesp]

To be honest, your code is unnecessarily complicated which is doing your job much harder than it should.

To answer your question:

You have two divs that are programmatically positioned in the same space:

- slidemenucontainer7 and topmenu_login

The last one (topmenu_login) shows and image (blue_login.gif).

One of the problems is that slidemenucontainer7 is hidden while not clicked, but topmenu_login is always visible.

When you click, slidemenucontainer7 can be seen under topmenu_login. Why? Because they have the same z-index, and, because the code is read by the browser from top to bottom, the one that comes after in the code will go on top.

So the blue_login.gif picture will always be on top.

I could see what it looked to me various errors on your code.

The first and more obvious is that you have created this as a xml page, but this is not truly xml, but xhtml 1.0 served as text, therefore you will not be able to take advantage from xml properties and dom. I would drop the <?xml version="1.0"?> line.

The reason to do this is that IE goes into quirks mode with that line, and that will affect the behaviour of your code and, since it is being served as text, it really doesn't matter. It is just normal HTML 4.0 in strict mode.

That means that you do need to use your meta tags to use the correct character encoding.

You do need to be careful with your links.

If you are going to do this:

<a href="http://www.thottbot.com/index.cgi?i=Bracelets of Wrath">

Then use %20 to indicate where the white space goes.
<a href="http://www.thottbot.com/index.cgi?i=Bracelets%20of%20Wrath">

You also use a number of divs that you don't need. Like slidemenucontainer8 (and its correspondent slidemenucontent8), or another div in your login form. The form tag is already a block, so I don't think that you really need a div inside the form element.

Also, I found a minor error in your css code:

.slidemenucontent {
border: solid #101922;
z-index: 1000;
width: 90px;
position: absolute;
width: 102;
border-width: 0px 0px;
height: 500px;
As you can see, you have two widths, and the last one (which will be the value used because it comes last in the code) doesn't have any units.

Basically, I think that there are a number of things that could be simplified and that do not need javascript to work. Also, you could simplify the layout (too many tables in the code, and then each td has divs inside, most of it is redundant).

Well, these are only suggestions.

Now, about your other problem, I need a bit more information. When did the error show? When you loaded the page? When you clicked something?

Because I am not getting any errors on my side, and I think that your line 600 and mine are different ;-)

[GanJa]

Ok First.... the entire site is ran off a database. The CSS was an oversite and has been fixed, thx. However the reason for the double DIV is due to the positioning of the text within the DIV. it won't work as a dropdown menu if the DIV is dropped. It's the way the original code was written and the way i've used it before.

There are 2 issues I am having with my pages.

1st. http://kiss.nrgservers.net/?p=300§ion=values
When you go to this page then hover over the links to the items it gives me a javascript error expecting something. If you refresh the page the javascript error doesn't come up and the page works fine. This appears to be a IE problem ONLY. Any other browser loads fine the first time instead of having top refresh the page.

2nd. The blue button where the slidemenycontainer7 is is meant to be hidden and the slidemenucontainer7 to slide. But the 7th menu does not slide like the other ones do along the middle bar. As far as the image being on the same z-index at this point in time unless it is stopping it from sliding or something it's not a big deal. Eventually I'll be making the menu there (if I can figure out the issue) slide up from the bar right below it, and pop out the login part.

The HTML links were an oversite it's been fixed now.

[molonaesp]

Sorry if I didn't explain myself properly. I think you have already sorted the problem, but nevertheless, I will try to do it a bit better.

As you said, the slidemenycontainer7 was supposed to slide, but I assumed that the nbr. 8 should not be seen if nbr. 7 was visible and in position.

But, at the time, nbr. 8 didn't move, didn't change its visibility properly (hence it was visible) and in the middle of the way, since it had the same z-index as number 7 but, in the code, nbr. 8 came after. That means that it would remain there, making nbr. 7 of little use because (x)HTML and CSS are read by browsers from top to bottom. This means that nbr. 8 would stack always on top of nbr. 7, making nbr. 7 useless.

About your javascript error, is it sorted already? Because I get none. If you do, which version of IE do you use?

[GanJa]

I'm using IE 6.0

I had it fixed at one point in time. I found the issue to be with quotes and such in the return variable for the overlib javascript. I fixed that and it worked fine. I then went to work on more of the website and came back a couple days later to show people stuff and found the error to pop up again. I can't think of any change in the javascript or the text being placed into the javascript to show the overlibs.

In IE 6.0 http://kiss.nrgservers.net/?p=300&section=Values will return an error while hoving over item names. However if you refresh the page it doesn't and the script works fine. Again I'm completly baffled as to why this is happening and even more baffled as to why a page refresh fixes it.

The issue from what I can tell is in the overlib.js due to the following line:
622: f = capExtent.onmousemove.toString();
From what Microsoft says thier documentation says "toString()" is in HTML 4.0 not XHTML. However all documentation say that it's also avaiable in XHTML. Another thing I went to look at was the Javascript version. it's said that in 1.3 "toString()" was changed. So I set all the Javascript to "language='JavaScript1.2'" this had no affect.

[molonaesp]

Sorry, I have been ill the last 4 days with a terrible cold (air conditioning really kills me :-)) and I had not the time to look into the code. I will do that tomorrow afternoon, though.

I was using IE 6.0.2900.2821 and I didn't get any error messages.

My first thought is trying to clear the cache before testing the page and see what happens. Maybe the error is in a cache version of the page, and it is already fixed.

Also, I wonder if it wouldn't be more convenient for you to have your document as HTML 4.01 strict intead of XHTML. You are serving it as text/html hence you are not taking the advantages of XHTML, therefore HTML would be served you exactly the same way.

In this way, you would avoid some problems because your script was built using HTML DOM, not XML DOM (which is the DOM for XHTML as well).

I don't think this is the problem because, as I said, you are serving your XHTML as text/html therefore it gets to be parsed as normal HTML, so I would think that browsers would use HTML DOM anyway, but with IE you never know.

[molonaesp]

I have looked at the DOM support table that the w3c provides. This is a real time test to detect which DOM versions the UA vendor claims to support in the browser that you use at that particular moment.

With my IE 6.0, it says that the DOM 2 is not claimed to be supported by Microsoft. The line you claim that gives you error (the 622) uses the onmousemove event, which is part of the DOM 2 Events recommendation.

I would assume that Microsoft implemented the event in the very own way because all the information I found is related to XHTML and ASP, hence used as a server technology (which is about right, as IE doesn't really understands XHTML when served as application as it should be served).

I looked at the function and I don't see anything obvious that would make it fail in IE. You do not that particular function in your page (the olMouseCapture function) so it shouldn't be much of a problem there, I think (I haven't checked if you use it indirectly, I must confess).

Maybe my knowledge is not deep enough to see why it fails in IE. I am sorry that I couldn't be of more help.