332 posts
  • Has sold $125,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
  • Elite Author: Sold more than $75,000 on Envato Market
+4 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
  • Has been part of the Envato Community for over 5 years
  • Has collected 10+ items on Envato Market
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
  • Has been part of the Envato Community for over 6 years
  • Has collected 10+ items on Envato Market
  • Located in 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
  • Has been part of the Envato Community for over 3 years
  • Has referred 1+ members
  • Has collected 1+ items on Envato Market
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
  • Has been part of the Envato Community for over 3 years
  • Has collected 1+ items on Envato Market
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
  • Has been part of the Envato Community for over 3 years
  • Has collected 10+ items on Envato Market
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
  • Has been part of the Envato Community for over 2 years
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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by