.NET Answers

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.

$(document).ready(function()
{
    var replaceh3 = function()
    {
        var gotinside = false
        $('.xyzSlideShowSub').each(function(i)
        {
            gotinside = true;
            if (i < 1)
            {
                Cufon.replace('.xyzSlideShowSub h3',
                  { fontWeight: 'bold' });

            }
        })
        if (!gotinside)
            setTimeout(replaceh3, 1000);
    }
    replaceh3();
 });

Other Related Items:

Ultraman Original (1966 Version) Ultra Hero Series #1 - 2009 Refresh (New Sculpt)A figure refresh and exciting new blister packaging offer a new perspective on your favorite Ultraman action figure. Information contained on the package highlights Ultraman's special attributes, including the shape and detailing of his footprints.

Manhattan MMX Wireless Optical Mobile Mini Mouse 176811"27 MHz technology offers wireless freedom with effective range up to 1.5 m (5 ft.)
Auto power management and detachable cable help maintain batter... Read More >

The Replace Your Cricut Cartridges with Fonts and Graphics DVD

Related Post

• jQuery and ASP.NET UpdatePanel
• jQuery, Each() and Async Gets
• Flash to jQuery
• jQuery – Accordion
• jQuery 1.4 Released

Bookmark to:

Hide Sites

One Response to “JQuery, Cufon, and Dynamic Content”