333 posts
  • Affiliate Level 1
  • Author Level 8
  • Collector Level 2
  • Top Monthly Author
+8 more
CadenGrant
says

I know this post is old but for anybody who stumbles across this post with the same problem.. I was having this problem too and I changed the doctype to STRICT like mentioned above and used ’’ around true:

Cufon.replace('h1', {hover: 'true'});

This works for me.

1 post
  • 6 Years of Membership
  • Collector Level 2
Blackoasis
says

I know this post is old but for anybody who stumbles across this post with the same problem.. I was having this problem too and I changed the doctype to STRICT like mentioned above and used ’’ around true:
Cufon.replace('h1', {hover: 'true'});
This works for me.

Works for me too!!

1 post
  • 7 Years of Membership
  • Collector Level 2
  • United States
raylay
says

I didn’t read through the 3 pages of responses, so maybe someone already posted this but I was able to get the hover to work when I placed it at the top of the list.

-> Cufon.replace(’#nav’, {hover: true}); Cufon.replace(’#nav’);

From what I’ve read, Cufon reads the script bottom up…

1 post
  • 4 Years of Membership
  • Affiliate Level 1
  • Collector Level 1
alisontaylorbc
says

Raylay’s found the solution. Cufon specs indicate that you DO need to have a strict DOCTYPE , but they also say:

“Note: the hover option cannot be added to an element that has been replaced before. To make it work you must reverse the order of your replace calls (i.e. hover calls must go first).”

in the table entry for Hover on this page of the API documentation

https://github.com/sorccu/cufon/wiki/API

Once I discovered this and put my hover call first, it started working for me. (I already had the strict doctype).

Here’s what my code looked like. The comment software filters out the script tags, so I’ve put in notes where they should go.

<!— If you want to use complex selectors with Cuf√≥n, load a selector engine (JavaScript framework) here. We support jQuery, Sizzle, MooTools, Dojo, Prototype and other popular frameworks. —>

script line that includes jquery

script line that includes cufon-yui.js

script line that includes my .font.js file

script type open

Cufon.replace(‘h1’); // Works without a selector engine

Cufon.replace(’#menu ul li a’, { hover: true });

Cufon.replace(’#menu ul li a’); // Requires a selector engine for IE 6 -7, see above

script type close

1 post
  • 4 Years of Membership
  • Collector Level 2
  • United Kingdom
ajthomascouk
says

I’ve tried all the above suggestions and none of them worked. I tried and tried to get it working and this is what i came up with

HTML :
<ul id="mainmenu">
    <li>
        <a href="#">Alex</a>
    </li>
    <li class="active">
        <a href="#">James</a>
    </li> 
    <li>
        <a href="#">Thomas</a>
    </li>
</ul>
Cufon:
$(document).ready(function() {

  Cufon('ul#mainmenu li.active a', {
    hover: { color: '#3e3e3e'},
    color: '#af1217',
  });

  Cufon('ul#mainmenu li a', {
    hover: { color: '#3e3e3e'},
    color: '#868686',
  });

  Cufon.replace('ul#mainmenu li', {
    color: '#868686',
  });

  Cufon.replace('ul#mainmenu li.active a', {
    color: '#af1217',
  });    

});

See it working…

You’re welcome…

1 post
  • 4 Years of Membership
  • Collector Level 2
wilmoth90
says

Not sure if anyone would still be having an issue with this, but here is what I did…

<script src="<?php bloginfo('template_directory'); ?>/js/fonts/cufon-yui.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/fonts/Bebas_Neue_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1,h2,h3,h4', {
hover: true,
});
</script>
1 post
  • 2 Years of Membership
ammum
says

This is very useful post, thanks for this. i have searched earlier for the same. And i have confusion on the following, ype=”text/javascript”></script> <script type=”text/javascript”> Cufon.replace(‘h1,h2,h3,h4’, { plz explain. by buy youtube subscribers

by
by
by
by
by
by