Why won't Cufon allow an addclass function with jQuery?

Question

Man, I just don't get it. I have four sets of paired links, where by hovering over one sets off the other. I have it working in jQuery but when I add Cufon it's no dice. Here's JQ script:

     <script type="text/javascript">
    jQuery(document).ready(function() {

      var doubleHighlight = function(element1, element2, class) {
        element1.hover(
          function() {
            element2.addClass(class);
          },
          function() {
            element2.removeClass(class);
          }
        );

        element2.hover(
          function() {
            element1.addClass(class);
          },
          function() {
            element1.removeClass(class);
          }
        );
      };
      doubleHighlight(jQuery("#abouttop"), jQuery("#aboutbottom"), "highlight_about");
      doubleHighlight(jQuery("#worktop"), jQuery("#workbottom"), "highlight_work");
      doubleHighlight(jQuery("#blogtop"), jQuery("#blogbottom"), "highlight_blog");
      doubleHighlight(jQuery("#contacttop"), jQuery("#contactbottom"), "highlight_contact");
    });
  </script>

And here's the portion for Cufon:

 <script src="cufon-yui.js" type="text/javascript"></script>
<script src="gothamxlight_300-gothamxlight_300.font.js" type="text/javascript">    </script>
<script src="gothamlight_300-gothamlight_500.font.js" type="text/javascript"></script>
        <script type="text/javascript">
           Cufon.replace('#type', { fontFamily: 'gothamxlight', hover: true});
            Cufon.replace('#smalltype', { fontFamily: 'gothamlight', hover: true});
            Cufon.replace('#nav', { fontFamily: 'gothamlight', hover: true});
        </script>

Any ideas? Maybe how Cufon renders text? Does it need to be refreshed? I'm grabbing at straws here.

Answer 1

Is the problem that Cufon isn't working or that Cufon breaks your doubleHighlight?

I actually killed myself before finding out that most Cufon issues relating to JQuery are down to the order everything is called. I'm having trouble finding their explenation to this in the documentation as it was last September when I found out so I'm affraid I can't cite my answer right now, I've got to get back to work. Basically, Cufon likes to be first in line, and JQuery is usually happy to ride shotgun. For example;

This is or can be bad :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>

<script type="text/javascript">
    your.jQueryKungFu(function() {
    };
</script>

<script type="text/javascript">
    cufon.replace('h1');
</script>

This is good :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>

<script type="text/javascript">
    cufon.replace('h1');
</script>

<script type="text/javascript">
    your.jQueryKungFu(function() {
    };
</script>

Note the difference, second time around the cufon is handled before the jquery functions.

This solution has served me where Cufon has flat out refused to replace anything because of what I had already run with JQuery. I'm not sure if your issue could be from the same school of problems...

Answer 2

You need to call function Cufon.refresh(); after event. https://github.com/sorccu/cufon/wiki/API I had a same problem and this method worked for me.