Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reloading Cufon after Ajax load, please assist

Tags:

jquery

ajax

cufon

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...

like image 700
Christo Van Wyk Avatar asked Jan 03 '11 14:01

Christo Van Wyk


4 Answers

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(); });
like image 80
jbnunn Avatar answered Oct 22 '22 11:10

jbnunn


this worked for me...

$(document).ajaxSuccess(function() {  
    Cufon.refresh();
});
like image 33
user1777574 Avatar answered Oct 22 '22 09:10

user1777574


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

like image 26
boz Avatar answered Oct 22 '22 10:10

boz


After ajax response you can simply use

Cufon.refresh();

That will reload cufon font style

like image 41
Hiren Soni Avatar answered Oct 22 '22 11:10

Hiren Soni