Results 1 to 6 of 6

Thread: Step Carousel Viewer

  1. #1
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Step Carousel Viewer

    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.

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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,903
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

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

  3. #3
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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/dynamici...epcarousel.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

  4. #4
    Join Date
    Aug 2004
    Posts
    9,903
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    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.
    DD Admin

  5. #5
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •