Ultimate Fade-in slide show DIV behind another DIV

**G-Oker** · 05-15-2010, 08:25 AM

1)Ultimate Fade-in slide show

2) http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

Hello,
I've been trying to get the UFISS to run behind another DIV tag ( a menu bar that goes across the screen ). I've done this by using <div id="fadeshow1" style="position:absolute;z-index:-1">, HOWEVER, now the ONMOUSEOVER discriptions do not work when a "point" top the image on display.

The code im using is :-

Code:

<script type="text/javascript" src="js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [970, 580], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["img/cover/29013_402390686776_523696776_4543044_4313361_n.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["img/cover/30873_404675446776_523696776_4595003_6809531_n.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["img/cover/4451309881_030443968e_b.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["img/cover/_MG_0741.JPG", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["img/cover/4451724161_31ededc718_b.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["img/cover/4452381428_b338c0abee_b.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["img/cover/4452381428_b338c0abee_b.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["img/cover/4539367440_19dc519d03_b.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["img/cover/4582147115_12f86f4061_b.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:42000, cycles:0, wraparound:false},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 4000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})


</script>

</head>
<body id="home">

<div id="content" >
<div id="headerHome"> 
<img src="img/layout/logo.gif" alt="logo" width="337" height="61" title="logo" />
  <div class="menu" >
    <ul>
      <li><a href="option1/option1.html" class="tipHome" title="::<img src='img/homepage/option1.gif'><br /><strong>option1</strong><br />option1.">Portraits</a></li>
      <li><a href="option2/option2.html" class="tipHome" title="::<img src='img/homepage/option2.gif'><br /><strong>option2</strong><br />option2.">Landscapes</a></li>
      <li><a href="option2/option3.html" class="tipHome" title="::<img src='img/homepage/option3.gif'><br /><strong>option3</strong><br />option2.">events</a></li>
      <li><a href="option4/option4.html" class="tipHome" title="::<img src='img/homepage/option4.gif'><br /><strong>option4</strong><br />option4.">other</a></li>
      <li><a href="option5/option5.html" class="tipHome" title="::<img src='img/homepage/option5.gif'><br /><strong>option5</strong><br />option5.">awards</a></li>
      <li><a href="option6/option6.html" class="tipHome" title="::<img src='img/homepage/option6.gif'><br /><strong>option6</strong><br />option6.">Me</a></li>
    </ul>
  </div>
</div>
<div id="fadeshow1"  style="position:absolute;z-index:-1"></div>

</div>

Please can someone point out where im going wrong ?

Thanks
G-oker

**jscheuer1** · 05-15-2010, 02:51 PM

By giving the slide show a negative z-index, it is below the surface of the page and cannot receive a hover event from the mouse.

Instead, leave the slide show alone (get rid of the highlighted):

Code:

<div id="fadeshow1" style="position:absolute;z-index:-1"></div>

and increase the z-index of the menu. You may be more familiar with the menu than I am and see a way to do so more precisely, but looking at your markup, this should work (add to your stylesheet):

Code:

.menu, .menu * {
position: relative;
z-index: 10000important;
}

You may have to add headerHome to that:

Code:

#headerHome, .menu, .menu * {
position: relative;
z-index: 10000important;
}

**G-Oker** · 05-15-2010, 03:24 PM

Hello John,

thank for the advise.
I tried it, but the menu bar just hide behind the slideshow again.

Attached is my CSS code, can you point out where I'm going wrong with your suggestions?

Thanks

body {
margin: 0px;
padding: 0px 0px 30px 0px;
background: #48494a url(../img/layout/backNavbar.gif) repeat-x 0 top;
font-family: Helvetica, Arial, Tahoma, Verdana, Sans-serif;
font-size: 11px;
}

body#home {
text-align: center;
background: #272727 url(../img/layout/back_Home.gif) repeat-x fixed 0 0;
padding: 20px 0px 0px 0px;
}

body#home div#content {
width: 970px;
margin: 0px auto;
text-align: left;
padding: 0px;
}

body#home div#headerHome {
width: 970px;
position: absolute;
margin: 470px 0px 0px 0px;
background: #000000 url(../img/layout/backNavbar.gif) repeat-x;
}

body#home .menu {
margin: 0px 10px 0px 0px;
top: 0px;
display: block;
}

body#home .portfolio {
margin: 0px;
padding: 0px;
}

body#home .portfolio img {
border: 0px;
padding: 0px;
margin: 0px;
}

.tooltipHome-tip {
background: url(../img/homepage/baloonHome.png) no-repeat;
padding: 10px 10px 0px 12px;
color: #ffffff;
width: 200px;
height: 142px;
text-align: left;
z-index: 13000;
}
.tooltipHome-tip img {
margin: 0px 0px 4px 0px;
}
.tooltipHome-title {
font-weight: bold;
font-size: 12px;
}

.tooltipHome-text {
font-size: 11px;
color: #a4a4a4;
}
div#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 51px;
background: #000000 url(../img/layout/backNavbar.gif) repeat-x;
padding: 0px 0px 0px 10px;
margin: 0px;
}

div#logo {
width: 337px;
position: absolute;
margin: 0px;
padding: 0px;
left: 10px;
}

div#bottom {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 30px;
background: #6c6c6c url(../img/layout/backBottom.gif) repeat-x;
padding: 7px 0px 0px 30px;
margin: 0px;
color: #ffffff;
border-top: 1px solid #393939;
}

div#content {
width: 100%;
padding: 0px;
margin: 0px;
}
body#contact div#content {

padding: 0px;
margin: 0px;
}

**jscheuer1** · 05-16-2010, 07:07 AM

There's very little way to be sure without seeing it:

Please post a link to a page on your site that contains the problematic code so we can check it out.

I can tell you that this has come up many, many times and the solution is always raising the z-index of the menu. Just how to do that in your particular case may be a bit tricky though.

**G-Oker** · 05-16-2010, 10:24 AM

Hi John, I got it working my changing:-

<div id="headerHome">
<div id="fadeshow1" style="position:absolute; z-index:-1"></div>

to

<div id="headerHome" style="position:absolute;z-index:1">
<div id="fadeshow1" style="position:absolute"></div>

Thanks for the advice.

G-Oker

Thread: Ultimate Fade-in slide show DIV behind another DIV

Thread Tools

Search Thread

Ultimate Fade-in slide show DIV behind another DIV

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions