Cufon in RadPageView

8 posts, 0 answers
  1. Roger
    Roger avatar
    183 posts
    Member since:
    Sep 2007

    Posted 05 Sep 2011 Link to this post

    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 
  2.
  3. Steve
    Steve avatar
    1886 posts
    Member since:
    Dec 2008

    Posted 06 Sep 2011 Link to this post

    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?
  5. Roger
    Roger avatar
    183 posts
    Member since:
    Sep 2007

    Posted 08 Sep 2011 Link to this post

    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

  7. Steve
    Steve avatar
    1886 posts
    Member since:
    Dec 2008

    Posted 08 Sep 2011 Link to this post

    Hmmm, in the OnResponseEnd set a timeout of like 5 seconds, then call the Cufon, what happens?
  8.
  9. Roger
    Roger avatar
    183 posts
    Member since:
    Sep 2007

    Posted 11 Sep 2011 Link to this post

    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
  11. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 13 Sep 2011 Link to this post

    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.
  13. Roger
    Roger avatar
    183 posts
    Member since:
    Sep 2007

    Posted 25 Oct 2011 Link to this post

    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.
  14.
  15. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 27 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top