Ultimate Slide-In Slideshow with DIV padding

[Hooch1981]

1) Script Title:
Ultimate Fade In Slideshow v2.0-

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
http://www.dynamicdrive.com/dynamicindex14/fadeslideshow.js

3) Describe problem:

Hello,

I've had a go of the 'Ultimate Slide-In Slideshow' and it is working as it should. The problem is I originally added padding to the bottom of the div before I started thinking about slideshows. This causes the transparent 'descpanel' at the bottom to not slide away to nothing - it slides away to below the image yet remains visible.

The simple way to fix this would be to create a div to do that padding or put another div inside the current one to house the slideshow. Though I'm looking for a more elegant/clean way to do it, most likely editing the .js file to offset the padding.

Am I wasting my time poking around in this part of the code?

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)

Any help would be quite appreciated.

[ddadmin]

Are you adding the padding like so?


<div id="fadeshow1" style="padding-bottom:30px"></div>

What's the aim of this? The solutions you suggested does seem like the easiest way to overcome the issue if that's the case.

[Hooch1981]

I had it in a style which was a placeholder, which was then renamed to #fadeshow1 once I looked into slideshows.

It has a blue line under the div to separate it from the rest of the content.


#fadeshow1 {
margin-top:20px;
margin-bottom:20px;
height:605px;
padding-bottom:20px;
width:940px;
border-bottom:2px solid #003366;
I'm very new to web stuff so I'm probably mistaken about what's messy code and what is perfectly acceptable. I was under the impression having divs inside other divs to get around stuff like this is lazy and cluttered. If there's really no problem with it then I can do that.

I'm the sort of guy that wants to learn as much as I can about everything, this includes Javascript, so I feel defeated if I take the easy way out ;)