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";
};
The web site for the project is, appropriately, 
