introduction

Bytefx is a fast, lightweight and crossbrowser library with some useful special effect for your web pages.

It is compatible with most common browsers and MemTronic compressed version size is less than 2Kb.

Bytefx is not a complete framework, as mootools or script.aculo.us are, it's just a low level effects library then its features are not advanced but probably useful to create more complex libraries too.

Finally, bytefx should be just what you need for your web pages, with a minimum overload and a good, fast and crossbrowser code.

history

  1. 2 November 2006 - bytefx V 0.4 New version 0.4 that includes a new scroll method (visit FAQ to view an example clicking on faq titles). Any bug fix for this version because bytefx seems to be probably bugless (then please read API before You send me any report, thank you).
  2. 5 October 2006 - bytefx V 0.3 Final This version has a better API (more linear than v0.2) and has a new drag method with optional callback during movement and optional object to lock coordinates. Look at the new API and sorry for these changes but I think is better to have a final version now that bytefx is so young (v 0.2 was good but something wasn't perfect). New Open Source file how contains method descriptions and now there are real private scrope methods too. New MemTronic compressed version is always less than 2Kb and new structure allows me to add future methods without big overload with compresed versions.
  3. 2 October 2006 new bytefx V 0.2 available. Fixed drag init and add return value on $event callback.

credits

Matteo Galli (aka Ratatuia) for Safari debug and Boyan Djumakov, for debug and reports.

examples

These links show only few bytefx features but I'm working to add better or more complete examples. Please stay tuned :-)

  1. first bytefx demo page a must to view quickly bytefx features (compatible with old browsers too)
  2. fake Opera buttons an unobtrusive way to skin your forms buttons using Opera style
  3. resizable container an unobtrusive way to create open / close containers
  4. presentation page an unobtrusive way to create a presentation page for this library (this page)
  5. basic accordion a basic accordion example, thanks to kentaromiura for this example.

f.a.q.

  1. What is bytefx browser compatibility list ? bytefx has been successfully tested withe these broesers: Internet Explorer 5.5+, FireFox 1+, Opera 9+, Safari 2+ and Khtml 3.6+ . With JSL help, bytefx should run in old browsers too but probably without some feature. Safari probably doesn't work with MemTronic compressor than please use bytefx packed version if You need Safari compatibility.
  2. What is bytefx license ? bytefx has a Mit style license. You can read more about Mit license inside bytefx Open Source javasript file.
  3. What is bytefx philosophy ? bytefx source code doesn't require short name parameters or methods because bytefx is designed to have best compression ratio with MemTronic, packer or other JavaScript compressors. In this way you can have a clean Open Source version with comments and use them if You think that bytefx should have some bug ( ... but final version shouldn't, I hope ;) ) and use where You want MemTronic or packer version. There's no reason, in my opinion, to prefere a big open source JS file when it's not used during development, that's why I can say that bytefx is one of the smallest JavaScript FX libraries on the net. Sure, compressed version, but why clients and servers should use more bytes ?
  4. Does bytefx modify something ? bytefx shouldn't modify any other script and respects custom events without override them. bytefx uses a global bytefx namespace to do everything but every used element will have a bytefx property variable. This variable is an object and will contain atleast 5 paramters: color, fade, move, size and drag. You can use this var to add properties or methods with each element but please don't overwrite these parameters.
  5. Does bytefx logo exist ? This is an anti pixel logo that You could show on your bytefx based pages

    powered by bytefx

P.S. I really don't know wich f.a.q. should be usefull then if you have some idea please contact me using this page.

api introduction

dollar '$' informations

To undesrtand better bytefx variables You could think that every *$* method is extra and that if dollar is the prefix, this method get or apply something while if dollar is the suffix, this method trasform something.

For example, color$ extra method trasform generic css hex color string into an array with RGB values while $color returns a normalized string from an Array.

size$ extra method trasform an element settings new size while $size returns the element size as object.

There is some extra variable or extra parameter that uses dollar as start point (prefix) or end point (suffix).

For example $width is a start element.width correction while width$ is the end element.width correction.

New 0.3 final drag function accept an object to lock movements then $x, for example, will be minimum x value while element is dragged and x$ will be maximum x value.

These methods or variables are descrived inside every method.

bytefx api

In every example is used an element variable. This variable is, for example, a document.getElementById("some-element") variable or a generic Element or Node.

alpha

Set element alpha (read notes). Accepts 2 parameters, element and opacity. opacity is an unsigned integer from 0 to 100.

// set alpha to 50
bytefx.alpha(element, 50);

Note 1: alpha filter or property is available with Internet Explorer 5.5+, Safari 2+, FireFox 1+, Opera 9+, Konqueror 3.6+ and maybe others new browser.

Note 2: if an element has not a fixed width or height, using for example css, this method should not be visible on Internet Explorer.

clear

Every transition has a dedicated interval. This method clears every interval.

Intervals list

  • color, color switching
  • fade, fading
  • move, moving element
  • size, resizeing element

You can clear all these intervals using this method in this way:

bytefx.clear(element);

Note 1: clear is usefull only if You have started some transition.

Note 2: if you want to stop only one kind of transition you can use this code:

var intervalName = "move"; // interval name
clearInterval(element.bytefx[intervalName]);

Note 3: bytefx 0.4 has a new interval called scroll. It's used to scroll the entire document and is a bytefx property. If you need to remove this interval You can do it in this way:

bytefx.clear(bytefx); // only if scroll has been used

// or you can do it in this way
if(bytefx.bytefx)
	clearInterval(bytefx.bytefx.scroll);

color

Creates a gradient color switcher using element.bytefx.color interval function. Accepts 5 or 6 parameters.

Parameters list

  • element, element to switch colors
  • style, type of style to change color ("background", "color", "backgroundColor", ...)
  • start, start hex color, 3 or 6 chars plus "#" prefix ("#93D", "#0178AF", ...)
  • end, end hex color, 3 or 6 chars plus "#" prefix ("#93D", "#0178AF", ...)
  • speed, unsigned short number, from 1 to 100 (big is faster)
  • callback, callback to call with element as scope on gradient complete
// example
bytefx.color(
	element,
	"background",
	"#FFF",
	"#ABDE01",
	2,
	function(){
		alert("color switched")
	}
);

Note 1: accepted colors must have "#" char prefix and should be 3 or 6 hex chars (OK: #012 or #A012Df)

drag

Makes element draggable and overwrite document.onmousedown and onmouseup temporally. Accepts 1 to 5 parameters.

Parameters list

  • element, element to make draggable
  • start, optional callback to call with element as scope on drag init
  • end, optional callback to call with element as scope on drag end
  • callback, optional callback to call with element as scope during drag
  • position, optional object with 4 properties: $x, $y, x$, y$. Each propery should be an Int32 or null but must be present. These properties are useful to close a drag space (horizontal, vertical or square drag).
// example
bytefx.drag(element,
	function(){
		// you can use element
		// or this (it's the same)
		element.innerHTML = "Drag Init"
	},
	function(){
		this.innerHTML = "Drag End"
	},
	function(){
		this.innerHTML = "Draging..."
	}
);

// vertical drag example (with x = 10)
bytefx.drag(element,
	null,
	null,
	null,
	{	// start horizontal point
		$x:10,
		// end horizontal point
		x$:10,
		// start vertical point
		$y:null,
		// end vertical point
		y$:null
	}
);

fade

Creates an alpha transition from one amount to other using element.bytefx.alpha interval function. Accepts 4 or 5 parameters.

Parameters list

  • element, element to fade
  • start, start alpha value, an unsigned short number, from 0 to 100
  • end, end alpha value, an unsigned short number, from 0 to 100
  • speed, unsigned short greater than 0 (1-100) or unsigned Float greater than 0 (0.1 - 100.0)
  • callback, callback to call with element as scope on fade complete
// example, element disappear
bytefx.fade(element, 100, 0, 2, function(){
	alert("now you can't see me")
});

Note 1: read alpha notes to know more about compatibility

move

Moves an element from its position to points x,y using element.bytefx.move interval function. Accepts 3 or 4 parameters.

Parameters list

  • element, element to move
  • position, an object with atleast 2 properties, x and y, used to set new position as left and top
  • speed, unsigned short greater than 0 (1-100) or unsigned Float greater than 0 (0.1 - 100.0)
  • callback, callback to call with element as scope on movement complete
// example, move element
// from its position to x 123 and y 234
bytefx.move(
	element,
	{x:123,y:234},
	1,
	function(){
		alert("moved")
	}
);

Note 1: when You move an element its style.position will be changed to absolute

position

Set element position. Accepts 2 parameters, the element and an object with 2 properties, x and y, used to set new position as left and top.

This method overwrite element.style.position as move does.

scroll

Scrolls entire document from its position to target element y coordinate.

It doesn't scroll single elements and its interval is created inside bytefx object.

Parameters list

  • element, target scroll element, the document will scroll to this element
  • speed, unsigned short greater than 0 (1-100) or unsigned Float greater than 0 (0.1 - 100.0)
  • callback, callback to call with element as scope on fade complete
// example, document scroll from 0 to element
bytefx.scroll(element, 2, function(){
	alert("Document scrolled from 0 to me: " + this)
});

Note 1: scroll only the entire document, not a single div (for example)

Note 2: only vertical scroll

size

Resizes an element using element.bytefx.size interval function. Accepts 3 or 4 parameters.

Parameters list

  • element, element to resize
  • size, an object with atleast 2 properties, width and height, used to set new size This object should have other 4 parameters too, useful to correct different browsers engines. IE shouldn't have problems but FireFox, Opera or Safari should render elements with padding or borders in a different way. Using corrective parameters you could remove thi issue. These properties are:
    • $width, corrective start width unsigned integer
    • width$, corrective end width unsigned integer
    • $height, corrective start height unsigned integer
    • height$, corrective end height unsigned integer
  • speed, unsigned short greater than 0 (1-100) or unsigned Float greater than 0 (0.1 - 100.0)
  • callback, callback to call with element as scope on resize complete
// example, resize element
// to width 200 and height 400
bytefx.size(
	element,
	{width:200,height:400},
	2,
	function(){
		alert("resized")
	}
);

Note 1: Since Internet Explorer is more popular than others but doesn't respect standards very well ... size object should have other 4 corrective parameters. These parameters are $width (start width), $height (start height), width$ (end width), height$ (end height) and should be used to correct padding or borders graphic problems during resize.

First demo example uses these corrective parameters to be viewed in the same way with IE and FireFox, Safari or Opera too.

bytefx extra api :: other bytefx methods

These methos are used from bytefx public and official methos but should be usefull for others script or libraries.

$color

Returns a normal css hex string with "#" prefix from an array with 3 unsigned integer values. Accepts just one parameter, an array with 3 indexes.

// examples
bytefx.$color([255,255,255]);	// "#FFFFFF"
bytefx.$color([0,0,0]);		// "#000000"
bytefx.$color([255,0,0]);	// "#FF0000"

color$

Trasform an hex string with "#" prefix into an array with [Red, Green, Blue] decimal values (from 0 to 255 for each color). Accepts just one parameter, a string with 3 or 6 hex values with "#" prefix.

// examples
bytefx.color$("#FFF");	// [255,255,255]
bytefx.color$("#000000");	// [0,0,0]
bytefx.color$("#FF0000");	// [255,0,0]

$event

Assign an event without overwrite old events using simple event names as "onmouseover", "onmouseout", "onclick" and others. Accepts 3 paramters, the element, the event name and the callback.

// example
bytefx.$event(
	element,
	"onclick",
	function(e){
		alert("click!")
	}
);

Note 1: this method isn't a complex addEventListener implementation than uses only genric events with "on" prefix.

$position

Returns an object with x and y keys and respective values that are the element position. Accepts just one parameter, the element.

// examples
var pos = bytefx.$position(element);
alert([pos.x, pos.y]);

$scroll

Returns an object with page x and y scroll coordinates.

// examples
bytefx.$scroll(); // {x:0, y:10}

$size

Returns an object with element width and height as properties. Accepts just one parameter, the element.

// examples
bytefx.$size(element);
// {width:123, height:456}

size$

Trasform an element setting a new size. Accepts 2 parameters, the element and object with 2 properties, width and height as pixel dimension.

// examples
bytefx.size$(element, {width:200, height:300});
// element will be 200px X 300px

download

These are versions 0.4 of bytefx library.

  1. Memtronic version (2.09 Kb) the smallest one, compatible with Memtronic compressor compatible browsers.
  2. Packer version (2.89 Kb) an alternative compressor that's probably more compatible than Memtronic.
  3. Open Source version (18.28 Kb) bytefx library source code with license and comments

This is an extra library to add compatibility with many old browsers

  1. JSL, JavaScript Standard Library (7.77 Kb) If you want the best compatibility you can use Packer version adding, before, this low-level JS 1.6 normalizer library.