PDA

View Full Version : Ultimate Fade-In Slide Show IE6 relative position / z-index question.



yukon
03-31-2008, 04:20 AM
I have a navigation div that is relative position over the slideshow. That is the only way I can get it to appear over the slideshow. It works fine in Firefox and Safari, but in IE 6, the drop down submenu won't display.

What I need to do is be able to remove the relative position in the style sheet and be able to use z-index. Unfortunately, Ultimate Fade-in Slideshow seems to take over the highest z-index no matter what.

Is there a way to control the z-index in UFISS?

I need to have a navigation div positioned over the slideshow without actually using "position" in the stylesheet.

I currently have the div placed below the slideshow and then put a margin-top of -53px but it shows on intial load then fades behind the images on the transition.

Any insight would be appreciated.
Thanks

adraper
06-09-2009, 06:34 PM
I am having this issue as well. I have a existing dropdown menu that is showing up BEHIND the slideshow. I tried to add a position and z-index, but unfortunately the slideshow still shows up in front of the dropdown menu in Firefox, Safari and Opera...it works fine in IE and Netscape?

ontheroof
06-30-2009, 01:59 PM
i am having a similar problem... a div positioned above the slideshow (z-index) at first appears fine, and then eventually fades with one of the transitions. haven't a clue how to fix it... any ideas?

vwphillips
06-30-2009, 03:07 PM
suggest you post a link to your application.

ontheroof
07-07-2009, 07:09 AM
actually what worked in the end was making the z-index a ridiculously high number... 30000 i think. not sure why numbers in a normal range didn't work, but for whoever else might have a similar problem--please take note.

ontheroof
07-07-2009, 07:14 AM
will post a link in case it actually DOESN'T work on someone else's browser:

http://forestandthetree.com/ojoblanco

steji
08-11-2009, 07:03 PM
Actually, even if you set a z-index value "a ridiculously high number", the slide will crawl his way up to the top. It will take a longer time to, but eventually will be on top of all. That's because the img z-index value is incremented after every transition. The z-index of the top img, the one that will show after the transition is over, it has to be higher than the z-index of the old img.
I also have an menu over the slideshow (http://endoroptics.dekadv.com)and i ran into same issue: how to change the script to use only two z-index values (say 1 and 2)? Or to use a range of z-index values as imgArray.length starting from 0 or any given other value (but to know which value).
I've looked into the code... I'm not a javascript newbie (I like to think) but that's too much for me.
Any help will be appreciated.
L.E.
Now I've tried to decrease (crossobj.style.zIndex-- instead of crossobj.style.zIndex++) the z-index value. It seems that fade filter is applied to the top image that will fade in on top of the old img. So, decreasing the z-index value will result in no longer show the transition, just a quick swap of images. Now, this leads of an another possible solution: ability to choose which img to apply the fade filter (too many parameters, though) or an hard coding to that. But then the SS will bo to the bottom of the stack, other people will not be satisfied about it.
it remains the 2 values of z-index that the two images will use. the old img will have to have value 1. The new one will have to have value 2. When the transition is over, the new img will swap the z-index value of 2 to 1 and the value 2 will be freed for the next img.
Or just how I've put in words what I want from this script. To put it in coding... that's a little bit trickier.

johnflanagan
01-02-2010, 08:23 AM
I also had this problem so many thanks for the suggestions which led me to using "position" and an easier css solution:


div#slideshow-z-index {
position:relative;
left:0px;
top:0px;
z-index:0;
}
div#menu-z-index {
position:relative;
left:0px;
top:0px;
z-index:1;
}

paulusmaximus
07-02-2010, 12:46 PM
Sorry to resurrect this issue but I'm having similar problems and was wondering if someone could throw some light my way?

The following page has a header with drop-down menu and below, the ultimate fade-in. The menu goes over the slideshow without any issues after adding z-index. BUT, when I try to add another box which I want to go on top of the slideshow with text in it, it seems to go underneath the slideshow. :confused:

http://www.lautremonde.co.uk/2/interior_design/

I've got a div called 'screens' which holds the slideshow and I'm trying to put another block inside that div called 'interiors_hback' with the info in.

#screens {
position: relative;
left:0px;
top:0px;
z-index: 1;
}

#interiors_hback {
background-color: #FFF;
z-index: 9999;
}

Any help would be most appreciated!

thanks

paulusmaximus
07-02-2010, 03:25 PM
Ok... have managed to sort it out.

If anyone's having similar issues you must add 'top:0;' in the css code for the block u want to place on top of the slideshow. Also I nested the slideshow and box divs in another div and set the position of that to relative and the box to absolute:

#interiors_hback {
width: 960px;
height: 180px;
position: absolute;
z-index: 9999;
top:0;
}

#screens {
width:960px;
height:640px;
z-index: 0;
}

:)

Wildfire563
04-11-2011, 10:27 PM
I also had this problem so many thanks for the suggestions which led me to using "position" and an easier css solution:


div#slideshow-z-index {
position:relative;
left:0px;
top:0px;
z-index:0;
}
div#menu-z-index {
position:relative;
left:0px;
top:0px;
z-index:1;
}

I'm having the same problem. The above looks like an interesting solution, but I'm confused as to how to implement it in my code. Example web page is at http://www.flyingscool.com/indexnew.htm and http://www.flyingscool.com/index.htm.

index uses the old slideshow script and has no Doctype and works in IE8 and below but not Google Chrome or Firefox.
indexnew uses the new slideshow script and has a Doctype, and is broken in all browsers (I also tried implementing the new DHTML Window Widget in About/About, but it has the same problem)

In indexnew.htm, both the dropdown menus and the popup windows (such as About/About or About/Services) are underneath the slideshow in all browsers.

Where would I put the above CSS, and how do I use it?

As noted, in the older code in index.htm, everything works in IE8 and below, and the menus work in Google Chrome and Firefox, but not the pop up windows, hence, why I decided to redo my page. But now with the newer code, nothing is working.

This seems to be a major problem with the Ultimate Fadein Slideshow?

Sorry for the newbie questions.

azoomer
04-11-2011, 10:49 PM
I think that in your case it would be easier to increase the z-index of the dropdown menu
In the indexnew.htm around line 91 change 100 to 2000 like this:


#dropmenudiv{
position:absolute;
background-color: #005EBB;
border:1px solid black;
border-bottom-width: 0;
font:normal 10px Verdana;
line-height:20px;
z-index:2000;
}

Hope that works !

Wildfire563
04-12-2011, 01:32 AM
I think that in your case it would be easier to increase the z-index of the dropdown menu
In the indexnew.htm around line 91 change 100 to 2000 like this:


#dropmenudiv{
position:absolute;
background-color: #005EBB;
border:1px solid black;
border-bottom-width: 0;
font:normal 10px Verdana;
line-height:20px;
z-index:2000;
}

Hope that works !

Thank you, that fixed the drop down menus. And I figured out how to fix the new DHTML Window Widget (there is a line at the top of dhtmlwindow.js that hardcodes the z-index value. Perhaps this should be a variable for input?)

But I still can't figure out how to change the z-index of the old dhtml windows. Any thoughts on that? I've added z-index values to places that I can find in style statements in http://www.flyingscool.com/indexnew.htm, but nothing has worked yet.

azoomer
04-12-2011, 05:46 AM
You could make a new css rule


#dwindow {
z-index:2000;
}
and place it inside the <style> tags or in the external style sheet. That should make the old dhtml windows appear over the slideshow. The windows still look a little funky at the top though.

Wildfire563
04-12-2011, 09:44 AM
Awesome! Thanks, that did it.

Yes, adding the doctype seems to make the interpreter more restrictive. I assume I'll just need to play around with the settings. Seems to me I remember that the numbers I was using were weird before for the size of the borders, maybe the doctype tag just made them work more correctly.

Regarding this being an old thread, I had exactly the same problem, so was that bad? Should I have just started my own thread?