Web design help - navigation blocked by .js slideshow?! (need help fast!)

Factual Questions
1

On a web site I am designing, my drop-down navigation menu is covered up by a Javascript slideshow below it. I have not been able to figure out a solution to this, I need help!

Here it is: http://brookenelson.com/upticon/help/index-java.html

Some background:

This slideshow of quotes is based on the “Ultimate Fade-in slideshow (v2.1)” at Dynamic Drive: Dynamic Drive DHTML Scripts- Ultimate Fade-in slideshow (v2.0)

Originally, I had this feature as a Flash item (seen here: http://brookenelson.com/upticon/help/index-flash.html ) but the client kept adding and changing quotes, and I am not that good with Flash anyway, so it was getting difficult for me to make the revisions. So I thought the .js thing would work better, because it’s much quicker to add new items.

One thing I have tried is adjusting the z-indexes in the CSS and nothing I do seems to work.

So is there a solution to the drop-downs being hidden behind the .js slideshow? Or is there some other sort of solution or script that would fit my needs better?

Many many many thanks in advance.

p.s. I personally do not like the little quote slideshow I am using, in either form, but the client is insisting on it!

2

And a related question: In this version: http://brookenelson.com/upticon/help/index-java.html where I am using the .js slideshow… the text is on a white background, but the first item fades in from black. Refresh the page and watch it carefully. It starts out black. Any way to change this to white or transparent?

3

This is an issue with the css DIV element of the slideshow.

Try doing a search on DIV element hide, bring text to front of DIV element, etc.

Here’s some initial search results:

http://www.jtricks.com/javascript/blocks/ordering.html

http://www.google.com/search?hl=en&safe=off&client=opera&rls=en&hs=7dc&q=div+element+bring+to+front&aq=f&oq=&aqi=

4

For the second question, I don’t see any parameter where you can specify the fade-in color of the first slide. I was thinking maybe you can reduce the cycle time of the first transition so it does it in less than a blink of an eye, and then keep the cycle time of the remaining transitions what it is now so that it displays for the correct time, but the script isn’t that sophisticated.

So the only option I can think of is to reduce the fadeduration parameter to 1 or 10 or some extremely low number (it defaults to 500ms right now) so that the black fade-in is never seen. The downside is that there won’t be a visible transition effect from one quote to the other, it’ll just display without transition. See if that looks better than the black fade-in.

5

You may want to ask at DynamicDrive forums. They have alwasy been really helpful for me

6

I looked over xash’s links, and I found this via Google that gave advice that worked: http://www.pipwerks.com/lab/swfobject/z-index/2.0/index.html

Basically I gave my menu div absolute positioning – position:absolute.

This works for me in FF and IE, hopefully it will work across all browsers!!

This was a simple fix – I just hope it really is fixed!!

As for xash’s second advice, I still need to try that out, and thanks to Mark’s suggestion to try the DD forums - duh, I shoulda thought of that!

7

You may want to consider dropping the Dynamic Drive scripts altogether and go for something more robust. I’ve found the DD script quality to not always be up to snuff.

Take a look at either jqueryui or jquery tools as possible alternatives, among others.