I am encountering some issues with the css and js while using the AnythingSlider tool. Specifically, I want to modify the navigation tabs in a way that certain tabs will either remain unchanged or become inactive based on a ColdFusion conditional.
For instance, my ColdFusion code might look something like this:
<cfif #X# is ""> //if true, make tab #2 not clickable, change color to grey
//else, if false, keep tab normal.
The HTML structure of the slider is as follows:
<ul>
<li></li> //slide #1
<li></li> //slide #2 etc etc
</ul>
I had an idea to create a class "false" for li tags and display one per slide based on the condition (show one if x is true, the other if not).
Essentially, I require assistance in manipulating the CSS to achieve this. The current CSS code for the slider tabs is:
div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a {
background-color: #7C9127;
}
UPDATE Despite making changes in the CSS and script at the end of my page, the desired outcome is not being achieved. The tabs are not becoming inactive, and the color is not changing.
I made alterations in anythingslider.css by adding:
div.anythingSlider.activeSlider .thumbNav a.false,
div.anythingSlider.activeSlider .thumbNav a.false:hover { background: #555; }
This script is added towards the end of my main page within 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;
})
}
}