View Full Version : Problem with Panels on Step Carousel Viewer

08-11-2008, 05:59 PM
1) Script Title: Step Carousel Viewer

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

3) Describe problem: I am trying to implement Demo 1 on a commercial website within an accordion script. I found a working example of the DD script here http://www.travisneilson.com/

After I set up the page and accordion I inserted the Carousel Viewer Script into the page and it worked fine! :D I showed it to my client and they were pleased. As we continued to make changes to the website some how I messed up something. :( Now the panels are stuck on top of each other. When ever forward one panel or back one panel is clicked the panels only move slightly to the left each time and somewhat off of the div.

Http://www.cucad.org/main.html (the viewer is inside the Actividades tab)

I erased the whole page and started again from scratch going line by line with the coding from DD and the one at travisneilson.com

I do not know what I did wrong, but I really need some help. I am new to scripting...any guidance would be appreciated.

08-14-2008, 06:48 PM
You're missing your stepcarousel.js file. It should be in the same directory as main.html.

08-14-2008, 07:34 PM
Thanks! I moved them to the proper directory...still I have the same problem..(panels stacked on top of each other) I will start from scratch again and see if it works this time.

08-15-2008, 01:15 AM
You know, you don't need to e-Mail me. I'm not the only one that can help you.

Evening... I am sure you are super busy...
I'm not sure if playing video games qualifies as being 'busy'... :p

the panels are still "stuck together"
Well, are you sure you d--oh, wait. The panels aren't stacked anymore. They're physically ON TOP of each other. :p

If it can wait a couple days, I can reconstruct the page from the ground up. This is just...weird.

EDIT: WAIT. If it looks fine locally (while on your computer), just upload the ENTIRE SITE and then try it out.
EDIT: Ohh, nvm.
EDIT: BTW, your document looks like HTML 4.01 Transitional to me. More or less. Browsers are less strict about HTML than XHTML. Try changing your <!DOCTYPE and try that.

08-15-2008, 02:16 AM
Sorry for the e-mailing...I am desperate:p . All I did was copy and paste the codes how in the world did I mess that up? I will try the suggestions you made and hopefully that will fix the problem

08-15-2008, 05:15 AM
The problem is due to the fact that the Carousel Viewer is inside a collapsed DIV to begin with. This causes all the measurements of the panels to return 0 instead of the correct numbers. One manual workaround is to explicitly set the dimensions of each panel inside the HTML, such as:

<div style="float: none; position: absolute; left: 0px; width:250px; height:180px" class="panel">
<img src="test_files/531q3n.jpg">

<div style="float: none; position: absolute; left: 10px; width:250px; height:180px" class="panel">
<img src="test_files/xp3hns.jpg">

<div style="float: none; position: absolute; left: 20px; width:250px; height:180px" class="panel">
<img src="test_files/11l7ls0.jpg">

<div style="float: none; position: absolute; left: 30px; width:250px; height:180px" class="panel">
<img src="test_files/119w28m.jpg">

<div style="float: none; position: absolute; left: 40px; width:250px; height:180px" class="panel">
<img src="test_files/34fcrxz.jpg">

Then inside stepcarousel.js, find the following line:

paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.get(0).offsetWidth) //calculate next panel offset

and replace it with the below to use the specified values for the panel dimensions:

paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.css('width')) //calculate next panel offset

08-15-2008, 05:54 PM
Thank You Thank You Thank You Thank You Thank You!!!! Finally it is working

02-02-2009, 09:29 AM
hello guys im just a newbie

here's my problem with the step carousel viewer

i inserted a iframe to play an audio file

but it happens that it doesnt hide the play pause stop button, i checked it in other browsers it works fine only in firefox doesnt is there any way it will work with firefox?

02-02-2009, 07:28 PM
I'm not all that familiar with Flash. Depending on how your buttons are set up, you may try adding something like:

<param name="wmode" value="transparent">

and see if that changes anything. A helpful thread on a similar issue: http://www.dynamicdrive.com/forums/showthread.php?t=24752