xLayer

Here is a quickly put together introduction to xLayer.

The file xLayer.js is a library of routines that will simplify cross browser Dynamic HTML. There are other cross browser libraries out there, most notable is DynAPII and also one at BrainJar.com. I am hoping to create this library from an object oriented point of view as a way of teaching myself the intricacies of cross browser DHTML. Hopefully when I am done you will be able to create objects of type xLayer and manipulate that object using methods defined on that object. The file xLayer.js is changing every time I write a new demo so, if you want to try and use it in your own scripts, you will need to keep checking back to get the latest version (it is still under development).

See the Download table for the latest version.

Here is a quick example of creating an xLayer and manipulating it.

var myLayer = new xLayer("Hello World");

myLayer.moveTo(200,480);
myLayer.show();

We can move this object by creating an animation function.

var x=200;
var y=480;
function ani()
{
    x = x + 10;
    if(x > 400)
        x=0;

    myLayer.moveTo(x, y);
    setTimeout("ani()", 30);
} 

Click here to start the animation.

Here is a TEST PAGE of the functions defined so far.
(It looks like I am going to have to write another manual :( some time in the future)

Download

Here are some Demos. Note: you can download and use these demo's but there is no guarantee that they are bug free, so use at your own risk.

To obtain the code
In IE - Right click on the link and choose "Save Target As..."
In NS - Right click on the link and choose "Save Link As..."

Library Code

You will need these files to run the demo's

Sprites

These demonstrate how to create various sprite-like animation's. Right click on the image to save it to your local computer.

Drag and Drop

These demonstrate how to create layers, click on them & then drag them.

Combining xLayer and animate2

Mouse Trailers

These demo's use xMouse.js to track the mouse cursor.

Event Handling

Here is a demo that uses the newly added event handling

Creating xLayer from DIV's

A Hierarchical Menu

(DO NOT ASK ME FOR ZIP FILES CONTAINING THESE DEMO'S. I don't have room on my site. ALL the source and any images used ARE downloadable by right clicking the links and using "Save As")

Do not expect too much from this page as I am extremely busy and have no idea how often it will be updated.