Step Carousel Viewer

[mh984r]

Hi,

I'm using the Step Carousel Viewer 1.8 and it works great, but I'm having one issue with it that I hope someone can help me with.

I'm using PHP and I'm looping through an array genereated from my database and there is always this extra empty panel at the end. I'm stepping through with the left right pane buttons by 1 and I'm not getting any errors. When I view the HTML code there is no empty <div id="panel"></div>. I use firebug as well in FF and I'm not able to click that by inspect element. It's probably simple to fix but I'm not seeing it. I would provide a link but it's an internal secure site that can't be hit from the outside world.

I have tried to reduce the loop count by several itterations but the empty panel still appears at the end, so i'm convinced the loop is not causing any empty div tags.

Here is the step carousel HTML code

Thanks in advance.



<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel"><a style="clear: both;float:left;" title=
"Network-Based Firewall Configuration" id="Network Firewall Configuration" href=
"javascript:fb.loadAnchor('%20https://www.e-access.att.com/cpt/','width:95%%20height:95%');"
class="screenshot" rel="assets/overrides/nbfw.png" name=
"Network Firewall Configuration"><img width="96px" height="71px" style=
"border:2px solid orange;clear: both;float:left;" src=
"assets/overrides/nbfw.png" /></a><img style="clear: both;float:left;" width=
"100px" height="75px" src="images/R02_C31.jpg" /><img style=
"clear: both;float:left;" width="100px" height="75px" src=
"images/R03_C31.jpg" /></div>

<div class="panel"><a style="clear: both;float:left;" title="Internet Protect" id=
"internet-protect" href=
"javascript:fb.loadAnchor('https://www.e-access.att.com/iprotect/portal/','width:95%%20height:95%');"
class="screenshot" rel="assets/overrides/internet_protect.png" name=
"internet-protect"><img width="96px" height="71px" style=
"border:2px solid orange;clear: both;float:left;" src=
"assets/overrides/internet_protect.png" /></a><img style="clear: both;float:left;"
width="100px" height="75px" src="images/R02_C32.jpg" /><img style=
"clear: both;float:left;" width="100px" height="75px" src=
"images/R03_C32.jpg" /></div>

<div class="panel"><img style="clear: both;float:left;" width="100px" height="75px"
src="images/R01_C33.jpg" /><img style="clear: both;float:left;" width="100px"
height="75px" src="images/R02_C33.jpg" /><img style="clear: both;float:left;"
width="100px" height="75px" src="images/R03_C33.jpg" /></div>

<div class="panel"><a style="clear: both;float:left;" title=
"Email Archiving Console" id="ac" href=
"javascript:fb.loadAnchor('https://partner.mxlogic.com/Login.aspx?ReturnUrl=%2fHome.aspx','width:95%%20height:95%');"
class="screenshot" rel="assets/overrides/seg.png" name="ac"><img width="96px"
height="71px" style="border:2px solid orange;clear: both;float:left;" src=
"assets/overrides/seg.png" /></a><img style="clear: both;float:left;" width="100px"
height="75px" src="images/R02_C34.jpg" /><img style="clear: both;float:left;"
width="100px" height="75px" src="images/R03_C34.jpg" /></div>

<div class="panel"><a style="clear: both;float:left;" title=
"Email Encryption Console" id="ec" href=
"javascript:fb.loadAnchor('https://partner.mxlogic.com/Login.aspx?ReturnUrl=%2fHome.aspx','width:95%%20height:95%');"
class="screenshot" rel="assets/overrides/att_com.png" name="ec"><img width="96px"
height="71px" style="border:2px solid orange;clear: both;float:left;" src=
"assets/overrides/att_com.png" /></a><img style="clear: both;float:left;" width=
"100px" height="75px" src="images/R02_C35.jpg" /><img style=
"clear: both;float:left;" width="100px" height="75px" src=
"images/R03_C35.jpg" /></div>

<div class="panel"><a style="clear: both;float:left;" title="Tech TV" id=
"tech-tv-popup" href=
"javascript:fb.loadAnchor('http://techchannel.att.com','width:95%%20height:95%');"
class="screenshot" rel="assets/overrides/tech_tv.png" name=
"tech-tv-popup"><img width="96px" height="71px" style=
"border:2px solid orange;clear: both;float:left;" src=
"assets/overrides/tech_tv.png" /></a><img style="clear: both;float:left;" width=
"100px" height="75px" src="images/R02_C36.jpg" /><img style=
"clear: both;float:left;" width="100px" height="75px" src=
"images/R03_C36.jpg" /></div>

<div class="panel"><a style="clear: both;float:left;" title=
"Internet Other Traffic Composite" id="iotc" href=
"javascript:fb.loadAnchor('http://www.att.com','width:95%%20height:95%');" class=
"screenshot" rel="assets/overrides/flood_other.png" name="iotc"><img width="96px"
height="71px" style="border:2px solid orange;clear: both;float:left;" src=
"assets/overrides/flood_other.png" /></a><img style="clear: both;float:left;"
width="100px" height="75px" src="images/R02_C37.jpg" /><img style=
"clear: both;float:left;" width="100px" height="75px" src=
"images/R03_C37.jpg" /></div>

<div class="panel"><img style="clear: both;float:left;" width="100px" height="75px"
src="images/R01_C38.jpg" /><img style="clear: both;float:left;" width="100px"
height="75px" src="images/R02_C38.jpg" /><img style="clear: both;float:left;"
width="100px" height="75px" src="images/R03_C38.jpg" /></div>

<div class="panel"><img style="clear: both;float:left;" width="100px" height="75px"
src="images/R01_C39.jpg" /><img style="clear: both;float:left;" width="100px"
height="75px" src="images/R02_C39.jpg" /><img style="clear: both;float:left;"
width="100px" height="75px" src="images/R03_C39.jpg" /></div>

<div class="panel"><img style="clear: both;float:left;" width="100px" height="75px"
src="images/R01_C40.jpg" /><img style="clear: both;float:left;" width="100px"
height="75px" src="images/R02_C40.jpg" /><img style="clear: both;float:left;"
width="100px" height="75px" src="images/R03_C40.jpg" /></div>

<div class="panel"><img style="clear: both;float:left;" width="100px" height="75px"
src="images/R01_C41.jpg" /><img style="clear: both;float:left;" width="100px"
height="75px" src="images/R02_C41.jpg" /><img style="clear: both;float:left;"
width="100px" height="75px" src="images/R03_C41.jpg" /></div>

<div class="panel"><img style="clear: both;float:left;" width="100px" height="75px"
src="images/R01_C42.jpg" /><img style="clear: both;float:left;" width="100px"
height="75px" src="images/R02_C42.jpg" /><img style="clear: both;float:left;"
width="100px" height="75px" src="images/R03_C42.jpg" /></div>

<div class="panel"><img style="clear: both;float:left;" width="100px" height="75px"
src="images/R01_C43.jpg" /><img style="clear: both;float:left;" width="100px"
height="75px" src="images/R02_C43.jpg" /><img style="clear: both;float:left;"
width="100px" height="75px" src="images/R03_C43.jpg" /></div>

<div class="panel"><img style="clear: both;float:left;" width="100px" height="75px"
src="images/R01_C44.jpg" /><img style="clear: both;float:left;" width="100px"
height="75px" src="images/R02_C44.jpg" /><img style="clear: both;float:left;"
width="100px" height="75px" src="images/R03_C44.jpg" /></div>

<div class="panel"><img style="clear: both;float:left;" width="100px" height="75px"
src="images/R01_C45.jpg" /><img style="clear: both;float:left;" width="100px"
height="75px" src="images/R02_C45.jpg" /><img style="clear: both;float:left;"
width="100px" height="75px" src="images/R03_C45.jpg" /></div>

<div class="panel"><img style="clear: both;float:left;" width="100px" height="75px"
src="images/R01_C46.jpg" /><img style="clear: both;float:left;" width="100px"
height="75px" src="images/R02_C46.jpg" /><img style="clear: both;float:left;"
width="100px" height="75px" src="images/R03_C46.jpg" /></div>
</div>
</div>

[ddadmin]

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

[mh984r]

I'm not able to post the link, it's an internal secure site, no access from the outside world :(

on the example page

http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

the top example with the left right buttons and the last picture is a puppy.

I'm using that example for my site but at the end where the puppy image shows up imagin a gap at the end about the same size as the other images in the carousel but no image.

I hope this helps see my issue.

Thanks

[ddadmin]

Does the gap act as a separate panel? For example, can you actually step to that panel, or does the carousel end at the final legitimate panel?

You might try decreasing or increasing the overall width of your carousel to see if that affects the size of the gap.

[mh984r]

It acts like another panel you can click the right pan button to pan to it. I will mess with the outter div size and let you know. Thanks for the response.

[mh984r]

ok I adjusted the width of the different CSS elements and no matter what the last panel is still there. Any other ideas?