Cufon doesn't work inside javascript

I have the following problem. I have some text within a javascript. I want the text to look nice, so I wrapped it with "h3" which carries a cufon canvas jav开发者_开发技巧ascript modifier, so it will look different from the normal font. However, text within Javascript doesn't seem to be affected by cufon.

I've tried a few things to make it work, but nothing seems to work.

This is the code:

jQuery.noConflict();
jQuery(document).ready(function($) {

  var author = $('#author').val();
  if( author !='' && $('#email').val() !='' ) {
    $('#authorData').hide();
    $('#authorData').before('<div id="welcome"> <h3>Welcome back, <strong>' + author + '</strong>! <a href="#">Edit &raquo;</a></h3></div>')
    $('#welcome a').toggle(
      function() {
        $('#authorData').show(300);
        $(this).html('Minimize &raquo;');
        return false;
      },
      function() {
        $('#authorData').hide(300);
        $(this).html('Edit &raquo;');
        return false;
      }
    );
  }

});

My idea is to get the whole "weclome div" into the actual php and out of the javascript code and just leave a "redirector" in the javascript, but I'm not sure if that's possible at all.

Any ideas how to make this work?

My cufon script looks like this:

 Cufon.replace('h1',{hover: true})('h2')('h3')('.stepcarousel .panel .caption .title');

P.S.: It kind of works in Internet Explorer, but not in Firefox. Very weird!

Thanks a lot for any advice and suggestions! :)

cufon doesn't work if element or parent is display: none ( you are using hide() ). Use visibility hidden instead.

You appear to be appending the content after the DOM is ready. You haven't shown in your code where you actually call the Cufon.now() method, but I'm assuming it's called before your elements are appended to the DOM.

If you check the Cufon API you will see the refresh method, which can be called to do precisely that:

Cufon.refresh();

You need to call the refresh method if new text is added to the document, or even if existing text changes (e.g. font size is increased).