PDA

View Full Version : 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/dynamicindex14/fadeinslideshow.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 :-


<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):


<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):


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

You may have to add headerHome to that:


#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