bchristian
12-29-2009, 06:27 PM
1) Script Title:
Ultimate Fade-in slideshow (v2.1)
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
3) Describe problem:
I peaked into the code of the JS file (below where it says mods don't need to be made), and noticed the div containers have a z-index settings around 1000. I'm trying to overlay a menu by putting a div container (menu) inside the fadeslideshow div, and no matter what I make the z-index on the menu container I can't get it to be on top of the slideshow.
I then thought...it should be possible to put it right in the JS file similar to how it creates the description div (for when you have the description on).
Here's the code excerpt for the description panel...
adddescpanel:function($, setting){
setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')
.css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:setting.dimensions[1], font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
.appendTo(setting.$wrapperdiv)
$('<div class="descpanelbg"></div><div class="descpanelfg"></div>') //create inner nav panel DIVs
.css({position:'absolute', left:0, top:0, width:setting.$descpanel.width()-8, padding:'4px'})
.eq(0).css({background:'black', opacity:0.7}).end() //"descpanelbg" div
.eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
.appendTo(setting.$descpanel)
setting.$descinner=setting.$descpanel.find('div.descpanelfg')
setting.panelheight=setting.$descinner.outerHeight()
setting.$descpanel.css({height:setting.panelheight}).find('div').css({height:'100%'})
if (setting.descreveal=="always"){ //create restore button
setting.$restorebutton=$('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] +'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />')
.appendTo(setting.$wrapperdiv)
}
},
I was thinking that my CSS would be able to simply overlay on the slideshow using the z-index, but it said somewhere that you can't (though i've read elsewhere that it's worked...) So I'm not sure if it's possible, or if I need to put my menu div into the JS file
Unfortunately i'm just not smart enough to figure this out on my own...I need to get a menu, that's always there (really awesome if it could fade in 500ms after the first main image), then stay persistent there as the images behind it transition. I'd also like to have mouseover effects on the menu buttons/links...
Anyway, I hope my question is clear...and sorry i'm a JS newb :confused:
Oh...here's a link to the webpage where I'm trying this out
http://www.nettechsolutionsinc.com/dev/rrch/
you can clearly see the slideshow right in the middle and the menu below it. I want that menu on top of the slideshow.
Thank you!
Ultimate Fade-in slideshow (v2.1)
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
3) Describe problem:
I peaked into the code of the JS file (below where it says mods don't need to be made), and noticed the div containers have a z-index settings around 1000. I'm trying to overlay a menu by putting a div container (menu) inside the fadeslideshow div, and no matter what I make the z-index on the menu container I can't get it to be on top of the slideshow.
I then thought...it should be possible to put it right in the JS file similar to how it creates the description div (for when you have the description on).
Here's the code excerpt for the description panel...
adddescpanel:function($, setting){
setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')
.css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:setting.dimensions[1], font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
.appendTo(setting.$wrapperdiv)
$('<div class="descpanelbg"></div><div class="descpanelfg"></div>') //create inner nav panel DIVs
.css({position:'absolute', left:0, top:0, width:setting.$descpanel.width()-8, padding:'4px'})
.eq(0).css({background:'black', opacity:0.7}).end() //"descpanelbg" div
.eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
.appendTo(setting.$descpanel)
setting.$descinner=setting.$descpanel.find('div.descpanelfg')
setting.panelheight=setting.$descinner.outerHeight()
setting.$descpanel.css({height:setting.panelheight}).find('div').css({height:'100%'})
if (setting.descreveal=="always"){ //create restore button
setting.$restorebutton=$('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] +'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />')
.appendTo(setting.$wrapperdiv)
}
},
I was thinking that my CSS would be able to simply overlay on the slideshow using the z-index, but it said somewhere that you can't (though i've read elsewhere that it's worked...) So I'm not sure if it's possible, or if I need to put my menu div into the JS file
Unfortunately i'm just not smart enough to figure this out on my own...I need to get a menu, that's always there (really awesome if it could fade in 500ms after the first main image), then stay persistent there as the images behind it transition. I'd also like to have mouseover effects on the menu buttons/links...
Anyway, I hope my question is clear...and sorry i'm a JS newb :confused:
Oh...here's a link to the webpage where I'm trying this out
http://www.nettechsolutionsinc.com/dev/rrch/
you can clearly see the slideshow right in the middle and the menu below it. I want that menu on top of the slideshow.
Thank you!