AnythingSlider: Make Nav Tabs Inactive?

Question

I'm using the AnythingSlider tool and am having some trouble with the css and js on this. Basically, the slider has a number of navigation tabs that help jump from slide to slide. I want to change this so that when a coldfusion conditional runs, certain tabs will either remain in a default state or become inactive (change color of tab to grey, not let anything happen when user clicks on that tab.)

So basically, my CF would be something like

<cfif #X# is ""> //if true, make tab #2 not clickable, change color to grey
                 //else, if false, keep tab normal.

The slider is basically set up in html like this:

<ul>
    <li></li>  //slide #1
    <li></li>  //slide #2  etc etc
</ul>

I had the idea that maybe I could set up a class li class="false" as an example and have two li tags per 'slide' (show one if x is true, the other if not.)

So, I'm not sure if this makes sense but mostly, I need a hand manipulating the CSS. The code for the slider tabs looks like:

div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a {
    background-color: #7C9127;
}

UPDATE Well, I don't get it. This is the code at the end of my page (just before ending BODY tag. I threw some alerts in there just to make sure the code runs and it does. But, nothing happens. Tabs don't become inactive and color never changes.

I altered anythingslider.css to include this:

div.anythingSlider.activeSlider .thumbNav a.false,
            div.anythingSlider.activeSlider .thumbNav a.false:hover { background: #555; }

and this is at the bottom of my main page. This script is wrapped in some cfoutput tags:

    <cfif #selected_main_details.X# IS "">
        settab(3, false);
    <cfelse>
        settab(3, true);
    </cfif>

function settab(num, enable){
 var panel = $('.thumbNav a.panel' + num);
 if (enable){
  panel
   .removeClass('false')
   .unbind('click')
   .bind('click', function(){
    panel.closest('.anythingSlider').find('.anythingBase').data('AnythingSlider').gotoPage(num);
    return false;

   })
 } else {

  panel
   .addClass('false')
   .unbind('click focusin')
   .bind('click', function(){                     
    return false;

   })

 }
}

Answer 1

If you want to just change the tab color, use this css

div.anythingSlider.activeSlider .thumbNav a.false,
div.anythingSlider.activeSlider .thumbNav a.false:hover { background: #555; }

It's a bit more work if you want to actually disable the tab. I put together this function to enable or disable a specific tab. Granted this function will break the hash tag functionality for that tab and it doesn't disable the keyboard or any script that targets that panel - that would require some changes to the plugin (Demo).

function settab(num, enable){
 var panel = $('.thumbNav a.panel' + num);
 if (enable){
  panel
   .removeClass('false')
   .unbind('click')
   .bind('click', function(){
    panel.closest('.anythingSlider').find('.anythingBase').data('AnythingSlider').gotoPage(num);
    return false;
   })
 } else {
  panel
   .addClass('false')
   .unbind('click focusin')
   .bind('click', function(){
    return false;
   })
 }
}

Use the above function as follows

• If you have more than one AnythingSlider on the page, then the panel variable should be defined as follows with the #slider targeting the specific slider:

  var panel = $('#slider').closest('.anythingSlider').find('.thumbNav a.panel' + num);
  

  if there is only one, then this shorter variable will work

  var panel = $('.thumbNav a.panel' + num);
  

• Disable the tab as follows:

  settab(3, false);
  

• Enable the tab as follows:

  settab(3, true);