Step Carousel Viewer - onslide:function()

[ian_d]

1) Script Title: Step Carousel Viewer v1.9

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

3) Describe problem:
OK, I am very new to the javascript and jQuery world so this may well be a noob problem, which is with a single line of code in the setup param onslide:function.

To put it simply the issue I have is with jQuery's animate not being executed every time a panel is moved.

Let me explain...

<script type="text/javascript" charset="utf-8">
stepcarousel.setup({
galleryid: 'informationpage', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:false, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:false},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['/images/ico_navl2.png', 0, 0], rightnav: ['/images/ico_navr2.png', 0, 500]},
statusvars: ['currentPanel', 'sameascurrentPanel', 'totalPanels'], // Register 3 "status" variables
contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
onslide:function(){
jQuery(document).ready(function(){
jQuery(".panel").css("margin-top", jQuery("#pageOptions").outerHeight(true) + "px")
jQuery("#informationpage").animate({height: jQuery("#panel"+currentPanel).outerHeight(true) + "px"},  500)
})
}
});
</script>

The highlighted line is one that runs fine when the script is first loaded, i.e the first time, but upon sliding after this, it doesn't do anything. This is particularly annoying and even more baffling seeing as ...

jQuery("#informationpage").css("height", jQuery("#panel"+currentPanel).outerHeight(true) + "px")

works exactly how I would want and expect it to work.

Could this be a script or jQuery error?

Any help would be much appreciated. I can't seem to find the answer anywhere through hours of searching.

Many thanks.

[jscheuer1]

It's difficult to visualize what you're trying to do. I haven't poured over the documentation for this script, though I know it fairly well, and I cannot see certain key parts of the markup that your code appears to be trying to manipulate. Even if I could, there's no way of knowing exactly how you have things laid out.

So it would be good to have a link to your page:

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

That said, the code looks OK assuming the elements exist and have room to do what you are asking of them.

[ian_d]

Thanks for your reply John.

I have replicated this problem on my development server so you can visualize what's going on. It's actually a very simple process.

Please see here

At the moment the animate() function is commented out and the css() function is doing all the work all good and correct. All I want to do is animate the height change to fit the content... sounds so easy!

Any help would be much appreciated.

Thanks and regards

[jscheuer1]

Apparently the value isn't quite available yet when the animation runs because this works:

stepcarousel.setup({
	galleryid: 'informationpage', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:3000},
	panelbehavior: {speed:500, wraparound:false, persist:false},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://iandickety.co.uk/dev/images/ico_navl2.png', 0, 0], rightnav: ['http://iandickety.co.uk/dev/images/ico_navr2.png', 0, 0]},
	statusvars: ['currentPanel', 'sameascurrentPanel', 'totalPanels'], // Register 3 "status" variables
	contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
	onslide:function(){
    jQuery(".panel").css("margin-top", jQuery("#pageOptions").outerHeight(true) + "px")
    setTimeout(function(){jQuery("#informationpage").animate({height: jQuery("#panel"+currentPanel).outerHeight(true)},  500);}, 0);
	}
});

I know, makes no sense in light of how the straight css command worked. But there it is.

[ian_d]

Thanks John, you're a star.

Just out of interest, would you mind explaining a little further just what the problem was and what setTimeout does to fix it?

Once again thanks so much, it's much appreciated!

[jscheuer1]

Apparently the value isn't quite available yet when the animation runs because this works . . .

I know, makes no sense in light of how the straight css command worked. But there it is.

. . . Just out of interest, would you mind explaining a little further just what the problem was and what setTimeout does to fix it? . . .

As my quoted remarks indicate, I really didn't know. And I'm still not absolutely certain. However, upon examining the stepcarousel.js script I found various references to this onslide function like this one:

config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)})

I also found this in the init:

config.onslideaction=(typeof config.onslide=="undefined")? function(){} : function(beltobj){$(beltobj).stop(); config.onslide()} //attach custom "onslide" event handler

So there could be something in the stop, it can have two boolean parameters and perhaps having them both default to false isn't appropriate here. Perhaps having the stop there at all actually prevents any further animations in the onslide. Perhaps there is some other animation or stop action (from another part of the nearby or nearby associated code) going on that conflicts.

Again, I'm still not certain. But it's pretty clear that I was initially wrong. The value must be available, otherwise the straight css command wouldn't have worked.

What setting a 0 timeout does though is allow an ongoing process (like some other animation effect, but it could be something else) that is capable of being multi-threaded to complete before the process inside the timeout initiates.

It doesn't always do this, but obviously has in this case. Just what the multi-threaded process is - that's what I'm still unsure of. It could be any of the things I've mentioned, which included "but it could be something else". So I guess I at least have all the bases covered this time.

[ian_d]

John - thanks so much for taking the time out to explain.

Makes very interesting reading. I could never have figured that out on my own so I'm very pleased I asked!

Regards.