Back to dt.in.th

DtJS - The animation library!

Notice: DtJS is moved to Google Code! Please look at http://code.google.com/p/dttvb-dtjs/ for the latest version.

You can download the current version here. It has only main, animation and color module.

The selectors module is removed. However you can use cssQuery instead.

Effects and batch modules are also removed. So you need to make your animations manually.

Current Version: 0.5.5 - Went to GPLv3

The combined version contains the main, animation and color module.

Selecting elements...

You can use DtJS with any frameworks. If it does not use $, dtjs will make a function called $ which will do what document.getElementById do.

So, I have this code.

<div id="hello">hello</div>

To refer to this element you can do like this:

var helloDiv = $('hello');

Or you can select by tags. The function $t will select it by tags.

var helloDiv = $t('div')[0];

Get Computed Style

New in 0.5.3, allows you to get computed style of an element.

For example, you want to get the computed color of an element, that means, the color after applying classes, styles, and anything that affects the appearance.

var mylink = $('thelink');
alert (dtjs.q(mylink).color);

And the following CSS:

#thelink:link {
    color: #0000ff;
}
#thelink:visited {
    color: #ff0000;
}

The function will returns rgb(0, 0, 255) if the link is unvisited, rgb(255, 0, 0) otherwise.

This function is very powerful if you want to animate the color of something. You can use it with dtjs.c.a.

XMLHttpRequest

To create an XMLHttpRequest object you can just do like this:

var xmlhttp = dtjs.xh();

You can then make requests like this:

function receive() {
    if (xmlhttp.readyState != 4) return;
    if (xmlhttp.status != 200) return;
    var data = xmlhttp.responseText;
    // Do whatever you want here.
}
dtjs.r (xmlhttp, 'GET', 'data.txt', '', receive);

The function dtjs.r takes 5 arguments:

Element Position Detection

If you want to know where an element is (from the top left corner of the document), the function dtjs.l and dtjs.t will do it.

This is very useful for making an animation on some elements that you don't know what position they are.

Scrolling Position Detection

IE uses document.body.scrollTop and document.documentElement.scrollTop and mozilla uses window.pageYOffset.

This function simplifies it and return an array containing the [X, Y] position.

Viewport Size Detection

If you are making a program that fits the browser window, you can use this function.

Opacity

Sets an element's opacity.

Events Handling

You can add or remove events from an element like this:

Animation Module

Creating an Animation

In dtjs, you need to keep track of everything, but dtjs is able to create and stop animations.

You specify the starting value, ending value, time, frame function, callback and easing function and dtjs will make an animation for you.

To create an animation you do like this:

var oldanimation = false;
function frame(value, finished) {
    document.title = 'Value is ' + value;
}
function finished(value, finished) {
    alert ('Finished!');
}
function makeanimation() {
    if (oldanimation) oldanimation.stop ();
    oldanimation = dtjs.a(0, 100, 2, frame, finished, null);
}

Note: For 0.4.0 users must use the old function, dtjs.a.c. It still can be used.

See the easing demo.

Color Module

The color module can be used to make color effects.

Convert Color Code to Array

Mosts functions needs an array of color code to be passed into.

Convert HSV to RGB

You can implement a rainbow by using this function.

You can convert RGB back to HSV.

Fadeing Between Colors

You can use dtjs.c.f function. It can be used with dtjs.a.c when you want to make color fadin.

Converting the Color Array Back to Color Code.

for using with CSS.

For example

dtjs.c.c(dtjs.c.f(dtjs.c.a('#ff0000'), dtjs.c.a('#0000ff'), 0.5))

Would return the color code between red and blue color.

See my home page for a combined examples.