TOP [1]

jQuery Sifr Plugin

NAVIGATION [2]
INFORMATION [3]

Information

Download
jQuery Sifr Plugin v1.5 Minified Js (3.09k) Uncompressed Js (6.07k) All-in-One Zip (135k) Homepage
jQuery v1.2.3 Minified Js (52.8k) Uncompressed Js (94.4k) Homepage
jQuery Flash Plugin v1.0.1 Minified Js (3.21k) Uncompressed Js (8.21k) Homepage
sIFR Flash Font Source v2.0.5 All-in-One Zip (6.56k) Homepage
Author
Jonathan Neal jneal@liferay.com
Last Updated
May 13th, 2008
Back to top
DESCRIPTION [4]

Description

jQuery Sifr Plugin lets you dynamically replace traditional text in a web page with Scalable Inman Flash Replacement (sIFR) rendered text using native jQuery functionality, along with the jQuery Flash plugin. jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML, allowing you to easily include many components that enrich and benefit the developer's coding experience. Then, jQuery Flash is a simple but powerful plugin for jQuery that allows you to easily embed Flash movies using native jQuery functionality.

With jQuery Sifr Plugin designers and developers can easily display dynamic, on-the-fly text using the font(s) of their choice, regardless of the visitor's currently installed fonts, web browser, or operating system. sIFR is not designed for body copy text as rendering greater bodies of text. If unspecified or unloaded, jQuery Sifr Plugin gracefully falls back to the traditional CSS based styling instead of the sIFR rendering.

Back to top
FEATURES [5]

Features

jQuery Sifr Plugin attempts to provide the most simple configuration as possible. Specify what you need, and nothing more -- sensible defaults take care of the rest. 

$('#title').sifr();

The following optional parameters are available for your convenience.

Back to top
EXAMPLES [6]

Examples

In this example, we change the text of an element with the id of medici into Medici sIFR text. 

<div id="medici" style="font: 8em 'Times'; ">Sample Text</div>
<input type="button" value="Sifr this..." onClick="$('#medici').sifr({path: 'resources/', font: 'Medici Text', roY: 6.5, color:'#f00'}); ">
<input type="button" value="UnSifr this..." onClick="$('#medici').sifr(false); ">
Sample Text

 

In this example, we save settings using the $.sifr({save: true}) argument for later use. 

<script type="text/javascript">
$.sifr({ path: 'resources/' , color: '#0f0', save: true });
</script>
<div id="gunmetal" style="font: 5em 'Times'; ">Sample Text</div>
<input type="button" value="Sifr this..." onClick="$('#gunmetal').sifr({font: 'Gunmetal', aoY: 5 }); ">
<input type="button" value="UnSifr this..." onClick="$('#gunmetal').sifr(false); ">
Sample Text

 

In this example, you can test your own results with my plugin. 

<div id="test" style=""></div>
<input type="button" value="Sifr this..." onClick="$('#test').sifr({}); ">
<input type="button" value="UnSifr this..." onClick="$('#test').sifr(false); ">
Sample Text
Back to top
KNOWN ISSUES [7]

Known Issues

Browsers will not locate the anchor (e.g: href=#anchor) element if it is transformed into a sIFR element. Fixed!

Link elements may not inherit the link color until hover. This appears to be a fault of either Flash or sIFR. Fixed!

You must set the font (e.g: font: 'font name') for Opera browsers, because Opera does not fathom certain CSS entries, namely writing a non-existant font in the font-family. Apparently, they don't want to dream.

The sIFR flash object automatically uses the text cursor on sIFRed text, and the pointer cursor for sIFRed anchor tags. This can not be overwritten with CSS or flash parameters, yet.

You should not use jQuery packed with this plugin (or ever). If you do, Internet Explorer may display a "click to activate" border on every sIFR replacement.

Back to top
LICENSE [8]

License

jQuery Sifr Plugin uses a dual MIT/GPL license.

MIT License

Copyright (c) 2008 Jonathan Neal

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

GPL License

jQuery Sifr Plugin by Jonathan Neal

Copyright (C) 2008 Jonathan Neal

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.

Back to top
CHANGE LOG [9]

Change Log

Oh the memories...

2008:05:13 10:45:52 jQuery Sifr Plugin v1.5 released.
Came up with a creative way to accomidate css line height.
You can now unSIFR text by just passing false too, $('#area').sifr(false);.
Fixed a typo with the toLowerCase feature (Stanislav Litvinenko found this one).
Made some changes to the website again, you can now test your own sIFR examples!
Man, I love all the emails you guys send me. Thanks.
2008:05:05 17:39:56 jQuery Sifr Plugin v1.4 released.
The plugin was rewritten from the ground up, but very carefully, okay?
A lot of backend stuff has changed - the minified version has shrinked!
Fixed two "Known Issues" bugs.
Removed the functions sifrSettings and unSifr.
Added functions $.sifr({save: true}) and $.sifr({unsifr:true}), get it?
Fixed a lot of bugs with settings and adjustments, and they're all working so swell now!
Redid the site again so that it looks the same in IE 6 & 7, Firefox 2 & 3, Safari, and Opera, but I never actually tested in Safari or Opera because I trust them. Do not fail me, guys.
Still trying to escape the jQuery(self).lonely() function in my life.
2008:04:24 15:19:09 jQuery Sifr Plugin v1.3 released.
Fixed a bug where the fontSize wasn't actually working (Neil Martin found this one, such a cool guy).
Improved the way settings were evaluated, making the script faster and smaller.
I felt like moving from v1.2 to v1.3 added the much needed sparkle that's been missing in my life.
2008:03:28 11:29:13 jQuery Sifr Plugin v1.2 released.
Fixed a typo bug where textTransform: 'lowercase' wasn't working (Troy Thompson found this one).
Fixed bugs between the way HTML and Flash render whitespace (Troy Thompson found this one, that guy rocks).
I felt like there were enough changes since v1.1 to move to v1.2.
2008:03:26 11:15:38 jQuery Sifr Plugin v1.1.06 released.
Added some necessary sIFR source files to the sIFR Flash Font source (thanks for noticing, Sven Franke).
Refined capitalization support.
A special shout out to Oleg Gunkin for his suggestions and assistance.
2008:03:25 16:43:24 jQuery Sifr Plugin v1.1.05 released.
Changed the way sIFR downgrades when flash is not present. The following parameter was added.
  • textTransform: Defines and possibly overrides the text transform of a Sifr element (e.g: 'uppercase', 'lowercase', 'capitalize').
2008:03:25 13:51:26 jQuery Sifr Plugin v1.1.04 released.
Fixed a magical font size / font height issue with IE that none of you noticed? How could you *sniff*!
2008:03:20 10:25:32 jQuery Sifr Plugin v1.1.03 released.
Fixed a font size / font height issue with IE.
Added a download, the sIFR Flash Font source, for exporting your own sIFR Flash Fonts. Tested successfully in Firefox 2, Firefox 3 beta 4, Internet Explorer 7, Opera 9.25, and Safari 3.1.
Tested successfully in Internet Explorer 6, but this site design fails in Internet Explorer 6.
The following parameters were removed.
  • lineHeight: Removed because you can not control the lineHeight of a Sifr element, duh! Silly me.
2008:03:19 13:10:36 jQuery Sifr Plugin v1.1.02 released.
The following parameters were removed.
  • hAlign: Replaced by textAlign (to match its javascript css counterpart).
  • vAlign: Replaced by verticalAlign (to match its javascript css counterpart).
The following parameters were added.
  • textAlign: Defines and overrides the font size of a Sifr element.
  • verticalAlign: Defines and overrides the line height of a Sifr element.
Attempted to improve and clarify all documentation on this page (with much encouragement from Paul Vlasenko).
2008:03:06 14:20:52 jQuery Sifr Plugin v1.1.01 released.
Fixed a font-size bug that was in IE that was completely my fault (thank you, Jeremy Kallman).
The following parameter was removed.
  • size: Replaced by fontSize.
The following parameters were added.
  • fontSize: Defines and overrides the font size of a Sifr element.
  • lineHeight: Defines and overrides the line height of a Sifr element.
2008:02:22 17:34:19 jQuery Sifr Plugin v1.1 released!
Completely rewrote the Sifr plugin like I was Super Sonic, it's way better.
Added 'sifrSettings' function that allows you to save settings, no more redeclaring the font path, everytime.
Script shrunk by 12% from its original size.
2008:02:11 10:42:38 Added a known issue with Opera browsers, who do not believe in flexibility.
2008:02:04 23:34:35 jQuery Sifr Plugin v1.0.05 released.
Updated the example because it was a terrible, terrible example.
Fixed a font-size bug that was making IE feel like a little girl.
2008:02:04 17:28:14 jQuery Sifr Plugin v1.0.04 released.
Millions of users download v1.0.03 hours before v1.0.04 is released ... not
Increased versatility of the size option.
2008:02:07 16:26:45 jQuery Sifr Plugin v1.0.03 released.
Removed alpha and shadow features that 99.9% of the Sifr fonts out there don't have.
Filesize shrunk when minified! Woohoo!
Significantly improved and or fixed how colors are set.
The following parameters were removed.
  • offsetX: Replaced by absoluteOffsetX, aox, relativeOffsetX, and rox.
  • offsetY: Replaced by absoluteOffsetY, aoy, relativeOffsetY, and roy.
The following parameters were added.
  • absoluteOffsetX: Shifts the content by an absolute number of pixels along X.
  • aoy: Shorthand of absoluteOffsetX
  • absoluteOffsetX: Shifts the content by an absolute number of pixels along Y.
  • aoy: Shorthand of absoluteOffsetY
  • relativeOffsetX: Shifts the content by a relative number of pixels to the font size along X.
  • rox: Shorthand of relativeOffsetX
  • relativeOffsetY: Shifts the content by a relative number of pixels to the font size along Y.
  • roy: Shorthand of relativeOffsetY
  • size: Defines and overrides the size of the font to absolute pixels.
2008:02:04 15:24:05 jQuery Sifr Plugin v1.0.02 released.
Verified the script was jQuery v1.1.3 compatible.
Switched $'s to jQuery's, opps.
Moved all sub-functions inside the Sifr function, nice.
You can now set the following optional parameters.
  • offsetX: Defines the horizontal offset ratio (fontsize*offsetX).
  • offsetY: Defines the horizontal offset ratio (fontsize*offsetY).
  • vAlign: Defines the vertical alignment of a Sifr element.
  • hAlign: Defines the horizontal alignment of a Sifr element.
  • width: Defines and overrides the width of a Sifr element.
  • height: Defines and overrides the height of a Sifr element.
  • path: Defines the directory path of a Sifr font file (SWF) to be used.
  • font: Defines and possibly overides a Sifr font file (SWF) to be used.
  • color: Defines and possibly overrides the main color of a Sifr element.
  • underline: Defines and possibly overrides the anchor link underline of a Sifr element (boolean).
  • alpha: Defines the opacity of a Sifr element (experimental).
  • link: Defines and possibly overrides the anchor link color of a Sifr element.
  • hover: Defines the anchor link mouse over color of a Sifr element.
  • shadow: Defines the shadow color of a Sifr element (experimental).
  • shadowX: Defines the shadow's horizontal offset of a Sifr element (experimental).
  • shadowY: Defines the shadow's vertical offset of a Sifr element (experimental).
  • shadowAlpha: Defines the shadow's opacity of a Sifr element (experimental).
  • backgroundColor: Defines and possibly overrides the background color of a Sifr element.
  • content: Defines and possibly overrides the content (text) of a Sifr element.
2008:02:04 10:03:33 jQuery Sifr Plugin v1.0.01 released.
Removed the console log, renamed local variables.
Updated color controls.
2008:02:03 10:33:06 jQuery Sifr Plugin v1.0 released.
Back to top!