Thread

I am trying to configure and execute SIFR replacement via the newest version of the Gilles Van der Hoven’s JQuery SIFR plugin. I am not yet really comfortable with Jquery and might be making a fundamental mistake or omission but I just cannot get it to work. I am trying to target the following

entry titles:

<!-- entry -->
<div class="entry">
<div class="entry-title"><h3>{title}</h3><p></div><br />
{summary}<br />
{body}<br />
{extended}<br />
</div><br />
<!-- entry -->......

I will outline the basic scenario, including the location of everything.

All of my scripts live in a folder called “scripts.”
My fonts are located in a folder called “fonts.”
Both of these folders are at the root, or the same directory as my system folder
I am calling all of my header information via a template referenced as “includes/html_head.”
This template includes my doctype, <title> and stylesheet information, followed by:

<scr*pt type="text/javascript" src="/scripts/jquery.js"></scr*pt> 
<scr*pt type="text/javascript" src="/scripts/jquery.flash.js"></scr*pt>
<scr*pt type="text/javascript" src="/scripts/jquery.sifr.js"></scr*pt>
<scr*pt type="text/javascript" src="/scripts/jquery.browser.js"></scr*pt>
<scr*pt type="text/javascript" src="eesys/extensions/markitup/jquery.markitup.js"></scr*pt>
<scr*pt type="text/javascript">
$('document').ready(function(); 
$('h3').sifr({path: '/fonts/Medici.swf'});
</scr*pt> 
</head>

Can anyone identify why I am not getting any love here? Could anyone suggest an altogether better way to execute the whole shebang? I plan to employ more Jquery functionality as my abilities grow, so I might as well get everything set up right now.

I would appreciate any assistance you kind folks could provide.

Cheers-John

Try changing this bit:

$(document).ready(function(){
    $('h3').sifr({path: '/fonts/Medici.swf'});
});

Bingo!!!Money!!! Andy, you rock my brother. Thanks so much my friend.

Cheers-John

No worries. In fact I’m really glad to hear it works as I’m looking at implementing that very SIFR plugin tonight in a project I’m doing.

Okay, one last question while I am here. How do you reference multiple selectors using the above? With your assistance, the lightbulb went off and it is amazing what you can do with nothing, control-wise with this. My only experience with SiFR was from the 1.0 days, IIRC.

J

Jquery can match comma-seperated selectors, so something like this should work:

$('h3,h4,h5,h6').sifr({path: '/fonts/Medici.swf'});

J,

I’m not sure if you’re looking to specify which h3 tags to turn into Sifr text, but you can also point to h3 classes in only a particular ID or class.

I think you can do this if you want to be more specific with class/ID but I can’t say I’m 100% sure!

$('div#idname h3,h4.classname,.classname,#idname').sifr({path: '/fonts/Medici.swf'});

Andy,

Something even like this worked for me:

$("#slogan p").sifr({
        font: "{site_url}scripts/arial",
        textAlign: "left",
        color: "#D8D8D8",
        embedOptions: {
            wmode: 'transparent' 
        }
        });

One thing to point out. If you are looking to style text inside a div or something. Make sure you give specificity to a “p” or h3 or something, and rather, not the DIV itself, where you’d have CSS defining a general font-size for the container or something.. I’ve found that it acts funny and produces odd results with enlarged text, etc. if you don’t specifically determine what you want to resize (the h3 or p inside #example).

I also had some nightmares producing text that was compatible. Not too sure why, as the converted text I made initially worked in Flash CS3. What I ended up doing was using a program to do it for me and all gave me odd results except for this one: sIFRMaker. Hope that helps incase you ever run into a problem with it.

I’m having a similar type of problem. Have put a test page together and it is now working more than before but I am not getting anything but an empty space and when right-clicking the h1 get “Movie not loaded”.

View the page: http://thedandydwarves.com/index.php/test

The code:

<scr*pt type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAAt3t5ISlGrnoi447o7ZcmRRMRri10K0S8CBWvdVoODISxQulBxTyZ4rgfSHCpadDaJ0coTSBHZP8xQ"></scr*pt>
<scr*pt type="text/javascript">google.load("jquery", "1.2.6");</scr*pt>
<scr*pt src="/inc/js/jquery.flash.min.js" type="text/javascript"></scr*pt>
<scr*pt src="/inc/js/jquery.sifr.min.js" type="text/javascript"></scr*pt>
<scr*pt type="text/javascript">
$(document).ready(function(){
    $('h1').sifr({font: 'centurygothic'});
}); </scr*pt>

It’s not seeing your flash movie by the looks of it - whereabouts is it in relation to ‘test’, are you able to navigate directly to the flash movie? If you do it should say something like ‘rendered in SIFR…’.

EDIT// I changed your source in Firebug so it looked at ../centurygothic.swf and that at least loaded the movie. If you change your code to ‘font:../centurygothic’ does that help?

That said, I’m having trouble getting it to work also! It’s targetting the right things on my page (3 x h2 tags) but it’s replacing them with the above (rendered in text) rather than what I expect.

the flash file is in the root directory. I’ve tried it in numerous places, that just happens to be the last place I tried it before posting.

sIFR is working, classes are being added but like you say it doesn’t seem to be finding the swf for some reason.

I’ve also tried using font: & path: in different configurations as well as the example used in this thread which apparently worked.

I’m lost.

Andy,

I had a similar problem like you before in regards to that stock “Rendered in..” message. What did the trick for me was to actually using a different font file. In my previous post, I linked to an application called sIFRMaker. That was the one application that did the trick for me and produced files that worked.

I know it’s a longshot, but give that a try, as that’s what did it for me.

Cheers Mr D, I’ll give that a go - it does seem a likely fix though, as it can’t really be anything else!

Phil - did you see my edit?

EDIT// I changed your source in Firebug so it looked at ../centurygothic.swf and that at least loaded the movie. If you change your code to ‘font:../centurygothic’ does that help?

I can get it to see your SWF so it can be done!

One step closer. The swf is loading now. Can’t believe I didn’t try that one after I thought I had exhausted every possible combination of paths…ugh.