構造的に表示 平面上に表示 ツリー上に表示
スレッド [ 前へ | 次へ ]
toggle
gordon daniels
drop down menu is behind slider (SOLVED)
2012/05/22 12:18
答え

gordon daniels

ランク: Liferay Master

投稿: 693

参加年月日: 2008/08/23

最近の投稿

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
2012/04/28 6:59
答え

Maarten van Heiningen

ランク: Regular Member

投稿: 172

参加年月日: 2009/02/05

最近の投稿

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
2012/04/28 7:02
答え

gordon daniels

ランク: Liferay Master

投稿: 693

参加年月日: 2008/08/23

最近の投稿

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
2012/04/28 7:19
答え

Maarten van Heiningen

ランク: Regular Member

投稿: 172

参加年月日: 2009/02/05

最近の投稿

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
2012/04/28 7:23
答え

gordon daniels

ランク: Liferay Master

投稿: 693

参加年月日: 2008/08/23

最近の投稿

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
2012/05/22 12:07
答え

gordon daniels

ランク: Liferay Master

投稿: 693

参加年月日: 2008/08/23

最近の投稿

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