View Full Version : Stepcarousel Nav Button Problem

12-28-2010, 02:49 PM
1) Script Title: Stepcarousel

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

3) Describe problem: I am using the Stepcarousel on a page with Tabbed Panels. When I switch panels off the panel with the Stepcarousel, the left Nav button is still visible but on the left side of the page. How do I get the Nav buttons to disappear when switching panels or hiding the Stepcarousel?

12-30-2010, 07:41 PM
The nav buttons are added to the main BODY of the page and not inside the Carousel container. To hide them, you need to do it separately from the later. Given the below carousel instance, the function in red will allow you to hide/show its nav buttons when called:

<script type="text/javascript">

galleryid: 'mygallery', //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:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['arrowl.gif', -5, 80], rightnav: ['arrowr.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']

function showhidenavbuttons(galleryid, action){
var config=stepcarousel.configholder[galleryid]
var $navbuttons=config.$leftnavbutton.add(config.$rightnavbutton)
$navbuttons[action=="show"? "show" : "hide"]()


With the function in place, the following links when clicked on will hide/show the carousel's nav buttons:

<a href="javascript:showhidenavbuttons('mygallery', 'hide')">Hide buttons</a> | <a href="javascript:showhidenavbuttons('mygallery', 'show')">Show buttons</a>

In other words, you'd call the function:

showhidenavbuttons('mygallery', 'hide')

With the 1st parameter being the ID of the carousel instance, and the second parameter, either "show" or "hide". In your case you want to call this function when the user switches tabs. How to do this exactly depends on the tab script in question.