Cufon doesn't work inside javascript

Question

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 javascript 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! :)

Answer 1

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