Ultimate Fade-in slideshow with no fade-in

[Fia]

1) Script Title: :: Ultimate Fade-in slideshow (v2.0)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: Very nice script but I would like the firts image not to fade in but start as a normal image and after that fade between images. is that possible?

And then to the big problem, the slideshow hides my suckertreemenu dropdown. This is not so good.

http://www.kaptensgarden.se/index.ph...psidax&sidid=1

Greatful for any help or tips.

[ddadmin]

For the former, try the following modified .js file to disable the fade initially. For the later, this is most certainly a CSS z-index issue, namely, the slideshow carrying a higher z-index value then the suckertree menu. Try giving the menu and its sub ULs a high z-index value such as 2000 in the CSS.

[Fia]

I will try it all on monday, thanks alot for your help and so fast. I love this site.

[Fia]

It worked in explorer but not in modzilla. I put z-index on all just in case......

#meny{width:650px; background-color:##F2F2F2;; height:33px; padding-top:0px; z-index:2000;}
#fadeshow{z-index:1;}
/********************MENY*******************************************************/
.suckertreemenu ul{
font-family:Arial, Helvetica, sans-serif;
z-index:2;
margin: 0;
padding: 0;
list-style-type: none;
font-weight:600;
font-size:11px;
text-align:center;
z-index:2000;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background:#999999; /*overall menu background color*/
z-index:2000;
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: auto; /*Width of top level menu link items*/
padding: 8px 12px 8px 12px;
text-decoration: none;
color: #F2F2F2;
z-index:2000;
}

.suckertreemenu ul li a:visited{
color:#F2F2F2;
text-decoration: none;
z-index:2000;
}
.suckertreemenu ul li a:hover{
color:#333333;
text-decoration: none;
z-index:2000;
}
	
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
background:#999999; /*Disappearing menu fix-BP */
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
z-index:2000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
z-index:2000;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
bottom:0;
z-index:2000;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
background:#999999; /*Disappearing menu fix-BP */
display: block;
width: 145px; /*width of sub menu levels*/
text-decoration: none;
padding: 5px 5px;
border-bottom: 1px dotted #000000;
text-align:left;
z-index:2000;
}

.suckertreemenu a:hover{
color: #333333;
text-decoration: none;
z-index:2000;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: url(images/arrowdown2.gif) no-repeat center right;
padding-right:15px;
z-index:2000;
}

/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%;z-index:2000;}
* html .suckertreemenu ul li a { height: 1%;z-index:2000;}
* html .suckertreemenu ul li ul li { float: left;z-index:2000;}
/* End */

http://www.kaptensgarden.se/start.ph...opsida&sidid=1

I also get complains about the image beeing black along time before the show starts. Is that becouse of the loadingtime of the first image?

[ddadmin]

You should make sure the outermost DIV that contains Suckertree menu also has a higher z-index value than the DIV "fadeshow", which at a glance seems to be the DIV "header1".

I also get complains about the image beeing black along time before the show starts. Is that becouse of the loadingtime of the first image?

Yep, the script needs to wait for the first image to have fully loaded before rotating, so try optimizing this image.

[Fia]

Nop!!! I've also tried put an extra class om the dropdown ul but no. sorry for beeing a pain here ....

<li><a href="?visa=topsida&sidid=3">Om Oss</a>
<ul class="dropdownmeny">
<li><a href="?visa=topsida&sidid=4">Historia</a></li>

#header1{ float:left; width:650px; padding-top:2px; padding-bottom:10px; z-index:2000;}
#meny{width:650px; background-color:##F2F2F2;; height:33px; padding-top:0px; z-index:2000;}
#content{ clear: both; width:650px; z-index:1;}
#fadeshow{z-index:1;}

.dropdownmeny{ z-index:2000;}
.suckertreemenu ul{
font-family:Arial, Helvetica, sans-serif;
z-index:2;
margin: 0;
padding: 0;
list-style-type: none;
font-weight:600;
font-size:11px;
text-align:center;
z-index:2000;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background:#999999; /*overall menu background color*/
z-index:2000;
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: auto; /*Width of top level menu link items*/
padding: 8px 12px 8px 12px;
text-decoration: none;
color: #F2F2F2;
z-index:2000;
}

.suckertreemenu ul li a:visited{
color:#F2F2F2;
text-decoration: none;
z-index:2000;
}
.suckertreemenu ul li a:hover{
color:#333333;
text-decoration: none;
z-index:2000;
}
	
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
background:#999999; /*Disappearing menu fix-BP */
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
z-index:2000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
z-index:2000;
}


/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
bottom:0;
z-index:2000;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
background:#999999; /*Disappearing menu fix-BP */
display: block;
width: 145px; /*width of sub menu levels*/
text-decoration: none;
padding: 5px 5px;
border-bottom: 1px dotted #000000;
text-align:left;
z-index:2000;
}

.suckertreemenu a:hover{
color: #333333;
text-decoration: none;
z-index:2000;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: url(images/arrowdown2.gif) no-repeat center right;
padding-right:15px;
z-index:2000;
}

/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%;z-index:2000;}
* html .suckertreemenu ul li a { height: 1%;z-index:2000;}
* html .suckertreemenu ul li ul li { float: left;z-index:2000;}
/* End */

[Fia]

Got it to work, put z-index om body also