Step Carousel Viewer - why need to reload page?

[edfx]

1) Script Title: Step Carousel Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem: I have a basic test page with two Step Carousel Viewers. One is setup to show 4 up at once and the other just shows 1. When you first visit the page, the first carousel works fine, but the second one does not. It jumps to the last image and does not allow you to scroll. This is fixed when you refresh once or twice.

http://www.njn.net/edtest/step/index8.html

It's happening in IE8, Firefox, and Chrome. I'd like it to be fixed and work without having to refresh the page again. Any help would be appreciated!

[ddadmin]

These happens because inside videos.js, each DIV holding the contents is missing an explicit width attribute, unlike the first Carousel, which does, via:


.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 132px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

You'll need to do something similar for the second Carousel's DIVs as well.

[edfx]

How exactly would I do that? I added the "width="300" into each DIV on video.js but that didn't do it.

I also created this...

#mygallery2 .panel{
margin: 0px;
width: 300px;
}

That didn't work either. So do I have to duplicate that style?

[ddadmin]

Since the DIVs in your 2nd Viewer carry the class videos, the CSS to add needs to be:


#mygallery2 .videos{
margin: 0px;
width: 300px;
}

[edfx]

That did it! Thanks so much!!!