Hovering menu / layers,iframe,div

[GFK]

Hi,

I am pretty familiar with Javascript and XML/XSLT, yet the combination of both is not that easy...

I want to have a hovering menu, floating above my content, and sliding away onMouseOut.
( example available on dynamicDrive (http://www.dynamicdrive.com/dynamicindex1/slideinmenu4.htm) )

This works perfectly as long as the underlying content is pure HTML. Whenever I use an XML file as source for the content, transformed by XSLT, it becomes a top layer, which makes the menu invisible ( the menu appears behind the content ).

If I use a program ( e.g. XMLSpy ) to perform the XML/XSLT transformation manually, save as HTML and use that content, it displays correctly.

Is this a known bug or am I doing something wrong ?

[brothercake]

Dunno .. sounds very weird. Maybe this trick, which works for <select> and other windowed controls, can help - http://www.codingforums.com/showthread.php?s=&threadid=28261

[GFK]

That is indeed a solution, however now I need lots of more coding to make the menu appear and dissapear properly.

And in addition, when the content is too large, you get a scrollbar on the right side of the screen ( as usual ), but if you move that, the menu also starts moving, so even more extra code is needed.
( which was not needed in the original code )

I will either be busy coding all that behavior, or just finding another way to make another menu :p

Thanks for the help.

[Alex Vincent]

I'd look into CSS, particularly z-index and absolute positioning.

[GFK]

That's just my problem. They don't work as they should. No matter what value I pick for the zIndex, the menu just stays in the background... which means there's another problem going on. Besides : it works when I use HTML, not when I use XSLT...

[me']

Originally posted by GFK
zIndex, Just a quick check: you're using the DOM right?

z-index: CSS property
zIndex: DOM property

[GFK]

I tried both already... same result.

[Alex Vincent]

How about some source code? :) Not the whole shebang, just a demo of what you've got now.

[brothercake]

z-index won't do it if it's a windowed control in IE - did you try what I suggested?

[GFK]

I tried to upload before, but my ISP had problems with their hosting servers...

URL : http://users.skynet.be/bk330100

( The index.html file redirects to /bk330100/test/menu.xml )

has subdir /test with following files :
menu.xml
menu xslt
main.html
about.xml
about.xslt
about.html

The menu.xslt has the hovering encoded. The default content is main.html and is loaded into an IFRAME "content_frame".


Try opening About HTML : this loads about.html in the content IFRAME. Notice the table hiding behind the menu.

Try opening About XML : this load about.xml/.xslt in the content IFRAME ( "content_frame" ). Notice the menu hiding behind it.

The about HTML was created using XMLSPy : execute the XSLT transform on the XML data and save the output as HTML.

REMARK : I want the menu to stay where it is. If scrollbars appear, they should only appear in the content_frame, not on the whole page. Otherwise I need extra code to make the menu follow scrollbar movement. ( When I tried using the &lt;select&gt; trick, the menu moved when scrollbars moved )