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

**URL:** <https://boards.straightdope.com/t/web-design-help-navigation-blocked-by-js-slideshow-need-help-fast/517894>\
**Category:** Factual Questions\
**Created:** [November 17, 2009, 6:16am UTC](https://boards.straightdope.com/t/web-design-help-navigation-blocked-by-js-slideshow-need-help-fast/517894 "2009-11-17T06:16:27Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Green\_Cymbeline](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/green_cymbeline/32/9244_2.png) [@Green\_Cymbeline](https://boards.straightdope.com/u/Green_Cymbeline)\
**Post date:** [November 17, 2009, 6:16am UTC](https://boards.straightdope.com/t/web-design-help-navigation-blocked-by-js-slideshow-need-help-fast/517894/1 "2009-11-17T06:16:27Z")

</div>

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](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)](http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm)

Originally, I had this feature as a Flash item (seen here: [http://brookenelson.com/upticon/help/index-flash.html](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!

---

<div class="post-metadata">

**Author:** ![Green\_Cymbeline](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/green_cymbeline/32/9244_2.png) [@Green\_Cymbeline](https://boards.straightdope.com/u/Green_Cymbeline)\
**Post date:** [November 17, 2009, 6:17am UTC](https://boards.straightdope.com/t/web-design-help-navigation-blocked-by-js-slideshow-need-help-fast/517894/2 "2009-11-17T06:17:29Z")

</div>

And a related question: In this version: [http://brookenelson.com/upticon/help/index-java.html](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?

---

<div class="post-metadata">

**Author:** ![xash](https://avatars.discourse-cdn.com/v4/letter/x/c6cbf5/32.png) [@xash](https://boards.straightdope.com/u/xash)\
**Post date:** [November 17, 2009, 6:29am UTC](https://boards.straightdope.com/t/web-design-help-navigation-blocked-by-js-slideshow-need-help-fast/517894/3 "2009-11-17T06:29:17Z")

</div>

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:

> **[Solved: How to bring to front screen javascript menu blocked by DIV element |...](https://www.experts-exchange.com/questions/23943024/How-to-bring-to-front-screen-javascript-menu-blocked-by-DIV-element.html)**
>
> Find answers to How to bring to front screen javascript menu blocked by DIV element from the expert community at Experts Exchange

> **[Belajar Pemrograman Komputer dengan Yang Terbaik - Pelajari cara membuat...](https://www.codingforums.com)**
>
> Pelajari cara membuat program bersama kami, di sini Anda dapat mempelajari cara membuat halaman web yang indah menggunakan HTML dan CSS.

[http://www.jtricks.com/javascript/blocks/ordering.html](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=](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=)

---

<div class="post-metadata">

**Author:** ![xash](https://avatars.discourse-cdn.com/v4/letter/x/c6cbf5/32.png) [@xash](https://boards.straightdope.com/u/xash)\
**Post date:** [November 17, 2009, 6:40am UTC](https://boards.straightdope.com/t/web-design-help-navigation-blocked-by-js-slideshow-need-help-fast/517894/4 "2009-11-17T06:40:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Markxxx](https://avatars.discourse-cdn.com/v4/letter/m/5daacb/32.png) [@Markxxx](https://boards.straightdope.com/u/Markxxx)\
**Post date:** [November 17, 2009, 7:25am UTC](https://boards.straightdope.com/t/web-design-help-navigation-blocked-by-js-slideshow-need-help-fast/517894/5 "2009-11-17T07:25:46Z")

</div>

You may want to ask at [DynamicDrive forums](http://www.dynamicdrive.com/forums/). They have alwasy been really helpful for me

---

<div class="post-metadata">

**Author:** ![Green\_Cymbeline](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/green_cymbeline/32/9244_2.png) [@Green\_Cymbeline](https://boards.straightdope.com/u/Green_Cymbeline)\
**Post date:** [November 17, 2009, 7:39am UTC](https://boards.straightdope.com/t/web-design-help-navigation-blocked-by-js-slideshow-need-help-fast/517894/6 "2009-11-17T07:39:37Z")

</div>

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](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!

---

<div class="post-metadata">

**Author:** ![Duckster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/duckster/32/1244_2.png) [@Duckster](https://boards.straightdope.com/u/Duckster)\
**Post date:** [November 17, 2009, 9:10pm UTC](https://boards.straightdope.com/t/web-design-help-navigation-blocked-by-js-slideshow-need-help-fast/517894/7 "2009-11-17T21:10:15Z")

</div>

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](http://jqueryui.com/) or j[query tools](http://flowplayer.org/tools/index.html) as possible alternatives, among others.
