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.

Doesn't Cufon completely replace the original elements, or at least add completely new ones? Wouldn't that mean that the event handlers for your original text are irrelevant after Cufon is done? — Pointy, Mar 01 '10 at 23:23
I think Pointy is right, Cufon replaces your original elements. I believe it investigates CSS :hover stuff (if you pass {hover:true} to the `Cufon.replace` function) and creates the correct elements for that, but the browser is no-longer rendering the elements as text. so adding CSS classes that modify the way text is rendered has no effect. — Daniel Beardsley, May 22 '10 at 18:36

score 0 · Answer 1 · answered May 28 '12 at 10:13

0

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.

answered May 28 '12 at 10:13

Lado Lomidze

1,503
5
19
32

christianDuncan · Answer 2 · 2010-03-05T16:51:12.557

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...

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

2 Answers2