Home » jQuery » JQuery, Cufon, and Dynamic Content

JQuery, Cufon, and Dynamic Content


Yesterday I mentioned a new tool called Cufon that allows you to easily embed fonts in your web site.

One quirk about this tool is that your HTML has to be rendered prior to applying, or refreshing, the font. If you are using any kind of AJAXy stuff in your site, you’ll need to re-apply the font change.  The trick is knowing when to do this.

Of course, the easy way would be to do this as part of your AJAX call.  Render the HTML then call the Cufon code.  But what if you can’t do it then?

In my case, I wanted to load multiple “panels” at startup using the AJAX calls without having them tied to Cufon specifically.  That is, I want my jQuery code to work as more of a plugin, but I want it to render according to the site’s rules.

So I needed some way of detecting that the panels had been loaded.  Since they had a specific class in them that did not exist on the rest of the page, all I had to do was look for that class.  If it is there, replace the font.  If it isn’t, then wait some more and try again.

The code for this actually ends up being pretty simple.

I’m using replace instead of refresh because replace has never been executed for this tag set.

    var replaceh3 = function()
        var gotinside = false
            gotinside = true;
            if (i < 1)
                Cufon.replace('.xyzSlideShowSub h3', 
                  { fontWeight: 'bold' });
        if (!gotinside)
            setTimeout(replaceh3, 1000);


Other post in jQuery

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • Flash to jQueryFlash to jQuery I have long argued that 99% if the things people think they need to use Adobe’s Flash for could be done just as well using JavaScript. Now that jQuery is available, I am even more […]
  • jQuery – AccordionjQuery – Accordion If you’ve been using the MS-AJAX Accordion control, stop it right now!Seriously. Once I show you how easy the jQuery version is, you’ll want to drop it. Shoot! You may even want to […]
  • jQuery, Each() and Async GetsjQuery, Each() and Async Gets One of the things to keep in mind when using jQuery is that nothing is a blocking call.  Sure, there is a certain sequence to when things operate.  But, to be safe, you should […]
  • jQuery and ASP.NET UpdatePaneljQuery and ASP.NET UpdatePanel I’ve been busy over the last couple of weeks working on an administrative application that uses a ton of AJAXy stuff. The application is interactive in the sense that every time a field […]
  • ASP.NET AJAX using JSON – Here’s how.ASP.NET AJAX using JSON – Here’s how. Last week I wrote a post about how simple JSON is. In it I explained the main differences between using JSON and using the update panel. I really started out thinking I'd get to how to […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.

One Pingback/Trackback