Web Design Reference Guide

Help! I’m FACE-ing problems!: Troubleshooting FACE

Last updated Oct 17, 2003.

I’ve shown you what FACE is; I’ve shown you how to add it to your site, and I’ve shown you some possible uses of FACE. But what are you to do when things aren’t running smoothly? FACE is a technique that uses CSS and JavaScript to create very flexible animations, but it can be a bit tricky to get to work if you’re not completely fluent in CSS-based design or if you have not worked with JavaScript much. Not to worry: I am going to help you out with the most likely or confusing problems you may encounter when implementing FACE on your own website.

The Root of All CSS

A relatively simple problem is the location of the face.css file itself. While the JavaScript file of FACE, face.js, can be placed anywhere you want to within the structure of the site, as long as you include it from that location properly, the CSS file has a default designated location: the root directory of your website.

That means it should be placed on the lowest level of your site, i.e. "/" — not in any subdirectories of any kind. The JavaScript engine that powers FACE will look for a file called "face.css" on the root level of your site, so if your domain is "my-website.com" the FACE engine, regardless of where you put the JavaScript file, will try and search for the CSS file in this location:

http://www.my-website.com/face.css

If you don’t put your face.css file in that location, the script won’t find it and therefore won’t include it, and your animations will not work. This is only one of several parts of FACE that, when not done properly, will keep your animations from running, so if you are sure that you have put the face.css file in the right place but your animations are still not working, keep reading for other problem areas below.

If for some reason you are not able or allowed to put the face.css file in your root folder, a situation not all that uncommon on larger websites, you can change the location of where the FACE JavaScript will look for the face.css CSS file. To do this, open up either face.js or face-uncompressed.js and search for the first occurrence of the string "folder" (minus quotes).

In the uncompressed version of face.js, it should look like this:

folder   : ’/’,  // Folder which contains the face.css file

In the compressed version, it is condensed into the only necessary parts:

folder:’/’

Now, if you need to put the face.css file in a sub-directory, for instance "/css/", all you have to do is change the value. Instead of ’/’ you would then have ’/css/’ in the face.js file. You can go as many levels deep with this as you want (or have) to: ’/includes/css/face/’ would still be a valid value for "folder", in which case your face.css file would be found here:

http://www.my-website.com/includes/css/face/face.css

Should you change the folder location around, don’t forget to save the updated face.js file and upload it, overwriting any existing face.js you may have.

Understanding Stop-motion Animation

FACE uses the principles of stop-motion animation to animate the various parts of your website. This means you should think of the animation not as a loop between start and finish, but as a series of frames that are very similar to each other, yet differ from one another just enough to make a visual change occur when you see the steps very quickly after each other.

What this means in CSS terms is that you will need to specify each "frame" of CSS animation as a separate rule, much like stop-motion animation has a separate image for each frame in that process.

Additionally to specifying many separate CSS rules as a series of frames, you must keep in mind that FACE uses numbers to identify each separate step of the animation. The CSS class you use in the FACE Construct is appended with a number when it runs on your page, so when you have a class name "slide", your CSS file should look something like this:

.slide1 { text-indent: -20em; }
.slide2 { text-indent: -18em; }
.slide3 { text-indent: -16em; }

...and so forth.

Similarly, FACE is not Flash-powered and thus doesn’t have computational power of its own. It’s the CSS that does the animation here and CSS is not a programming language, but a presentational language. Meaning, having something like this:

.slide1 { text-indent: -20em; }
.slide20 { text-indent: 0; }

...will not work. FACE cannot compute the steps between 1 and 20 for you: you need to write these out yourself. The same applies to color transitions or whatever you come up with for FACE.

One or the Other

A different problem you may be experiencing is FACE either not working, or canceling out another piece of JavaScript on your page. Depending on the order in which you include your multiple JavaScript files, FACE may or may not override any existing window.onload calls from other scripts.

FACE needs to initialize when the page loads, regardless of whether or not you’re using an onLoad animation or an onMouseOver one. The engine therefore uses window.onload in order to initialize itself — but if you already had functions assigned to window.onload from other scripts, it will be overwritten.

To combat this problem, we have the excellent solution provided by Simon Willison in the form of the addLoadEvent function. This function will allow you to add multiple function calls to window.onload without overwriting one another.

If you want to add the addLoadEvent function to FACE, all you have to do is go to the very end of the face.js file and look for this line of code:

window.onload = function () { face.pre("enhance"); }

You then add right above that line, the following code:

function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != ’function’) {
            window.onload = func;
      } else {
            window.onload = function() {
                  oldonload();
                  func();
            }
      }
}

Then go back to the line at the end that says "window.onload = ..." but now, change the entire line to this:

addLoadEvent( function () { face.pre("enhance"); } );

If you then make sure that you include the FACE JavaScript as the last file in your page, your previous script and your FACE animation will both run, one after the other.

Structural Problems

Something we can’t stress enough is that FACE is meant to be used in combination with CSS-based designs and semantic, clean markup. It is a modern technique that assumes an environment created by other modern web development techniques, such as a good separation of structure and presentation.

To get the most out of FACE, it is not just enough to have clean XHTML markup to work with — you need to also understand what you’re doing with the page’s innards and, perhaps more importantly, what FACE is doing with the page.

The FACE engine uses a system of classes and id’s on the element or elements that it is animating. Any previously existing class and id attributes will thus be overwritten by FACE, the moment the page has finished loading.

If you are using a FACE animation in combination with elements with an id or class of your own, it might be that your animation isn’t working because of this.

The dynamic of the FACE engine is relatively simple:

1. the "Self" method applies id- and class attributes to the element that calls FACE;
2. the "Child" method applies id- and class attributes to all direct child elements of the element that calls FACE, and not to any children’s child elements.

For this reason, FACE works very well with lists, because the containing element is the <ol>, <ul> or <dl> itself, which you can apply FACE to. That will give you all <li> (or <dt> or <dd>) items in the list to be animated.

And for the exact same reason, FACE does not work well with table-based layouts. When you use tables heavily, you are nesting very deeply and this unclean approach makes it much harder to use FACE.

Compare the two following examples:

<ul>
      <li>...</li>

      <li>...</li>
      <li>...</li>
</ul>

<table>
      <tr>

            <td>...</td>
            <td>...</td>
      </tr>
      <tr>
            <td>...</td>

            <td>...</td>
      </tr>
</table>

If you would want to animate the three list items, all you’d have to do is add a FACE animation to the <ul>, tell it to target Child elements, and you’re set.

To animate the table cells (<td>’s), you can’t even possibly use one single FACE animation, unless of course you want multiple cells to animate at the exact same time. Beyond that, you have much less freedom to animate the cells, because they are much more restrictive in nature.

Not Always Your Problem

Now, something to keep in mind is this: at the time of writing, FACE is still Beta software. It’s the very first ever release, even. We don’t know when a next release of FACE will be done, so we cannot estimate that it will be updated by the time this article is published.

Like with any other software in beta, there is a reasonable chance that there are still bugs in FACE that may be the cause of your animation not working. You may have tried out all solutions to problems listed above, and it still just won’t work — should that be the case, please report it to the creators of FACE, Faruk Ateº and Tim Hofman.

In my next — and last — article on FACE, I will be looking at other uses of FACE, as well as the future of FACE and where it can go.