How do I implement jQuery Sifr Plugin properly?

Question

I have been trying all afternoon to get the jQuery Sifr Plugin (http://jquery.thewikies.com/sifr/) to work, without success. The plugin's site has limited documentation and for something so apparently easy, I'm sure I must be nearly there. I also found some info at http://www.eona.com/sifr/ but I think it's for an older version of the plugin.

I have made my own font files using the online Sifr Generator (http://www.sifrgenerator.com/) and also on my own using Flash CS4 and neither seem to work.

Here's my code:

$(document).ready(function(){    
    $.sifr({
  path: 'http://**.com/js/',
  save: true
 });

 $('.pageInfo h1').sifr({
  font: 'soho',
  debug: true
 });
});

Now, the "save: true" is not in the docs for this plugin but I did find it elsewhere on the plugin's site, the funny thing is, that without it, nothing happens but with it included, all I get is the default "Rendered with sIFR3" message instead of the text of my element.

The plugin's site also says "It supports sIFR version 2 and version 3 fonts.", what does this mean? Could my font files be in the newer v3 type?

I would really appreciate any and all help.

Thank you in advance

Answer 1

Have you tried skipping the font option and passing a direct reference to the swf (including the .swf file extension) to the path option? I experimented with that plugin just a few weeks ago I think that may have been necessary to get things started.

YMMV, but my experience was that many odd little bugs crept in w/ the plugin and it's was far less frustrating (plus just as easy and performant) to run a normal sifr.replaceElement inside your document(ready) code using the official sIFR 2.0.7 release from http://wiki.novemberborn.net/sifr/.

Answer 2

I don't believe the jQuery plugin is compatible with sIFR 3 (which I would recommend you use anyway).

Answer 3

I had the same issue using the jQuery plugin (which uses sIFR 3 now), for me it was that the pre-published swf's were < version 436 - specifically fonts from sifrvault. Likely your font needs to be re-published, grab the ttf and use OpensIFRr.

-Jay

Answer 4

Here I Am!

Sorry for delay. :)

You must specify at least build and version.

Here's a sample:

$.sifr({
    build: 436,
    version: 3,
    path: 'http://**.com/js/',
    save: true
});