RE: drop down menu is behind slider

[11年前 に gordon daniels によって更新されました。]

Hi,

I am hoping some savy programmer might be able to quickly tell me how to fix this. I am using 6.1.ga1 and have put a slider in web content. The slider is working fine except my drop down menus appear behind the slider. Any ideas on how to fix this? I got the code on the forumu.

thanks
The slider is built using this YUI code:

Structure:


<root>
<dynamic-element name='duration' type='list' index-type='' repeatable='false'>
<meta-data>
<entry name="displayAsTooltip"><![CDATA[false]]></entry>
<entry name="required"><![CDATA[false]]></entry>
<entry name="instructions"><![CDATA[Select how long, in seconds, you would prefer to display an item before switching to the next slide]]></entry>
<entry name="label"><![CDATA[Item Duration]]></entry>
<entry name="predefinedValue"><![CDATA[]]></entry>
</meta-data>

<dynamic-element name='1' type='1' index-type='' repeatable='false'> </dynamic-element>
<dynamic-element name='2' type='2' index-type='' repeatable='false'> </dynamic-element>
<dynamic-element name='3' type='3' index-type='' repeatable='false'> </dynamic-element>
<dynamic-element name='4' type='4' index-type='' repeatable='false'> </dynamic-element>
<dynamic-element name='5' type='5' index-type='' repeatable='false'> </dynamic-element>
<dynamic-element name='6' type='6' index-type='' repeatable='false'> </dynamic-element>
<dynamic-element name='7' type='7' index-type='' repeatable='false'> </dynamic-element>
<dynamic-element name='8' type='8' index-type='' repeatable='false'> </dynamic-element>
<dynamic-element name='9' type='9' index-type='' repeatable='false'> </dynamic-element>
<dynamic-element name='10' type='10' index-type='' repeatable='false'></dynamic-element>
</dynamic-element>
<dynamic-element name='height' type='text' index-type='' repeatable='false'>
<meta-data>
<entry name="displayAsTooltip"><![CDATA[false]]></entry>
<entry name="required"><![CDATA[true]]></entry>
<entry name="instructions"><![CDATA[This defines the height of the carousel, in pixels(px). Do not add "px" at the end of the value]]></entry>
<entry name="label"><![CDATA[Height]]></entry>
<entry name="predefinedValue"><![CDATA[]]></entry>
</meta-data>
</dynamic-element>
<dynamic-element name='width' type='text' index-type='' repeatable='false'>
<meta-data>
<entry name="displayAsTooltip"><![CDATA[false]]></entry>
<entry name="required"><![CDATA[true]]></entry>
<entry name="instructions"><![CDATA[This defines the width of the carousel, in pixels(px). Do not add "px" at the end of the value]]></entry>
<entry name="label"><![CDATA[Width]]></entry>
<entry name="predefinedValue"><![CDATA[]]></entry>
</meta-data>
</dynamic-element>
<dynamic-element name='content' type='text_area' index-type='text' repeatable='true'>
<meta-data>
<entry name="displayAsTooltip"><![CDATA[false]]></entry>
<entry name="required"><![CDATA[true]]></entry>
<entry name="instructions"><![CDATA[This is the content of this slide. To create more slides, click on the " " button]]></entry>
<entry name="label"><![CDATA[content]]></entry>
<entry name="predefinedValue"><![CDATA[]]></entry>
</meta-data>
</dynamic-element>
</root>


Template:


#set ($contentId = $reserved-article-id.getData())
#set ($contentClass = "multiple-items-" + $contentId + "-carousel")

<style type="text/css" media="screen">
#$contentClass {
height: $height.getData()px;
position: relative;
width: $width.getData()px;

[11年前 に Maarten van Heiningen によって更新されました。]

Hi Gordon,

Are you testing this with IE. In that case you should get a drop down menu behind stuff you are loading later. It has to do with the loading sequense and timing of object placed with position relative and absolute.

You could do a dirty trick and reset the z-index of you nav menu to a higher level than the slider object (and it's content).
in your main.js you could do something like this (this is using jQuery as a lib but YUI could do it also.

function setNewZIndexNavigation() {
var zIndexNumberNav = 9999;
jQuery('#navigation li').each(function() {
jQuery(this).css('zIndex', zIndexNumberNav);
zIndexNumberNav -= 1;
});
}

]

This should only be done for browsers rendering this problem. I only encountered IE as a browser with this problem.
Maarten

[11年前 に gordon daniels によって更新されました。]

Maarten: thanks for the help. I am using firefox. I am not a programmer so (sys admin) but can I use your example of fix in the code?

thanks again

[11年前 に Maarten van Heiningen によって更新されました。]

Hi Gordon,

Sure you can use it. But as it's 6.1 you are using you need to know that when you are using my code you also need to check if you are already using jQuery. Normally in 6.1 jQuery is not available so you need to implement it in your head section of the portal_normal.

Maarten

[11年前 に gordon daniels によって更新されました。]

thanks. I am not using jquery. Have been trying to stay away from it but as my other posts tell, looks like I will have to support it.

thanks again

[11年前 に gordon daniels によって更新されました。]

Maarten: I am still having this problem. Navigation menus drop down behind slide show. If you pause on menu tab for a count of 2 then drop down menu appears. Soon as slide show transitions the drop down menu goes behind slide show.

I've tried modifying 'main.js' and the zindex values but no luch so far. If anyone else has had this problem and fixed it, I would sur like to hear from you.

thanks