Step Carousel problems

[Dramatic]

1) Script Title: Step Carousel Viewer 1.8

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm


Hi,
I am trying to implement this script at
http://test.qpsport.com/fr/ and am having two problems:

Firstly, the content is positioned too far to the left. This could be because there are other framing elements within the .stepcarousel element, but I'm not sure how to configure the offset.

Secondly, my (non-default) buttons are not working. (I have managed to make the left one visible via z-index)

Thanks in advance for your help with these.
Richard

[ddadmin]

Hmm not quite sure what you mean by "framing" elements? At a glance your script looks to be set up properly actually. The reason why it doesn't scroll when you click on the navigation buttons is that your Carousel contains no content at the moment:

<div id="panelframe" class="stepcarousel">
				<div id="paneltop">&nbsp;</div>
				<a id="panelbuttonleft" href="javascript:stepcarousel.stepBy('panelframe', -1)"><b>Previous</b></a>
				<img src="/images/homepage/panel_left.png" alt=""  style="display:block; float:left; z-index:10;" />
				<div class="belt">
				
				</div>  <!-- belt -->

				<img src="/images/homepage/panel_right.png" style="position:absolute; top:8px; right:0;" alt="" />
				<div id="tittle"></div>
				<a id="panelbuttonright" href="javascript:stepcarousel.stepBy('panelframe', 1)"><b>Next</b></a>
				
			</div>

In other words, there is no content inside the "belt" DIV.

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

[Dramatic]

Hmm not quite sure what you mean by "framing" elements? At a glance your script looks to be set up properly actually. The reason why it doesn't scroll when you click on the navigation buttons is that your Carousel contains no content at the moment:


In other words, there is no content inside the "belt" DIV.

Which is exactly what the instructions for loading via ajax say it should do. The behaviour was no different when I had 2 panels inline in the page before swapping them out to an ajax file and changing the content-type. The first panel does load for me, it's just too far to the left.

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

Sorry. I'll point out in my defence that the documentation page does not mention this requirement anywhere that I can see. I did eventually find the credit notice in the full example, but I hadn't cut and paste that because I already had all my panel content statically in the page before I started trying to implement the script. "instated" now.

[Dramatic]

*bump* - can anyone tell me how to adjust the position of the panel within panelframe?

[Dramatic]

ok, positioning issue is sorted, but while the carousel content is loading, it isn't stepping,either automatically or via buttons. (I also tried activating the default buttons to no avail). Javascript console is not showing any errors.

http://test.qpsport.com/fr/

[ddadmin]

The HTML for your Carousel Container is missing a "belt" DIV. Try changing:

			<div id="panelframe" class="stepcarousel">
				<div id="paneltop">&nbsp;</div>
				<a id="panelbuttonleft" href="javascript:stepcarousel.stepBy('panelframe', -1)"><b>Previous</b></a>
				<img src="/images/homepage/panel_left.png" alt=""  style="display:block; float:left; z-index:10;" />
				<div class="belt">

				
				</div>  <!-- belt -->
				<img src="/images/homepage/panel_right.png" style="position:absolute; top:8px; right:0;z-index:15;" alt="" />
				<div id="tittle"></div>
				<a id="panelbuttonright" href="javascript:stepcarousel.stepBy('panelframe', 1)"><b>Next</b></a>
				
			</div>

to:

			<div id="panelframe" class="stepcarousel">
			<div class="belt">
			</div>
			</div>

See this page for more info.

[Dramatic]

If you mean that div.belt has to be the first child of the carousel div rather than the second child, changing that didn't work either. I've solved the problem with a different jQuery plugin.