SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Please comment on the success you had with http://www.mikeindustries.com/sifr/ . I have not tried using it, but from the zip I downloaded, it seems complicated.
-
Personally, I love it and I try to use it in as many websites as I can. For Flash Pearls, I modified it to also incorporate a dropshadow and text fade-in (check out each page's header text).
I will admit it's intimidating to use at first, and it does take some tweaking when you first set it up. Some common problems you may run into when first using sIFR are not including all the essential styles and not having the correct path to your SWF file (it needs to be relative to the page, not the JS file).
If you're having trouble with sIFR, there's a forum over at http://forum.textdrive.com/viewforum.php?id=20
If the pages you're working with are PHP, check out PHP + CSS Dynamic Text Replacement (P+C DTR). There's no extra JS markup like sIFR which is great (cleaner code and easier to set up), but the text is not selectable (which may or may not be an issue for you).
-
I believe that the sIFR approach is better from the accessibility standpoint (it's better for the user) while the P+C DTR is better for the developer because it is easier. It's a little hard to put yourself in front of your users.
-
-
CommentAuthoradjustafresh
- CommentTimeDec 14th 2005 edited
I've used it on a few sites, including my own.
I think it's a great effect, but it is a bit daunting to implement. The documentation isn't the greatest. One thing I have noticed is it can take a while to load sometimes.
John, I love how you added the fade in on your site. Wanna clue us in as to how you pulled that one off? -
-
I noticed that on the University of Washington Admissions page. There is a 1-2 seconds dealay after the entire page has loaded before the headings appear. I think it has less than 5 headlines using this.
-
I've been meaning to document how I modified sIFR to achieve those effects since I launched Flash Pearls back in May, and here we are in December and I still haven't set aside the time to do it. :P
As far as the fade is concerned, I achieved that by making the width of the stage of the sIFR Flash file the same width as my H2. I then created a rectangle that was twice the width of the stage and had it fade from 0% opacity at the left edge to 100% opacity at the halfway point. I positioned it aligned with the right of the stage (so the text is completely covered), and then animated it to move from left to right to fade in the text.
I also modified the JavaScript so it sets the color of that movie clip to the background color specified in the sIFR function call. When I have time, I'll explain the magic behind that. -
sIFR still has acessibility problems. Yes, you can select the header, but that's the only thing you can select during that selection. CTRL+A will not select everything. It will avoid the headers.
-
It was a bitch to get it running for my first time, but now I'm confident with it I've got it on both my live sites:
http://www.cannedlaughter.net and
http://www.flashbangpop.com -
After seeing that it is still hard to select text with it, the PHP solution does not seem bad anymore. I doubt that an user will copy a large amount of text and then go back and copy each header individually.
-
After digging for a while for 3rd party articles, I found out that it does select the text. The highlighting is just hidden by the Flash.
-
-
CommentAuthorshalstvedt
- CommentTimeDec 14th 2005 edited
I have it integrated in to my new design, and the design (here) prints and degrades perfectly. -
-
I can't figure out how to right align headers. It ignores the CSS.
-
-
CommentAuthorshalstvedt
- CommentTimeDec 14th 2005
Ah, and I agree with Sam K, it is a bitch to get running if you haven't done it before. Tweaking for like 4 hours...
-
-
sFlashVars: "textalign=right"
-
I'm going to take a look. Seems very usefull. Thanks :)
-
As mentioned above, the first time can be tricky but then things become much clearer the 2nd time round. Can't imagine life without it now.
The only downside I can see it that I can't use it for navigation bars (that just contain a few main links) built using lists, both horizontal and vertical. Shame.
I also get extra unwanted padding above and below my headings that I can't get rid of in my CSS. Anyone got any ideas on this?
A site I recently completed using sIFR: http://www.lcpe.gov.uk -
The padding on the headings at the London Centre Excellence looks good to me... is there more padding there than you want, or are you having that padding problem with sIFR on another website?
-
Thanks for looking John.
It's just a general problem I always seem to have with sIFR styled headings (the padding issue). I have compensated on the London Centre Excellence site by using slightly less padding on the surrounding elements so the spacing looks okay.
I have a good example at the moment actually John: http://217.154.199.89/templates/
Here's an enlarged screengrab to show exactly what I mean: http://217.154.199.89/templates/sifr_padding_demo.gif
See the right hand column - compare the top of the 1px vertical border (running down the right column) with the top of the 1st sIFR heading and you'll notice the additional 4px of padding on the text. That heading should, in theory, line up perfectly with the top of the border.
The guides show the problem om the screengrab. On the top you can clearly see the extra 4 pixels with the CSS padding-top: 0 and margin-top: 0. On the left I'm getting 12px with the margin-left: 10px and padding-left: 0.
Annoying. -
Dunk Ra,
The sIFR is actually working properly in your example. Take a look at this section of your page without sIFR, with the "Outline Block Level Elements" option from the Web Developer Toolbar:
As you can see, the block of text for your H3 is correctly positioned at the top and 10px to the left. Your padding is also at 0px, but it does not appear that way because your text does not have any characters that fill up the entire height & width. If you set the padding of that H3 to 1px instead of 0px, you'll see that it does in fact add 1px of padding, which shows the 0px of padding is properly being applied.
You may be wondering what character would fill up all that vertical space? And here's the answer:
Now what you really want to know is how to fix this. You'll have to do some testing, but I imagine if you were to go into the sIFR Flash file and set the text's y-value to -4px and then export it, then you'll have the 0px top padding you're looking for. Tradeoff of that is it would create additional padding on the bottom. That could be fixed by hacking that JavaScript that determines the size of the text box. But that's probably more effort than you're looking to do.
-
Does sIFR not support em values? I used 2em (20px) and siFR creates tiny headings.
-
Unfortunately sIFR does not work with em values. You can specify your default text values with em's, but set your decoy styles (i.e. .sIFR-hasFlash #h1) with the approximate px equivalent.
-
Adding padding to the decoy, in my case top and dow of 0.35em, makes siFR render the headings right with font-size of 2em.
-
JohnRiv - many thanks for clearing that up, seems obvious now thanks to your examples. I'm sure others will find this info useful too. Thanks again for your time and help.
-
Has anyone used CSS to control their SIFR color? So you can do a style switcher.
-
using JavaScript to read CSS is a bitch... it's possibly someone did used CSS to control their sIFR, but I'm not aware.
If you're using JavaScript to do a style switcher though, you could easily add the sIFR color changes to the style switcher JS. -
It seems that there is a problem with sIFR and Safari. That site crashes Safari. Your sites don't, but the CSS rendered headings are displayed.
-
I've just added sIFR to http://www.tonguengroove.co.uk/ using a Wordpress plugin, got it working perfectly in 30 minutes...
Now I'm wondering if I should use it at http://tinyurl.com/n9muc as well... how well does it work in IE5.5 etc? -
IE5 mac can be ignored. Mac users use Safari (loyal Apple slaves), FIrefox, or Camino.
Were you inspired by http://www.olympia4.nl/index.html for that site? -
Which site?
-
No... actually the site is based on the 'Stanch' theme for Nucleus which was then ported to Wordpress.... I used that but changed the colour to red instead of yellow and took it from there... http://the-way-to-the-centre.org.uk/blog/images/stanch.jpg
1 to 31 of 31