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.
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];
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.
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:
xmlhttp
- The XMLHttpRequest object.method
- 'GET' or 'POST'.url
- URL of the file you want.postdata
- If you use POST you can put in the post data here just like this: name1=val1&name2=val2
callback
- The function when the state changes.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.
dtjs.l(element)
- Left position.dtjs.t(element)
- Top position.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.
dtjs.sc()
- Returns the scrolling position in array.
[0]
- Left (X)[1]
- Top (Y)If you are making a program that fits the browser window, you can use this function.
dtjs.sz()
- Returns the viewport size.
[0]
- Width[1]
- HeightSets an element's opacity.
dtjs.o(element, opacity)
- Sets an element's opacity.
element
- The target element.opacity
- From 0 - 100You can add or remove events from an element like this:
dtjs.ae(element, eventname, funct)
- Adds event from element.dtjs.re(element, eventname, funct)
- Removes event from element.
element
- The element you want.eventname
- Event name, click, mousedown, keyup, and so on.funct
- What to do when event fires.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);
}
dtjs.a
- Creates an animation.
start
- Starting value.end
- Ending value.duration
- Duration in seconds.frame
- It will be called each frame, passing 2 arguments.
value
- The current value.finished
- True if the animation has finished on this frame. False otherwise.finished
- It will be called when animation finishes. It passes the same arguments as the frame function.easing
- The easing function to use:
null
- No easing, linear animation.dtjs.a.i
- Starts smoothly.dtjs.a.o
- Ends smoothly.dtjs.a.io
- Starts and ends smoothly.dtjs.a.si
- Starts smoothly (another algorithm).dtjs.a.so
- Ends smoothly (another algorithm).dtjs.a.sio
- Starts and ends smoothly (another algorithm).dtjs.a.e
- Elastic effect. The value can go through ending value.dtjs.a.b
- Bounce effect.dtjs.a.ioe
- Smooth elastic effect.stop()
- stops the current animation.getValue()
- get the current value of animation.isFinished()
- returns true if the animation has finished. false otherwise.Note: For 0.4.0 users must use the old function, dtjs.a.c
. It still can be used.
dtjs.a.c
- Creates an animation.
start
- Starting value.end
- Ending value.duration
- Duration in seconds.frame
- It will be called each frame, passing 2 arguments.
value
- The current value.finished
- True if the animation has finished on this frame. False otherwise.easing
- The easing function to use:
The color module can be used to make color effects.
Mosts functions needs an array of color code to be passed into.
dtjs.c.a(colorcode)
colorcode
- Color code. Color names aren't supported. There are 2 accepted forms:
#000000
rgb(0, 0, 0)
You can implement a rainbow by using this function.
dtjs.c.r(arrayhsv)
arrayhsv
- Array of hue, saturation and values.You can convert RGB back to HSV.
dtjs.c.h(arrayrgb)
arrayrgb
- Array of hue, saturation and values.You can use dtjs.c.f
function. It can be used with dtjs.a.c
when you want to make color fadin.
dtjs.c.f(array1, array2, fade)
array1
- Array of starting color.array2
- Array of ending color.fade
- Fading position from 0 to 1.for using with CSS.
dtjs.c.c(arrayrgb)
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.