Question

Here's my problem. I have the following code (I took away irrelevant parts):

    $('.poll').click(function (e) {
         $.post('/my/ajax/script', {}, function(d) {
             j = $.parseJSON(d);
             var el = $('#my_msg').find('.message-text').find('p'); 
             // That p has class which was consumed by Cufon at document ready
             el.html(j.message);
             $('#my_div').fadeIn(fadeTime, function() { Cufon.refresh(); });                      
         });
     }
     e.preventDefault();
 });

If I remove Cufon.refresh callback, everything works as expected (popup containing j.message shows up). But if I leave it, text is rendered only partially (last word is missing, whole text is invisible).

What might be the reason of such behavior?

Was it helpful?

Solution

I've found the solution and it was quite simple. There are two Cufon-prepared fonts loaded at head section of my page, used for different (not intersecting) selectors. After the line about first (desired) font, Cufon.replace is called. As there are no other fonts, Cufon replaces everything given with this font. But after that comes the second font.

In that case Cufon.refresh() strangely replaces every selector it consumed before with the last font. That happens because first Cufon.replace(...) lines didn't specify font.

Cufon.replace(selector, fontOptions) instead of Cufon.refresh() solved it.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top