Reloading Cufon after Ajax load, please assist

Question

I have been trying every possible combination of cufon.replace - Cufon.refresh and Cufon.reload but i just cant seem to get this working. when original page loads cufon does its job, but when Ajax loads new content the cufon is missing. here is my java hope this makes sense to anyone, Cufon fires first, followed by Ajax,

    jQuery.noConflict();

/*
  * TYPOGRAPHY
*/

Cufon.set('fontFamily', 'ColaborateLight');
Cufon.replace('h2, #main h3, h4, h5, h6, #slogan, .label', {
    hover: true
});

Cufon.set('fontFamily', 'Colaborate-Medium');
Cufon.replace('#main_home h3', {
    hover: true
});

jQuery(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = jQuery('#nav2 li a').each(function(){
        var href = jQuery(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            jQuery('#content').load(toLoad)
        }                                           
    });

    jQuery('#nav2 li a').click(function(){
    jQuery("#nav2 li a").addClass("current").not(this).removeClass("current");

        var toLoad = jQuery(this).attr('href')+' #content';
        jQuery('#content').hide('fast',loadContent);
        jQuery('#load').remove();
        jQuery('#wrapper').append('<span id="load">LOADING...</span>');
        jQuery('#load').fadeIn('normal');
        window.location.hash = jQuery(this).attr('href').substr(0,jQuery(this).attr('href').length-5);
        function loadContent() {
            jQuery('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            jQuery('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            jQuery('#load').fadeOut('normal');
        }
        return false;

    });

});

and this is the pages in question that im having trouble with. Climate Page You will see the Ajax loader at the bottom of the page with a secondary menu list. I'm desperate guys, please help...

score 9 · Answer 1 · answered May 05 '11 at 14:50

9

I had the same issue, couldn't get this to work:

$("#my_div").load('some-ajax-file.php', Cufon.refresh);

But, wrapping Cufon.refresh in a function did the trick:

$("#my_div").load('some-ajax-file.php', function() { Cufon.refresh(); });

answered May 05 '11 at 14:50

jbnunn

6,161
4
40
65

1

Just ran into this problem, and your answer did the trick. I was originally trying it the way you were. – snowBlind Jun 06 '11 at 05:49

score 5 · Answer 2 · answered Oct 26 '12 at 15:36

5

this worked for me...

$(document).ajaxSuccess(function() {  
    Cufon.refresh();
});

answered Oct 26 '12 at 15:36

user1777574

51
1
1

score 2 · Answer 3 · answered Feb 14 '11 at 12:20

2

You could try this:

function showNewContent() {
    Cufon.refresh();
    jQuery('#content').show('normal',hideLoader());
}

This is also discussed in the cufon api docs - https://github.com/sorccu/cufon/wiki/API

answered Feb 14 '11 at 12:20

boz

4,891
5
41
68

score 1 · Answer 4 · edited Jul 18 '12 at 07:04

1

After ajax response you can simply use

Cufon.refresh();

That will reload cufon font style

edited Jul 18 '12 at 07:04

Jason Sturges

15,855
14
59
80

answered Jul 18 '12 at 06:34

Hiren Soni

574
3
11

score 0 · Answer 5 · answered May 21 '12 at 14:28

0

$(document).ajaxSuccess(function() { Cufon.refresh(); });

Hope it helps :)

answered May 21 '12 at 14:28

Sam Barnes

331
3
2

score 0 · Answer 6 · answered Jan 10 '11 at 16:45

0

Try adding this:

$(document).ajaxSuccess(function() {  
Cufon('h2'); // or whatever other cufon calls, really...
});

answered Jan 10 '11 at 16:45

hardyharzen

81
3

score 0 · Answer 7 · edited Oct 28 '12 at 03:59

0

I had same problem, and to make faster resolution made an in-line CSS

 <h5 style="font-family:xxx, Helvetica, sans-serif"></h5>

<style type="text/css">
  @font-face { 
    font-family: SWZ721C; 
    src: url('../../includedfiles/xxx.TTF');
  }

  @font-face {
    font-family: MyCustomFont;
    src: url("../../includedfiles/xxx.eot") /* EOT file for IE */
  }
</style>

edited Oct 28 '12 at 03:59

Adam Lear

38,111
12
81
101

answered Jan 11 '12 at 16:18

rikardo

1
1

Reloading Cufon after Ajax load, please assist

7 Answers7