Vista Combinata Vista Piatta Vista ad Albero
Discussioni [ Precedente | Successivo ]
gordon daniels
drop down menu is behind slider (SOLVED)
22 maggio 2012 12.18
Risposta

gordon daniels

Punteggio: Liferay Master

Messaggi: 627

Data di Iscrizione: 23 agosto 2008

Messaggi recenti

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]></entry>
<entry name="required"><![CDATA]></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]></entry>
<entry name="required"><![CDATA]></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]></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]></entry>
<entry name="required"><![CDATA]></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]></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]></entry>
<entry name="required"><![CDATA]></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]></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;
Maarten van Heiningen
RE: drop down menu is behind slider
28 aprile 2012 6.59
Risposta

Maarten van Heiningen

Punteggio: Regular Member

Messaggi: 172

Data di Iscrizione: 5 febbraio 2009

Messaggi recenti

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.

1function setNewZIndexNavigation() {
2var zIndexNumberNav = 9999;
3jQuery('#navigation li').each(function() {
4jQuery(this).css('zIndex', zIndexNumberNav);
5zIndexNumberNav -= 1;
6});
7}
]

This should only be done for browsers rendering this problem. I only encountered IE as a browser with this problem.
Maarten
gordon daniels
RE: drop down menu is behind slider
28 aprile 2012 7.02
Risposta

gordon daniels

Punteggio: Liferay Master

Messaggi: 627

Data di Iscrizione: 23 agosto 2008

Messaggi recenti

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
Maarten van Heiningen
RE: drop down menu is behind slider
28 aprile 2012 7.19
Risposta

Maarten van Heiningen

Punteggio: Regular Member

Messaggi: 172

Data di Iscrizione: 5 febbraio 2009

Messaggi recenti

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
gordon daniels
RE: drop down menu is behind slider
28 aprile 2012 7.23
Risposta

gordon daniels

Punteggio: Liferay Master

Messaggi: 627

Data di Iscrizione: 23 agosto 2008

Messaggi recenti

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
gordon daniels
RE: drop down menu is behind slider
22 maggio 2012 12.07
Risposta

gordon daniels

Punteggio: Liferay Master

Messaggi: 627

Data di Iscrizione: 23 agosto 2008

Messaggi recenti

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