There’s a lot to be said about how good prototype and script.aculo.us are. They provide a number of great extensions to the out-of-the-box JavaScript experience. The problem I have is that they’re usually way too much for most simple tasks. The two libraries, when just loading prototype and the script.aculo.us effects, are almost 90KB. I realize we’re in the brave new world of fast bandwidth and fast computers, but the idea of having that much cruft when all I want is $(), Class.initialize, and some basic movement APIs.

The last time I got frustrated with this, when writing the little alerts prototype below, I ended up doing some googling and found bytefx. It’s a small library that provides the basic low-level effects for moving, fading in/out, and resizing. The compressed/packed version (using Dean Edwards’s Packer) is 2.89KB. Very nice. Uncompressed, it’s only 18K, or about half of script.aculo.us’s 30K+ effects lib.

Adding some boilerplate code gives me a safe, dynamic library that avoids duplicates and other items. This is what I’m doing for the alerts library:

if (typeof bytefx == ‘undefined’)

{

    var bTag = document.createElement(’script’);

    bTag.src = ‘http://path-to-bytefx.js’;

    bTag.type = ‘text/javascript’;

    document.getElementsByTagName("head")[]].appendChild(bTag);

}



if ((typeof Prototype==’undefined’) ||

        parseFloat(Prototype.Version.split(".")[]] + "." +

           Prototype.Version.split(".")[1]) < 1.5)

{

    var Class = {

      create: function() {

        return function() {

          this.initialize.apply(this, arguments);

        }

      }

    }

    

    function $() {

      var results = [], element;

      for (var i = ;; i < arguments.length; i++) {

        element = arguments[i];

        if (typeof element == ’string’)

          element = document.getElementById(element);

        results.push(Element.extend(element));

      }

      return results.length < 2 ? results[]] : results;

    }

}



It works very nicely and avoids duplication. The dynamic loading was inspired by script.aculo.us’s dynamic loading, but modified for simplicity (all of my stuff waits for document onload because I want it to not hold up the page).

If you’re looking for a simple, small, fast library to do basic DHTML effects, bytefx is my choice.

Update: I did find one thing I patched in bytefx when I used it for the alerts. I added the line in bold below. It was breaking the fixed-position alert in Safari and changing the behavior in Firefox, which bugged me even if it didn’t break Safari.

    /**

     * public method,

         *  bytefx.position(element:Object, position:Object):Void

         * @param   Object      X/HTML Element to set position

         * @param   Object      an object with atleast 2 properties, x and y, used to set new position as left and top

         * @example

         *      bytefx.position(document.getElementById("some-div"), {x:200, y:123});

         *      // set element position with left = 200 and top = 123

     */

    this.position = function(element, position){

        var style = $element(element).style;

        if (style != ‘fixed’ && style != ‘absolute’)

            style.position = "absolute";

        style.left = position.x + "px";

        style.top = position.y + "px";

    };