Cannot select classes in FF, IE, Safari

[Joey Pepperoni]

Hello,

I am trying to select an anchor class to apply the cufon style to via:
<a href="#" class="rightnav">Festival At A Glance<br />PDF</a>

and am launching cufon by:
<script type="text/javascript">Cufon.replace('.rightnav');</script>

It only seems to work in Google Chrome. Not in safari, IE6 or 7, or
Firefox 2 or 3.

When I select the entire anchor link it works no problem in any of the
above browsers though by using
<script type="text/javascript">Cufon.replace('a');</script>


Am I going about this in the correct way?

[Joey Pepperoni]

Sorry forgot to post a link to a test page.

In this test I'm selecting the <h1> with class "cufon"

http://test.overdrivedesign.com/cufon/cufon-test.html

[Sorccu]

Hi Joey,

This is an excerpt from the Usage page in the wiki:

"In order to avoid unnecessary duplication cufón does not come bundled
with a selector engine, which means that by default you’ll only be
able to use tag names (such as h1) as selectors. However, cufón
detects quite a few popular JavaScript frameworks (such as jQuery,
MooTools, Dojo and Prototype) automatically, so if you’re using one
you’ll only need to include it before cufón and things like
Cufon.replace('#content > h1:first-child') and Cufon.replace('#nav a')
will work just fine."

Safari and Firefox 3.1 (not 3.0) support document.querySelectorAll()
which is why using a class name worked in Chrome (like Safari, it's a
WebKit-based browser). Other browsers only have
document.getElementsByTagName().

If you do not plan on using a JavaScript framework with selector
support, you can give the element an ID and use the following code:

Cufon.DOM.ready(function() {
Cufon.replace(document.getElementById('nav').getElementsByTagName('a'));
});

Also, ".rightnav" sounds like a bit too much to replace (you might run
into spacing issues) - perhaps you should try something like
".rightnav a" instead? You should also avoid using "cufon" as a class
name because it's used internally by cufón :)

Simo

[Joey Pepperoni]

Righto!

Thanks Simo, I ended up using JQuery to do the selection.

Works like a charm!!

[Mariusz Cieśla]

On 12 Mar, 02:27, Joey Pepperoni <jlape...@gmail.com> wrote:
> Righto!

Other poster, same problem. I use Cufón with Wordpress that has jQuery
1.2.6 included, jQuery is initialized before Cufón (jQuery(document)
works, but Wordpress uses noConflict version of jQuery that doesn't
support the '$' object) but Cufón fails to work on CSS selectors with
Firefox 3. Safari works, IE7 works.
Any ideas of how to fix it?

Code excerpt:

#v+
<script type="text/javascript" src="http://.../wordpress/wp-
includes/js/jquery/jquery.js?ver=1.2.6"></script>
<script type="text/javascript" language="javascript" src="<?php
bloginfo('template_url'); ?>/js/cufon-yui.js"></script>
<script type="text/javascript" language="javascript" src="<?php
bloginfo('template_url'); ?>/js/MankSans_400-MankSans-Medium_500-
MankSans_oblique_400.font.js"></script>
<script type-"text/javascript" language="javascript">
Cufon.replace('.entry-title');
Cufon.replace('.entry-date');
Cufon.replace("h4");
</script>
#v-

[Simo Kinnunen]

Hi Mariusz,

I've now added support for jQuery running in noConflict mode, so you
should no longer have this issue if you download the newest version of
cufon-yui.js. Alternatively you can set the selector manually, like
this:

<script type="text/javascript">
Cufon.set('selector', jQuery);

Cufon.replace('.entry-title');
Cufon.replace('.entry-date');
Cufon.replace('h4');
</script>

Thank you for letting me know of this issue!

Simo

[Mariusz Cieśla]

On Mar 14, 4:39 pm, Simo Kinnunen <sor...@gmail.com> wrote:
> Hi Mariusz,
>
> I've now added support for jQuery running in noConflict mode, so you  
> should no longer have this issue if you download the newest version of  
> cufon-yui.js.

Works perfectly, thanks.

Mariusz