cufonplusajax - General - our.umbraco.com

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

FONQI 10 posts 30 karma points

Jan 07, 2010 @ 15:49
0

Cufon+Ajax
Hi guys

Well, not excatly an umbraco question, but the solution i'm making it in is umbraco, and i can't seem to find out what causeing the error.
Let's get into it.

I have a simple ajax script there loads in childnodes of a page, the childnodes have got a cufon header, issue is i can't get the cufon to "refresh" after the content is loaded into the div - well it works in ie, but ff, chrome & opera don't register the refesh, iv'e googled everything about this issue but haven't found anything i can use.

My Ajax
```
<script type="text/javascript">

function geturl(myurl, containerdiv)
{
 $.ajax({
      type: "GET",
      url: myurl,
       success: function(html)
       {
     $("#"+containerdiv).html("");
         $("#"+containerdiv).html(html);
       }
 });
       
}

</script>
```
I've tried following solutions but none of the work
```
$("#"+containerdiv).load(myurl, function() {
     if (typeof (Cufon) != "undefined" && Cufon != null) {
        Cufon.replace('em', { fontFamily: 'NeoSansLight' });
    }
        
});
```
$("#"+containerdiv).load(myurl, Cufon.refresh);
```
$("#"+containerdiv).load(myurl, function() {
 Cufon.refresh('em');
});
```
Hope somebody can help me find an solution for this.
Copy Link
Thomas Kahn 602 posts 506 karma points

Jan 10, 2010 @ 11:43

0

Hi!

I think there might be a problem with the order of things. If the Cufon font replacement is run after the AJAX load it won't work. I usually solve these problems using a callback on the AJAX load that is triggered via a callback function after the new AJAX content has been loaded. But I can see you have already tried this.

Is the function where you load the AJAX content (geturl) inside or outside the document ready scriptblock? If it's outside it's probably run after the Cufon replacements. Difficult to tell what is happening just by looking at the code snippets.

If you have FireBug installed, try inserting some console.log statements in the different functions to see when they are triggered.

Regards,
Thomas Kahn

Copy Link
Stephan Lonntorp 195 posts 212 karma points

Jan 10, 2010 @ 19:16

0

I've had problems with this as well in the past, I've solved it exactly as Thomas has, by using a callback function, than calls Cufon.replace() on the elements that are refreshed. Be careful though, calling Cufon.replace() on items that are already replaced can cause some funkyness, so make sure to only update those elements that are affected by your ajax call.

Copy Link
Dan 1288 posts 3921 karma points c-trib

Jan 10, 2010 @ 20:17

0

If you're using jQuery (it looks like you are) you might also want to check out liveQuery. It can be used to bind jQuery methods to elements generated through AJAX calls.

Copy Link
FONQI 10 posts 30 karma points

Jan 11, 2010 @ 10:27

0

Thank you for your response everybody, i'll try inserting some console.log, and also checking out the liveQuery.

Copy Link
FONQI 10 posts 30 karma points

Jan 11, 2010 @ 10:33

0

Oh and if anybody would get the crasy thought of looking further into it the problem can be viewed here

http://bonesupport.fserver.dk/company/who-we-are/management.aspx

Any help is appreciated :)

Copy Link
FONQI 10 posts 30 karma points

Jan 11, 2010 @ 12:41
0
I'm on the top of the world :)

After trying everything there is to try with cufon, ajax & jquery i finnaly found the solution. If anybody get's this problem in the future i fixed it by
```
        $("#"+containerdiv).load(myurl, function() {
            Cufon.replace('.who', { fontFamily: 'NeoSansLight' });
        });
```
in umbraco i load childnodes into the topnode so in the childnode template i need to acivate cufón when the childnode is loaded.

simply add this to the bottom of your page/html being loaded into your div
```
         <script type="text/javascript">Cufon.now(); </script>  
```
Copy Link

Q8Dev 4 posts 24 karma points

Mar 19, 2011 @ 01:32

my solutions

first go to Cufon

second : in <head> add for example for Museo font:

 <!-- Custom Font Museo -->
    <script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>  
    
    <script type="text/javascript" src="/scripts/cufon-yui.js"></script>
   
    <script type="text/javascript" src="/scripts/Museo_500_400.font.js"></script>
            <script type="text/javascript">
              Cufon.replace('#slogen p,#main h2,#main h4,#main_navigation a,#sub_navigation a,#main_navigation .selected,#sub_navigation .selected', { fontFamily: 'Museo 500' }); 
   
            </script> 
    <!-- Custom Font Museo -->

and before closing BODY TAG </body> add that line :

<script type="text/javascript"> Cufon.now(); </script>

Flag this post as spam?

Cufon+Ajax