How to setup

1. Download the zip file
2. Unzip and upload all files to the web server
3. Include these 2 scripts in the HEAD section:

<script src="/jfef/js/swfobject.js" type="text/javascript"></script>
<script src="/jfef/js/jfef.js" type="text/javascript"></script>

4. The way it works is jFEF will find the HTML element and swap out its content (innerHTML) with the flash object. So assuming your HTML like this:

 
<h1 id="header">Fancy Header Text</h1>
 

Then this js will do the trick:

jFEF.init({id : "header",
    swfUrl : "/jfef/jfef.swf",
    fontUrl : "/jfef/fonts/RockwellExtraBold.swf",
    cssUrl : "/jfef/css/jfef.css",
    params : { size: 20,
	    width: 200,
	    height: 100
    }
});

5. Because the script needs to do the injection on the fly, you need to make sure that the HTML element is ready or better off hook up the js with onload event:

swfobject.addDomLoadEvent(function() {
    jFEF.init({id : "header",
        swfUrl : "/jfef/jfef.swf",
        fontUrl : "/jfef/fonts/RockwellExtraBold.swf",
        cssUrl : "/jfef/css/jfef.css",
        params : { size: 20,
	        width: 200,
	        height: 100
        }
    });
});

Docs & Demos

These demos show you different settings that are currently supported by jFEF.

1. Basic usage ("width", "height" required):

This is the bare bone setting which requires at least these 2 params to be provided: width, height so that jFEF can be correctly rendered. With width and height specified, jFEF will try to scale the text to the whole area and thus the font-size could be varied depending on the length of the text. If you don't want this automatic scaling process happened, you can add size param and jFEF will use the fixed font-size but you could end up having the text truncated. In this case, you can either increase the width value or decrease the size. params: {width: 300, height: 30}

Hello World!!!

2. Text color ("color" optional):

This will apply the text color. params: {width: 300, height: 30, color: "#c00c00"}
Hello World!!!

3. Background color ("bgcolor" optional):

This will apply the background color to the container box. params: {width: 300, height: 30, bgcolor: "#999999"}
Hello World!!!

4. Background image ("bgimg" optional):

Applying background image to the container box. params: {width: 300, height: 30, bgimg: "http://vietnewsonline.com/phonglu/wp-content/themes/inove/img/header_footer.jpg"}
Hello World!!!

5. Opacity ("opacity" optional)::

Applying opacity setting to the text. Value: 0~1 params: {width: 300, height: 30, bgcolor: "#000000", opacity: 0.5}
Hello World!!!

6. Border:

Adding border to the container box params: {width: 300, height: 30, bordercolor: "#c00c00"}
Hello World!!!

7. Drop shadow:

Adding drop shadow around text params: {width: 300, height: 30, dropshadowcolor : "#c00c00"}
Hello World!!!

8. Letter spacing:

Increasing/decreasing spacing between individual characters. Value: positive/nagative integer params: {width: 300, height: 30, letterspacing: 7}
Hello World!!!

HTML & CSS tags support

Flash only supports a limited subset of HTML and CSS tags so make sure your HTML code falls within these limitations

HTML: p, b, u, i, span, a, img, li
CSS: font-style, font-weight, color, text-align, margin-left, margin-right, display (Note: these css need to be inside css file specified in cssUrl param)

How to style/reposition jFEF objects

All jFEF flash objects have id the same as the id of original element with "jFEFSwf-" prepended so you can always use CSS to modify the element to your desire. So assuming your HTML code like this:

 
<h1 id="header">Fancy Header Text</h1>
 

Your CSS should look like this:

#jFEFSwf-header {
    float: left;
    position: relative;
    top: 10px;
    left: 10px;
}

Font library

Click here for tutorial on how to create Century font

Click here for list of fonts that are already been compiled