Cufon in RadPageView

[Roger]

Hi,
a design coder is using Cufon to get the desired font. This works well when the page first loads but when I change pages via a radtabstrip , the font formating dissapears.
I have seen several examples that use the OnResponseEnd event of the RadAjaxManager to fire Cufon.refresh(), but this removes all the text so that no h2 tags appear on the page.

I'm using the code:

function responseEnd(sender, eventArgs) {
    Cufon.replace('h1', { hover: true });
    Cufon.replace('h2', { hover: true });
    Cufon.now();
}

Anybody have any ideas?
Regards
Roger 

[sitefinitysteve]

If you're using an Ajax callback, then yeah the Cufon will need to be re-applied...I can't see why the code below WOULDN'T work.

Like if you open Firefox\Firebug in the Console tab, are there any script errors generated?  Optionally can you manually call the Cufon code below in the Console tab?

[Roger]

Hi Steve,
thanks for the advice.
Used firebug:

• no errors reported
• when script run manually, everything runs ok but no changes made to script.

Console just says the following

>>> Cufon.replace('h2'); Cufon.now();

function()

must be something else to do with ajax.

Roger

[sitefinitysteve]

Hmmm, in the OnResponseEnd set a timeout of like 5 seconds, then call the Cufon, what happens?

[Roger]

Hi Steve,

no again...waits 5 seconds and runs the cufon.refresh but no change to text. To explain more, I have a tabstrip with 2 pageviews. When the page first appears all the h1/h2 tags are modified to my new font. When I cleck  the tab ab\nd go to another pageview, the font doesn't change and I get the old h1/h2 fonts. Also when I then click the tab to go back to the original page then the old fonts appear.
The ajaxmanager is in a master page with the rest in a content page.Everything "appears" to be working with no errors but the fonts will not change.
There is nothing fancy in the content page.

Regards
Roger

[Dimitar Terziev]

Hi Roger,

In order to troubleshoot your issue, please open a support ticket and provide us with a runnable sample page so we could examine it locally in order to find a solution.

Regards,
Dimitar Terziev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Roger]

Found the solution. The cufon scripts aren't reloading after the ajax call. You need to:

(a)  put a reference to jquery above the cufon script references

<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/cufon/cufon-yui.js"></script>
<script type="text/javascript" src="../Scripts/cufon/Harabara_700.font.js"></script>
<script type="text/javascript" src="../Scripts/cufon/cufon-load.js"></script>

(b) add an "onResponseEnd" client event to RadAjaxManager

       <telerik:RadAjaxManager ID="RadAjaxMaster"
                    runat="server" >
        <ClientEvents OnResponseEnd="responseEnd" />
       </telerik:RadAjaxManager>

(c) add the onResponseEnd function that loads the cufon scripts and then refreshes after each ajax call

function responseEnd(sender, eventArgs) {
              $.ajax({ url: '../Scripts/cufon/cufon-yui.js' });
              $.ajax({ url: '../Scripts/cufon/Harabara_700.font.js' });
              $.ajax({ url: '../Scripts/cufon/cufon-load.js' });
             Cufon.refresh();
            }

note that the URL is the url where your scripts are on your website.

[Dimitar Terziev]

Hi Roger,

I'm glad that the problem is now solved and thank you for sharing the solution.

Best wishes,
Dimitar Terziev
the Telerik team