Problem Using Sifr - Invisible Text

Hello,

I’m trying to use sIFR for the first time and I have bit of a problem. Without the sIFR CSS included (I’m trying to get everything right first) the selected element just gets pushed down to make way for the sIFR text, but it’s not visible.

Any idea what could be going wrong?

Cheers,

Jon

Can you post some code?

Possibly the whole point is to have the CSS first and then the JS kicks in? Esp since there should be visible text for those who aren’t running the scripts OR don’t have Flash.

As far as I know there are actually a few different implementations of sIFR… so it would help to see what you’ve got so far. If you’ve got it on a live page of some sort that might be even better. Otherwise, post the HTML you’re starting with and the JS (and the CSS you’re supposed to be adding).

Not according to The Art and Science of CSS (Sitepoint). I tried adding the sIFR CSS and it just hid the HTML heading (as it’s supposed to) so I can see nothing.

As far as the code is concerned, I’m trying this on a <h1> element and I’ve just started to code the design and nothing has been specified in the CSS for this element.

The JavaScript I have added to sIFR.js is below:



sIFR.replaceElement(named({sSelector: "h1", sFlashSrc: "chunkfive.swf", sBgColor: "#ffffff", sColor: "#000000", sWmode: "transparent"}));


Cheers,

Jon

The problem was that I had the path to the flash file in the javascript as if the it was being referenced from the JavaScript file, but after some playing around I needed to set the path as if I was calling it from the root directory (don’t know why)…and it worked, sort of.

After some playing around (and a new selection of problems) I decided to go for image replacement using CSS, seeing as it’s for a static brochure site. I might have another go if I need font replacement on a dynamic site, unless I can find a solution in PHP GD.

Cheers,

Jon