EffectsCode.com logo

Smith TextArea Inline Replacement (STAIR)

Effectscode.com uses Smith TextArea Inline Replacement (STAIR), which is a technique for embedding Flash that allows for accessibility, browser compatibility and embedded xml structured configuration. It uses textarea elements to quote verbatim XML and replaces default content only when a browser has Flash enabled.

Overview

The replacement area is specified as an HTML div element, with a class name that matches the class name of the Flash class to be loaded. This div element contains two children that correspond to the Flash movie configuration and alternative HTML content to present to browsers that do not support Flash:

<div class="com.effectscode.Effect" style="width:400px; height:400px;">
<textarea class="effectscode" style="visibility:hidden;" rows="1" cols="20">
// <!-- Start XML - Edit configuration here:

This section can contain raw XML code.

// End XML -->
</textarea><div class="alternateContent">

This section can contain alternate content.

</div>
</div>

Embedded XML

XML configuration has many benefits over the traditional flashVars approach, as it allow for structured configuration data, such as layout patterns. The XML configuration is supplied within the value of an HTML textarea element, which is marked as hidden and so that it is never visible to the user. This allows the inclusion of arbitrary XML code, without extensive use of escape sequences, which are otherwise required. Lines starting with hash are comment lines and are ignored, so HTML comments can be included to ensure that the XML code does not interfere with the HTML DOM.

Alternative Content

Alternative content is placed within a div that is hidden only when the browser has Flash enabled. This means that ordinary HTML is accessible to users without Flash, users on mobile devies, users with handicaps and search engine robots. Inclusion of Javascript code provides the Flash check and replacement.

Compatibility

STAIR validates with the W3C Markup Validation Service. It has also been successfully tested on:

When Flash is not available then the alternative content is successfully shown.

© 2007 EffectsCode.com All rights reserved.