sIFR 3b1: The Mo’ Betta Beta

sIFR 3 Revision 278 has been released. Please upgrade to sIFR 3 Revision 278.

Just in time for Christmas, I present you a new sIFR release! It’s been a long time coming but with this release I feel sIFR 3 is ready for widespread deployment. If you’re unfamiliar with sIFR, the obligatory introduction paragraph goes like this:

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash, which renders the font. It degrades gracefully if Flash is not present.

Compared to sIFR 2 the new version is radically different. Backwards compatibility has been broken, but that’s okay since deployment is now ridiculously easy. There’s great control over how the text is rendered inside the Flash movie: you can easily use bold and italics together, or use different colors. There’s support for leading, kerning and opacity, filters, blend modes and anti-aliasing.

The biggest changes from the alpha release are:

No more Flash 7 support. This led to a simplification of the code base and made sIFR easier to deploy.
No more compatibility mode. Supported browsers are Internet Explorer 6+, Firefox 1.0+, Safari 2.0+, Opera 8+ and Konqueror 3.5.6 (due in Januari) .
Improved Flash detection.
Improved rendering in Internet Explorer.
Firefox and Internet Explorer will now replace the elements before the page has finished loading. No need to put JavaScript inside the body tag.
Fine-grained tuning of the text position inside the Flash movie.
Callback handlers to modify the content being replaced, the CSS, and the end result.
Support for text transformation, including capitalize.
Domain validation on the client side, useful for example to stop sIFR from running when the page is being translated by Google Translator.
Various bug fixes.

Documentation has improved, too. There’s now a simple introduction tutorial and the configuration settings and methods are properly documented. No doubt this still needs work, and that’s exactly why the documentation takes the form of a wiki. If you see improvements, feel free to make them.

As I said before, I really feel this version is fit for widespread use. However, it’s still a beta so please keep track of developments, for example by subscribing to the mailing list. If you’re using sIFR please consider making a donation, especially if you’re a company. Here’s a nice button to click:

sIFR 3 is open source and licensed under the CC-GNU LGPL. Check out the demo and go download it! If you want to keep track of newer developments, check out the nightlies. Anything from revision 199 is new. And finally, many, many thanks to everybody who filed bug reports, helped testing, responded on the mailing list, improved documentation, spread the word and made a donation.

sIFR 3 Revision 278 has been released. Please upgrade to sIFR 3 Revision 278.

View the demo.
Download sIFR 3 beta 1.
For support, check out the forum.

link | sifr3 sifr | 18 December 2006, 09:58

Comments

The font smoothing is so much better. Very crisp, very clean. With the old sIFR, it was getting to the point where it was so noticable. Good stuff!

Jonathan Snook | 18 December 2006, 15:34 | link
Hi Mark, what Flash version is needed in order to edit the .fla? I only have MX 2004 but can’t open it.

Neko | 18 December 2006, 18:46 | link
Uhm, next time RTFM, right? :D

Neko | 18 December 2006, 18:48 | link
Super-awesome pwnage, dude.

Branstrom | 18 December 2006, 22:34 | link
howdy Mark,

i am a huge fan at relate’s in Ehoven for the longest time

who would have thought that, again, a Q-boy was responsible for this…

it was the friendliest of surprises

would make me proud

if you’d leave us a wish

(still alpha + a nightie!)

hope we’ll meet some time in the next year

groet,

mischa

mischa | 18 December 2006, 22:44 | link
Mark,

I’m updating from the Alpha release. I can get it to work fine w/ the flash file in the demo, but not my own. I must have tried exporting this thing like 10 times, but still no dice.

Did the flash file in the demo use settings other than what are provided by the default in the download (I didn’t change anything in the .as files before exporting).

Thanks for the help.

Chris | 18 December 2006, 23:07 | link
Hi Chris, I just tried exporting and it worked fine. Flash 8 Pro / OS X 10.4.8. What happens if you open the movie in the standalone Flash player (or load it directly in the browser)? It should say “Rendered with sIFR 3”.

Jonathan, Frederik and Mischa, thanks!

Mark Wubben | 18 December 2006, 23:18 | link
Great work man, keep rocking!

Arsart | 19 December 2006, 01:19 | link
Nice work, i really like it, most of accesibility issues are solved.

zee | 19 December 2006, 03:48 | link
Hello, is it possible you port in the Future your Script to Jquery ?

Geoffroy | 19 December 2006, 08:56 | link
I can’t believe you’re still working on this! The rendering result seems much better and is starting to become a viable option for a wider range of typography. I’ll be updating were needed. Nice work all round!

Egor Kloos | 19 December 2006, 14:08 | link
Geoffroy, it certainly is possible, although I won’t be the one doing it. sIFR is really written as a standalone program, so if you’re already using one of the JavaScript libraries on your site it’s probably worth it to remove duplicate code.

Mark Wubben | 19 December 2006, 15:22 | link
Thank you so much for doing this. Super great work. Thanks!

Mark | 20 December 2006, 22:12 | link
We’re using this version of sIFR on our site, and it seems to be having problems with the font sizing in IE7. The problem only happens when the page first loads though and only on the main page (or whatever page you enter on I believe). Subsequent visits to those pages also do not display the font sizing problems.

Specifically, the problem seems to be the font size sIFR chooses for the movie. It’s far too small and really screws up the layout. There are a number of issues that others may not have that may complicate things on our pages, and I’m willing to bet that our use of Yahoo!’s font CSS (http://developer.yahoo.com/yui/fonts/) might be one of those issues. Basically, it allows everything to nicely be specified in em’s and percentages. Also, as a disclosure, we’re also employing inline IE7 CSS hacks specifically for the sIFR styles. I wouldn’t think those would matter so much though

Andrew Mattie | 21 December 2006, 20:06 | link
Andrew, I think I saw a mention of this pass by in an e-mail, though I can’t seem to find it right now. Could you make a post in the forum so it’s a bit easier to keep track of things? I’ll need an example to look at as well.

Mark Wubben | 21 December 2006, 21:42 | link
The only problem i can see with having dropped support for Flash 7 is that that’s still—to the best of my ability to discover, at least—the latest version available for Linux! Any thoughts on this?

Thanks, Adrienne

Adrienne Travis | 21 December 2006, 21:44 | link
Flash 9 for Linux is currently in beta, so I don’t expect that to be an issue.

Mark Wubben | 21 December 2006, 21:49 | link
I’m getting a highlighting problem with FF 2.0 and Flash 8 on Windows XP. (bug?)

If I try highlighting the shadowed text, “New Agreement Creates Myriad Opportunities For Fruitiger, Sans-serifs”, i get what seems like a highlighted (and shadowed) box over the text, so I can’t see what I’m highlighting.

You can check out the effect in this screenshot: http://bitshaker.com/sifr3b1.png

Joe | 21 December 2006, 22:17 | link
Yea, that’s an issue with Flash itself. The demo will change before the final release, we’ll see what to do with that filter then.

Mark Wubben | 21 December 2006, 22:28 | link
I discovered another possible bug. It’s a little tougher to explain.

The title at the top of the page has a link on it and it is “sticky” meaning that on a mouseover event, it should turn gray, then on a mouseout event, it should turn back to black. It seems I can trick it as you will see in the screencast.

I also included the highlighting problem. I’ll leave this up for a while, but if the bandwidth gets to be too much, I’ll have to take it down.

Here’s the screencast: http://bitshaker.com/sifr3b1.htm

Sorry for the comment spam. It’s the tester in me. I can’t see something broken and not want to fix it. If there is a better place for this, let me know.

Joe | 21 December 2006, 22:40 | link
Yes, if you move too fast Flash doesn’t notice it should display the link normally. When you move the mouse downwards, there’s not enough empty Flash space to mouse over for Flash to realize it, when you move to the right, there is more space so it tends to pick it up better.

Thanks for the testing!

(I think I have to update the known issues a bit!)

Mark Wubben | 21 December 2006, 22:56 | link
Why it not supports Flash 7 now? Merry Xmas to all.

John | 22 December 2006, 02:46 | link
Anyone figure out how to get the leading to work?

The Flash Livedoc left me scratching my head…

Ross Johnson | 22 December 2006, 05:34 | link
First off great job continuing the work on this.

I was able to reproduce the title bug that Joe mentioned. For me the gray would not change back to black only when I moused out through the left end of the flash. Top, bottom and right all worked fine. Bug is the same in IE 6 and FF 2.0. This was done at super slow speeds, so I don’t believe the speed thing is the issue.

Aaron Barker | 22 December 2006, 05:43 | link
John, not supporting Flash 7 is a lot easier on the code and the implementation.

Ross, pass the leading as a CSS property for the .sIFR-root class. Positive values (integers I believe) increase leading, negatives decrease it.

Aaron, it doesn’t occur when moving at slow speed in Camino, I suspect there are some differences browser handling. I have a theory for a workaround, but I need a way for JavaScript to talk to Flash before I can test it.

Mark Wubben | 22 December 2006, 07:47 | link
Great work Mark & co, the ease of deployment is quite astounding

Steve Tucker | 23 December 2006, 00:35 | link
With my installation (IE 6, latest Flash plugin) Flash detection sometimes fails. Regretably this seems to be the case with the new sIFR version, too - it’s not being rendered at all.

As everything was fine with the old version of sIFR I blame this behavior on the “improved” browser detection part of the new script.

Maybe you can check that out. Thanks a lot!

Sebastian Becker | 25 December 2006, 21:53 | link
Sebastian, if you open the demo page, paste javascript:sIFR.debug.ua(); in the address bar, and run it, what are the values for quicktime, flash and flashVersion?

Mark Wubben | 26 December 2006, 12:20 | link
Good job Mark!

Looking good :)

James John Malcolm (akaxaka) | 27 December 2006, 00:23 | link
Is there absolutely no way to force the background to become transparent? I have a background image and the flat background color is glaringly obvious, however the image is not consistant enough to think about tiling within the flash movie.

Kyle | 28 December 2006, 04:42 | link
Kyle, yes you can, see wmode under JavaScript Methods.

Mark Wubben | 28 December 2006, 09:14 | link
Thanks a bunch Mark, the wording in the wiki about the CSS attribute and that setting was confusing.

Kyle | 28 December 2006, 21:23 | link
Is it possible to use a regular font as well as it’s ligature for a single heading? Would this require embedding the normal font as well as the ligature font?

Amit | 2 January 2007, 03:16 | link
I’m actually not sure how to represent ligatures on the web, could you elaborate?

Mark Wubben | 2 January 2007, 10:40 | link
Well, I was thinking of using the font Esta which comes with a separate font just for ligatures. I’m just as confused because I’ve never used Sifr.

Amit | 3 January 2007, 01:33 | link
Nice work. I can’t wait to try out the domain validation feature. I know that we had discussed a strategy for hiding sifr from google translations on the textdrive forum, but I never got around to implementing a solution. This will make things much easier.

I have one question. Is it possible to make pseudo selectors work with sifr 3? For example can you apply a flash filter to a:hover using something like…

selector: ‘ul.menu_items li a:hover’

Toby Beal | 3 January 2007, 01:46 | link
How does one change the background color in beta 3… I’m stumped? Trying to use a black background on my site, but all the sIFR replacement text is displayed with a white background

Dogen | 3 January 2007, 03:21 | link
Amit, I don’t think that’s possible, no. That is, I don’t think Flash supports it, if it does it should work.

Toby, do you mean the Flash filters like the Shadow filter? That won’t work, I’m afraid.

Dogen, specify the background-color in the style declaration for .sIFR-root.

Mark Wubben | 3 January 2007, 09:59 | link
Nice work, Mark. Congrats on the beta!

Tom Lee | 3 January 2007, 22:41 | link
Mark,

Thanks for the reply. It looks like the answer to my question is most likely no due to the fact that flash doesn’t support pseudo selection?

To reiterate, I was thinking it would be cool to apply flash filters in the same way that you can change properties in CSS via a pseudo class. So maybe you apply sIFR to a text element that’s a link and when the user does a rollover you then apply a flash filter (e.g. Glow, etc.).

Example:

sIFR.replace({ selector: ‘ul.menu_items li a’ ,src: ‘cochin-8.swf’ ,css: { ‘.sIFR-root’: { ‘color’: ‘#660000’, ‘letter-spacing’: -1.5, ‘text-transform’: ‘capitalize’ } } });

sIFR.replace({ selector: ‘ul.menu_items li a:hover’ ,src: ‘cochin-8.swf’ ,css: { ‘.sIFR-root’: { ‘color’: ‘#660000’, ‘letter-spacing’: -1.5, ‘text-transform’: ‘capitalize’ } } ,filters: { Glow: {…} } });

I can’t wait to start using sIFR 3. Thanks for all of the time and energy that you’ve put into this.

Toby Beal | 4 January 2007, 01:04 | link
Hi guys.Very good work at the new sIFR but can anyone help me with managing the problem with multi color? I cant figure it out with the new version, too ;) maybe some examples or dunno.Thanks in advance

Dimitar | 4 January 2007, 14:11 | link
Toby, I’m afraid that won’t be possible. You can use a:hover inside Flash, but only for normal text changes. (You’ll have to replace the link itself, and not its content, though).

Dimitar, perhaps you could post in the forum?

Mark Wubben | 4 January 2007, 14:52 | link
looks impressive! but what about seo aspect of sIFR?

tobto | 4 January 2007, 16:18 | link
Tobto, as you are a SEO freelancer, why don’t you do some research yourself? ;-)

Mark Wubben | 4 January 2007, 19:50 | link
Freaking awesome work, Mark.

Something I noticed:

Specifying leading (in the replaced css styles) on an element that only has one line of replaced text will create an artificial margin (I assume equal to the leading) on the bottom. This margin goes away when there is over one line of replaced text.

Marty Stake | 4 January 2007, 21:56 | link
The Opera zoom problems from version 2 of sIFR are still there. Try pressing + on the number pad in the demo and the fonts created with Flash don’t resize until certain zoom sizes are reached.

Hey, the outlined shadowed text is incredible anyway!

Chris Hester | 5 January 2007, 16:57 | link
Marty, thanks for reporting!

Chris, yep. When Opera resizes the Flash movie due to the zoom, the sIFR text will follow. Unfortunately Opera doesn’t resize the Flash movie properly. I’ll be looking into this when I have another go at the font resizing.

Mark Wubben | 5 January 2007, 19:24 | link
It’s really great. Thanks Mark.

Hugo | 8 January 2007, 13:09 | link
Great job Mark,

I’ve been using it since version one :)

Henrik Feldt | 10 January 2007, 22:24 | link
The script needs a optional method/event handler to re-render if the text is resized. That would make sIFR an indispensable tool, indeed.

Jason Padgett | 11 January 2007, 16:10 | link
Yep, that’s one of the big things I still have to do. But we’ll get there :)

Mark Wubben | 11 January 2007, 16:44 | link
PROBLEM SETTING LINE-SPACING ON IE7

hi there, does anyone have the same problem in setting the line-height? i´m trying to replace H1,H2 and H3-tags with siFR3 and set the margin-top to a negative value to adjust the space between the lines. this works fine on mac (safari as well as FF) but IE7 just ignores my margin-settings. how come?

tamaki

tamaki | 12 January 2007, 11:17 | link
You can adjust the space between the lines in the Flash movie by specifying leading.

Mark Wubben | 12 January 2007, 15:00 | link
I see sIFR for the first time and I like it. Good job Mark.

But why when I select the subhead H4 tag text in the demo it disappears both in FireFox 1.5.0.9 and Internet Explorer 6?

Alexander Peterson | 16 January 2007, 16:11 | link
Yup, that’s a Flash issue with the shadow effect.

Mark Wubben | 16 January 2007, 16:47 | link
It does work on windows but on mac it only shows way too big and nothing can be done to change it. Is this a common thing on Mac should I Change something for mac?. I use safari and FF 2.0 as wel.

Frank | 31 January 2007, 14:39 | link
Frank, there shouldn’t be differences. Could you post your question to the forum along with the page?

Mark Wubben | 31 January 2007, 18:10 | link
Awesome! The load time is so much better than v2, and the flash 8 fonts look so much better. Thanks Mark!

Julian | 6 February 2007, 21:52 | link
Hello, i am using sIFR 3 for replacing A links nested in LI tags. I have about 10 vertically aranged links replaced with sIFR, but when i go on and out from the links top-to-bottom or bottom-to-top, the hover efects stay there, until i go over again with the mouse.

Ivo Sabev | 7 February 2007, 23:59 | link
Ivo, try the latest revision, it has a workaround for Firefox and Safari. Haven’t tested it in IE yet.

Mark Wubben | 8 February 2007, 09:15 | link
hello, i’m testing sIFR. How to make hover efects work in links?

thanks in advance. João

João | 1 March 2007, 12:33 | link
That’s covered in the demo.

Mark Wubben | 1 March 2007, 12:37 | link
Hey Mark,

How long till sIFR 3 drops the ‘beta’ status? :)

Keep up the awesome work!

pixelchutes | 16 April 2007, 22:47 | link
Coincidentally I wrote a mail about that yesterday. To quote:

I’m not giving out timetables for the releases. I’ve always been
careful with this, which has proven to be a good thing. Life,
university and work can be unpredictable at times.

Mark Wubben | 17 April 2007, 08:01 | link
im trying to use it for navigation but there is a ton of space surrounding each list item. How do you trim the space?

thanks, chad

chad | 1 May 2007, 23:26 | link
Found the JavaScript Methods which addressed my previous post here http://wiki.novemberborn.net/sifr3/JavaScript+Methods.

Im pretty excited about the ability to reproduce my photoshop comp like this. However It’s not showing up in IE 6. Any tips would be greatly appreciated!

chad | 2 May 2007, 18:48 | link
Chad, it’s better to discuss this on the forum.

Mark Wubben | 2 May 2007, 19:05 | link
Does version 3 work with hidden DIVs which become visible at some point during site navigation? I’ve got this really annoying issue where I have divs that appear using Scriptaculous but the H2 in those divs dont get replaced and all sorts of crazy things happen.

Cheers

KJ | 3 May 2007, 12:21 | link
I’ve not managed to find a solution to that bug, so instead I’ve used this instead which is working a treat for the time being.

http://www.alistapart.com/articles/dynatext/

Uses javascript to replace text between specified tags with images generated with a php script. It’s ugly but effective.

KJ | 3 May 2007, 15:51 | link
sIFR does not replace elements that aren’t rendered (as with display: none). You could either hide the elements after replacement, or replace them when necessary.

Mark Wubben | 3 May 2007, 22:10 | link
No more compatibility mode. Supported browsers are Internet Explorer 6+

the answer to a problem:

sIFR-screen.css

.sIFR-flash { voice-family:”\”}\”“; visibility: visible !important; margin: 0; padding: 0; }

.sIFR-replaced { voice-family:”\”}\”“; visibility: visible !important; }

.sIFR-alternate { voice-family:”\”}\”“; position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; }

.sIFR-replaced > div { voice-family:”\”}\”“; display: none !important; }

voice-family:”\”}\”“; at the beginning of style

IE 5.x run

Ron Jordan | 7 May 2007, 20:57 | link
Hmm, what problem does that answer?

Mark Wubben | 7 May 2007, 21:14 | link
The problem is: the IE 5 delivers an empty page. This behavior is caused by the styles of sIFR-screen.css By the use of voice-family:”\”}\”“; or font-family:”\”}\”“; the IE 5 ignores the remaining page. This means that you can see at least the HTML text and no empty page.

Ron Jordan | 8 May 2007, 11:51 | link
But sIFR is not supposed to be active in IE 5 – at least it’s not on my installs. Those classes should never be on the page, so the styles should never have an effect. Is sIFR running on your IE 5 install?

Mark Wubben | 9 May 2007, 20:37 | link
sIFR does not run on IE 5. With my changes you won’t see the flash letters, but, as you can read in my last comment, you will at least see your page with HTML letters. Better than empty page, I think ;)

That was all I’m trying to say.

Ron Jordan | 9 May 2007, 21:14 | link
What I mean is that there are no elements in the page using those classes if sIFR doesn’t run.

Mark Wubben | 9 May 2007, 22:04 | link
If another flash object is placed before a sifr title, the sifr title won’t work. (most of the time, sometimes it actually does work?!). Think it has something to do with loading times? Are there more people who experienced this? And how did you solve it?

Mike | 14 May 2007, 23:07 | link
Could you be more specific? Site, browser, etc…

Mark Wubben | 15 May 2007, 08:11 | link
Website is not online (yet). Runs on localhost. Browser is IE7. Headers after the Flash-object (e.g Flash Video Player 3.8 by Jeroen Wijering) are invisible. But when the refresh button of the browser is pressed, most of the times they will become visible.

Mike | 15 May 2007, 11:00 | link
Offtopic: Mark, please clean your mailbox. I’m currently unable to reach you by mail due to a “Disc quota exceeded” error on your side. Thanks in advance!

Mike | 16 May 2007, 00:43 | link
Oh man, that explains the recent lack of e-mail! Cleaning up data as we speak, and filed a ticket to get my disc quota doubled (no idea what I’m using that 1GB for, but I should have had 2 GB…)

Your mail should be able to get through now.

Mark Wubben | 16 May 2007, 09:11 | link
Mark,

I am still using sIFR version 3, beta 1 and loving it! However, I am seeing weird occurrences in IE7 when exiting a page with sIFR’d text on it.

Specifically, I have an H1 stacked on an H2, both using sIFR… When I click to go to another page in the site, the H2 “duplicates itself” (weird rendering?) and actually appears twice prior to leaving the page, as if the H1 become a mirror of H2. (This does not occur in FF2) … Does sIFR utilize a window.onunload event, or is IE7 just making my job that much more fun? :)

Has anyone else seen this in IE7 when exiting a page?

pixelchutes | 16 May 2007, 23:16 | link
Quick update: I also confirmed this is also happening as of the May 11th nightly. Maybe it is just a weird IE7/Flash quirk?

pixelchutes | 16 May 2007, 23:34 | link
Hey Mike, that’s a quirk yea. I think it can be fixed by removing the Flash movies on unload, but I haven’t build that in yet.

Mark Wubben | 17 May 2007, 09:39 | link
Pixelchutes (#82): I had the same thing, with both sIFR 2 & 3. If I recall, in my case it was related to haslayout. But I was able to fix it, it is not an inherent sIFR bug.

Jonathan Nicol | 19 May 2007, 14:09 | link
Sorry, my link got lost. Here is a link to a page with info on the concept of haslayout in IE: http://www.satzansatz.de/cssd/onhavinglayout.html

Jonathan Nicol | 19 May 2007, 14:10 | link
Jonathan, thanks for the tip. If it only happens with hasLayout I can narrow down the workaround.

Mark Wubben | 19 May 2007, 14:27 | link
After reading through the comments, I wanted to clarify something about the “drop-shadow text disappearing when highlighted”. Mark stated it’s a flash issue, but it’s really because he has “knockout” set to True in the demo, meaning there really is no text there, just its shadow. :) I have no problem highlighting drop-shadow text with knockout set to false.

I’m also not sure of the best place to ask this, but I’m using sIFR 3 r260 and using wmode:transparent, and it’s ruining a:hovers in Opera and Firefox. I read that this bug was fixed in sIFR 2 final, so why is it back in sIFR 3?

Also, the latest nightly doesn’t even work in Firefox for me. :(

Jon | 3 June 2007, 13:06 | link
I really meant wmode:opaque, but it does the same thing for both settings.

And to clarify, in FF2 I just have to click twice, but in Opera links become periodically unclickable, no matter what.

Jon | 3 June 2007, 13:33 | link
Jon, true. I’d still say Flash should show some kind of selection though. What’s the problem with the hovers? Window mode and certain CSS properties don’t always get along, this is most likely what’s causing the problems with clicking. Try removing float and overflow on ancestors of the sIFR’d text.

Mark Wubben | 4 June 2007, 12:56 | link
I had found this in some blog: “Firefox seems to have trouble with links This is most likely a Firefox bug, related to embedded Flash movies. Nonetheless, Firefox seems to show erratic behavior as to when sIFR links work. Sometimes, links require two clicks, sometimes a rollover won’t work, and won’t show a “hand cursor”. Update: sIFR RC2 fixes this problem.”

I just discovered there is a support forum for sIFR, haha. I found you mentioning my problem here:

“The link colors need to be specified in JavaScript, like in the demo. The clicking behaviour is a known bug in Firefox where you have Flash movies with wmode inside a floated element.”

in this thread: http://forum.textdrive.com/viewtopic.php?pid=125592

So, is this still a problem then?? :( There is no way for me to remove the floats from the parent DIVs.

Jon | 4 June 2007, 16:35 | link
hi,

i’m having a problem with sIFR, firefox and the ‘slimbox’ gallery (which uses the mootools framework). i have found some related discussion over at the textdrive forums but nothing that has yet fixed the problem.

i’m using the nightly build ‘sifr3-r273-fix’.

It is a problem i’m having with the mac version of firefox 2. (windows machine is down at the moment so havn’t been able to try it there yet) safari is unaffected.

using firefox 2, when i click on an image using the ‘slimbox’ gallery code, a (mootools powered) animated fade effect appears showing a large version of the image clicked. when i close the large image the sIFR text below disapears, and only reappears upon a reload (safari doesnt have the same issue, when i close the image, the sIFR text reappears after a short pause)

maybe related is another problem i was having (when using sIFR2) also with the slimbox gallery - and is fairly well documented in various discussions - relating to the sIFR text ‘showing though’ the slimbox animation. fiddling with z-indexes and wmodes didnt fix anything, but since trying sIFR3 this problem disappeered - not sure if it is related to the firefox refresh thing, but thought it might be useful info?

so, any ideas why firefox needs the page refreshing after executing the slimbox code to show the sIFR text again?

here is a link to the culprit page - using firefox, click on one of the images towards the bottom of the page to see the problem.. http://homepage.mac.com/voodoo6/sIFRbug/casestudies_detail.htm

i hope this is an appropriate place to ask for help, any is greatly appreciated.

mat | 4 June 2007, 16:51 | link
Jon, it’s a browser issue so all we can do is hope that it gets fixed.

Mat, this too is a Firefox issue. As a workaround you can iterate over all sIFR movies (sIFR.callbacks contains an array) and toggle their display:
```
for(var i = 0; i < sIFR.callbacks.length; i++) {
  var cb = sIFR.callbacks[i].getFlashElement();
  cb.style.display = "none";
  cb.style.display = "";
}
```
You should do this after the image has faded out again.

Mark Wubben | 5 June 2007, 10:52 | link
thanks for the reply Mark. although i’m learning javascript, i’m still something of a ‘cut and paste/step by step’ guy when things get complicated! - could you spell out where to put the code you’ve posted - eg. how do i get it to be called after the image has faded?

thanks again for your work on sIFR and i appreciate your patience.

mat | 5 June 2007, 13:05 | link
Hi Mark, first of all, you do a great job with sIFR! I heard about it (and saw it in action) a while ago and today I decided to use sIFR on a website I’m making. I downloaded revision 273-fixed, but the demo isn’t working (IE and FF). But when I download r230 the demo is all fine. Do you know what the problem is? Or should I just use r230? Thanks in advance!

Lennert | 6 June 2007, 14:18 | link
Could you try with r274?

Mark Wubben | 6 June 2007, 21:56 | link
Also in r274 the demo isn’t working. Am I doing something wrong somewhere?

Lennert | 7 June 2007, 15:46 | link
You sure you have Flash 8+ installed?

Mark Wubben | 7 June 2007, 18:39 | link
Yes I have. I’ve put it online and now it’s working. Apparently flash isn’t starting local, or something…

Lennert | 11 June 2007, 19:29 | link
Using the new Safari Beta 3 for Windows all the links on my website disappeared, except the sIFR headlines. Any idea?

Bas Wenneker | 12 June 2007, 07:59 | link
I’d say that’s an issue with the browser itself.

Mark Wubben | 12 June 2007, 09:59 | link
Which version of sifr should i be using? Beta or the latest revision?

I’m having this headache of a problem where using a previous revision, a sifr link (i.e. header shows up using the proper link colors defined in the general css

But this last few revisions, a similar link has been using the default browse blue color link instead, when i turn off siFR the link uses the right css link color, but if i enable sifr again, no go.

I’ve tried going through this by process of elimination, using the old swf font that worked before, css tweaks…only thing left is the sifr version itself.

Having said all that, thanks for your hard work with this, it’s truly remarkable.

Luyen Dao | 28 June 2007, 23:47 | link
Latest revision. In order to style text inside the Flash movie, you have to specify some CSS in the replace() method. It sounds like you didn’t?

Mark Wubben | 1 July 2007, 20:36 | link
Hello I have some problems you can see it at: http://www.4elementz.com/profiles/?u=DJScratcher

SIFR shows up a few seconds after te page is loaded. That’s why the table expands/flashes/shuffles. I can’t explain it well.

Also I can’t ged rid of that 1cm space in the bottom.

I tried resizing in the .fla and in the css etc, nothing helps :S

delftdamage | 2 July 2007, 09:29 | link
Please go to the forum for support questions, and if you do a search there you might even find the answer to your question.

Mark Wubben | 2 July 2007, 16:19 | link
Uhm… about r278,…

I had the same problem like MAT (see http://novemberborn.net/sifr3/beta1#c000757 ), and I used some older version like r260, r273. I’ve downloaded the r278 and I saw some modifications in changelog. A resetMovie() appeared in the new release, and some callbacks. My question is: Is this a fix for the firefox’s flash-disappearing in OS X?

Sitov Cristian | 4 July 2007, 09:09 | link
Silov, as noted above, this is a Firefox bug. Did you try the workaround I proposed?

Mark Wubben | 4 July 2007, 09:17 | link
That’s is SITOV :P

Okie… you’re talking about:

for(var i = 0; i < sIFR.callbacks.length; i++) { var cb = sIFR.callbacks[i].getFlashElement(); cb.style.display = “none”; cb.style.display = “”; }

?!?!?!?

Another thing that I’ve observed is that, when slimbox (lightbox) is starting, suddenly sifr embed-tag receives an inline-style property like visibility: hidden. Though, after closing the slimbox’s overlay container, the visibility comes back to visible, but no sifr can be seen.

On the other hand, like Mat, I didn’t understand what and where should that code go (the one you posted and recommended to us). Can you be more specific ?!

Sitov Cristian | 4 July 2007, 09:57 | link
Yes:

You should do this after the image has faded out again.

I don’t know where in the slimbox/lightbox code this occurs, but that’s where the fix should go. I’d assume slimbox/lightbox changes the visibility, my fix makes sure sIFR is displayed after it finishes.

Mark Wubben | 4 July 2007, 10:20 | link
Okie, did that! Surprise. sIFR is still affected.

I tried other several methods, like changing the visibility instead of changing the display, still no chances.

More than that, I’ve tried a sIFR.redraw() after fading out. Still no success. Is there anything I should try ?!

Let’s move the discussion on forum :P

Sitov Cristian | 4 July 2007, 10:43 | link
Sitov and Mat:

This is a bug with Firefox Mac + Flash.

If you use slimbox (mootools only), try this AFTER slimbox is loaded (put this code in the end of slimbox.js) :
```
window.addEvent('domready', function(){
    Lightbox.fx.overlay.addEvent('onComplete', function(){
        if (Lightbox.overlay.getStyle('opacity') == 0 ) {
                Lightbox.overlay.setStyle('height', 0);
        }
    });
});
```
This will take slimbox overlay out of the way after it has been used.

The solution can be achieved in many ways and other *box libraries.

Alfredo Giorgi | 13 July 2007, 19:39 | link
Alright so I thought i had this working for about half a second but now all i can see is “8:Rendered” on a huge white background. How can i fix this, and what did i do wrong?

Scott Goetz | 19 July 2007, 17:47 | link
Sounds like the JavaScript code and Flash code are not of the same version.

Mark Wubben | 19 July 2007, 18:34 | link
Im using sifr 3.0 right now what version of flash to I export it as.

Scott Goetz | 19 July 2007, 19:09 | link
How can i activate sifr at request on div’s that were hidden when document was initially renderered? Thanks!

Luis Martins | 15 October 2007, 16:26 | link
You have to replace the elements inside that div “again” when you first show the div.

Mark Wubben | 15 October 2007, 19:46 | link
Does anyone know if a callback can be used to add a .click event using jQuery?

Something like `sIFR.callbacks[‘#content h2’][0].click???

Roman | 16 October 2007, 16:45 | link
Nope.

Mark Wubben | 16 October 2007, 18:55 | link

sIFR 3b1: The Mo’ Betta Beta

Comments

Novemberborn: Extra

About the author

Go to

Jobs (NL)

Please donate

sIFR Documentation

Subscribe

Prev/next

Recent articles

Recent comments

Other