Cufon - jQuery, Replace font color on click

Question

Hello

I am using cufon for some font replacement and jQuery to build a custom accordion.

the code for my accordion is something like this:

 $(".acc-title").click(function () {
   //show something, hide something etc.
 });

Is it possible during the click event to change the color of the replaced (with cufon) font?

something like:

$(".acc-title").click(function () {
       //some something, hide something etc.
       Cufon.replace('how do i select ONLY the title of this', { color: '#fff' });
});

Answer 1

Not sure but if your cufon is an html element, then you can change color of it this way:

$(".acc-title").click(function () {
  $(".acc-title").css('color', '#ff0000');
});

Answer 2

I would be looking at using a CSS class instead of changing the colour through the css function

$(document).ready(function(){
    $(".acc-title").click(function () {
        $("#cufonid").addClass('cufonCSSClass');
    });
});

Although, if you are looking to show/hide:

        $("#cufonid").show();
        $("#cufonid").hide();

If acc-title is the thing you are operating on, then the following will suffice:

    $(".acc-title").click(function () {
        $(this).addClass('cufonCSSClass');
        //or
        $(this).hide();
        //etc, etc
    });

You could also speed the above acc-title selector by combining it with the ID of a parent element.

    $("#somparentid .acc-title").click(function () {

Or give the item an ID itslef:

    $("#acc-title").click(function () {

Or, your h2 (this is a little slower, though):

    $("h2.acc-title").click(function () {

So, to summarise, your answer might look something like:

$(document).ready(function(){
    $("h2.acc-title").click(function () {
        $(this).addClass('cufonCSSClass');
    });
});

But I'm guessing a bit as I'm not entirely sure what you're after

Answer 3

You must use Cufon.refresh(); after you change the color by CSS. Like this:

$("#tab1").click(function() {
   $("#tab2").removeClass("selected");
   $("#tab1").addClass("selected");
   Cufon.refresh();
}