Results 1 to 2 of 2

Thread: Stepcarousel Nav Button Problem

  1. #1
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Stepcarousel Nav Button Problem

    1) Script Title: Stepcarousel

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.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?

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <script type="text/javascript">
    
    stepcarousel.setup({
    	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"]()
    }
    
    </script>
    With the function in place, the following links when clicked on will hide/show the carousel's nav buttons:

    Code:
    <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:

    Code:
    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.
    DD Admin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •