CODEWITHSUNDEEP
jquerycufon
user1015214
user1015214

Reputation: 3091

How to dynamically change text which has Cufon applied to it

I am working on a site which has Cufon applied to it. Before cufon, I have the following markup:

<label class="option" for="edit-delivery-method-U.S.-postal-delivery">
  <input type="radio" id="edit-delivery-method-U.S.-postal-delivery" name="delivery-method" value="U.S. postal delivery" checked="checked" class="form-radio" />
  U.S. postal delivery 
</label>

After Cufon, the text was replaced with 4 Cufon->canvas tags, replacing each word of text. 

<label class="option" for="edit-delivery-method-U.S.-postal-delivery">
<input type="radio" id="edit-delivery-method-U.S.-postal-delivery" name="delivery-method" value="U.S. postal delivery" checked="checked" class="form-radio"> 
<cufon class="cufon cufon-canvas" alt=" " style="width: 4px; height: 14px;"><canvas width="20" height="17" style="width: 20px; height: 17px; top: -2px; left: -2px;"></canvas><cufontext> </cufontext></cufon>
<cufon class="cufon cufon-canvas" alt="U.S. " style="width: 25px; height: 14px;"><canvas width="41" height="17" style="width: 41px; height: 17px; top: -2px; left: -2px;"></canvas><cufontext>U.S. </cufontext></cufon>
<cufon class="cufon cufon-canvas" alt="postal " style="width: 39px; height: 14px;"><canvas width="54" height="17" style="width: 54px; height: 17px; top: -2px; left: -2px;"></canvas><cufontext>postal </cufontext></cufon>
<cufon class="cufon cufon-canvas" alt="delivery" style="width: 46px; height: 14px;"><canvas width="59" height="17" style="width: 59px; height: 17px; top: -2px; left: -2px;"></canvas><cufontext>delivery</cufontext></cufon>
</label>

I would like to dynamically change this text on a click event. I don't see how I can target this properly with jQuery to change the text. When looking at the Cufon API here https://github.com/sorccu/cufon/wiki/API, I found something which I thought might work but its not working for me. Here is my code:

 var usPostalOneYearLabel = $('#edit-delivery-method-U.S.-postal-delivery-wrapper label');
var deliveryMethod = $('input[name="delivery-method"]');
deliveryMethod.change(function() {
    if(deliveryMethod.filter(':checked').val() === "U.S. postal delivery") {
        console.log('yay!');
        var html = usPostalOneYearLabel.html();
        Cufon.replace(usPostalOneYearLabel, {
            modifyText: function() {
                return 'hello world';
            }
        });
        Cufon.refresh(usPostalOneYearLabel);
        console.log('html');
    }
});

Can someone point me in the right direction here?

Upvotes: 0

Views: 357

Answers (1)

user2267379
user2267379

Reputation: 1137

I have found the solution :

First : replace alt attribute of the cufon tag.

<cufon class="cufon cufon-canvas" alt="Home"

to : 

<cufon class="cufon cufon-canvas" alt="Lorem"

Second execute in javascript :

Cufon.replace('.menu-item a');

in my case. (to be applicate for each element to replace)

Upvotes: 1

Related Questions