View Full Version : step carousel default button positioning

04-09-2009, 07:12 PM
1) Script Title: Step Carousel Viewer v1.6.1

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

3) Describe problem: This script works great except for when content above the carousel changes length. The carousel moves relative to the content above, BUT the default buttons stay in the same place and i need them to move WITH the carousel, relative to the content above. So far i think the problem only exists in firefox. I noticed the .js calls for them to have z-index: 50 and absolute positioning. anyway to force their position to be relative?

Much thanks to anyone who can help. :)

04-09-2009, 09:45 PM
This script works great except for when content above the carousel changes length.

Is the content above it being changed literally to cause the change in height? Also, is there a specific event associated with this content change, just as when the user clicks a button, or does it happen without any user interaction?

04-10-2009, 03:15 PM
Yes the height is changing because of tab content above of varying length. The default buttons stay in their original position despite the change above. so i guess yes, there is an event associated when the user clicks to change tabs. The carousel itself does move with the rest of the content on the page. but the buttons only reposition themselves if the window is resized.

ideas????? so many thanks for your help.


04-11-2009, 06:42 AM
Ok, assuming the change in height of the content above the Viewer is triggered via a click of the mouse, inside the .js file, add the code in red to the existing block below to compensate:

$(window).bind("load resize click", function(){ //refresh position of nav buttons when page loads/resizes, in case offsets weren't available document.oncontentload
config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")}
config.$leftnavbutton.css({left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px'})
config.$rightnavbutton.css({left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px'})

04-13-2009, 02:17 PM
Thanks for your help! unfortunately though, that didn't do it.
here is a link to the a page that has the problem.


any other ideas?

04-13-2009, 11:31 PM
There's an error with your modification:

$(window).bind("load resize onclick oncontentload", function(){

It should just be:

$(window).bind("load resize click", function(){

04-14-2009, 11:44 AM
still no go. i had tried that originally, as you said, and only added the "onclick" and oncontentload when it did not work. It seems to only be happening on the macs , that i've seen at least. Is there a different script ? i'm ready to start from scratch if i i have to .