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();
Click here to create this object.

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

File Description
xLayer Version 1.11 : Fixed getWidth() for IE4.
Version 1.10 : Fixed getWidth() and getHeight() so that xMenu works correctly.
Version 1.9 : 2001-01-16 : Fixed a bug in the event handling that only affected I.E.4.0.
Version 1.8 : 2000-11-19 : Changed the event handling. An event object is now passed to the added event handler function.
xBrowser Version 1.2 : 2000-07-15 : Made compatible with NS6
xMouse Version 1.3 : 2001-09-03 : Updated so it will work in I.E.6.
Version 1.2 : 2000-10-14 : Updated so it will work in I.E.5.0+. All the Mouse Trailers should now be fixed.

 

Sprites

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

Demo Requirements Description
balls1.html

balls1.js

xLayer.js
xBrowser.js

This demonstrates the dynamic creation of layers. Click on the link to add a ball. My Pentium 233 can only handle 20. My PIII 700 can handle 200!
balls2.html balls2.js
xLayer.js
xBrowser.js
Just a demo with 20 balls bouncing round the screen. When they hit the side they bounce back at a random speed
balls3.html balls3.js
xLayer.js
xBrowser.js
A combination of the above 2. The balls all start out with the same speed but the first rebound will randomize the trajectory.
balls4.html balls4.js
xLayer.js
xBrowser.js
This demo is influenced by a "snow" demo I saw. It is supposed to simulate objects falling slowly down the screen
snow.html snow.zip Ok, this demo IS snow falling. It is an adaptation of the balls4 script using snowflake images.
eel.html

eel.js
xLayer.js
xBrowser.js
ball0.gif
ball1.gif
ball2.gif
ball3.gif
ball4.gif

This started out as an experiment in changing the direction of a ball using different acceleration methods. This is how it turned out.
trail.html

trail.js
xLayer.js
xMouse.js

Uses the same images as above but tracks the cursor.
fireworks.html

xLayer.js
xBrowser.js
fireworks.js
fw0.gif
fw1.gif
fw2.gif
fw3.gif
fw4.gif
fw5.gif
fw6.gif
fw7.gif
fw8.gif
fw9.gif
fw10.gif
fw11.gif
fw12.gif
fw13.gif
fw14.gif
fw15.gif
fw16.gif
fw17.gif
fw18.gif
fw19.gif

Converted the firework demo to xLayer so now it works in NS6.
fireworks2.html Replace fireworks.js above with fireworks2.js Another fireworks demo. In this one the fireworks are launched from the ground up.

Drag and Drop

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

Demo Requirements Description
dragdrop.html dragdrop.js
xLayer.js
This implements Drag & drop using xLayer only. Sometimes if you move the mouse too fast the image stops dragging.

 

Combining xLayer and animate2

Demo Requirements Description
plane.html animate2.js
xLayer.js
An example of what can be achieved in DHTML. (Games next!)

 

Mouse Trailers

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

Demo Requirements Description
circle.html circle.js
xLayer.js
xMouse.js
A rotating circle of dot's tracks the mouse cursor. You can change the dots to any character. E.G.
trailer("oooooooooo'); will change them to "o".
textFlag1.html flagtext.js
xLayer.js
xMouse.js
This is my version of a script I saw on javascript.com. My version has more configuration parameters so you can have a different trailer on each page.
textFlag(theText, theColor, theFont, theFontSize, track)
textFlag2.html

flagtext.js
xLayer.js
xMouse.js

The track parameter can be set to 1 or 0. In this case it is set to 1 so it tracks the cursor.
textFlag3.html flagtext.js
xLayer.js
xMouse.js
Here the track parameter is set to 0 so it "Hunts" the cursor
pinwheel.html pinwheel.js
xLayer.js
xMouse.js
This simulates a pinwheel firework following the mouse. Uses 20 layers
pinwheel2.html pinwheel2.js
xLayer.js
xMouse.js
This starts off the same as the above demo but if you click on the links you get different pinwheels.
Warning! This demo creates up to 180! layers so you must have a fairly fast PC.

springy1.html
springy2.html
springy3.html

textspring1.html
textspring2.html
textspring3.html

spring.js


xLayer.js
xMouse.js

This is the xLayer version of the Elastic Bullets script by Philip Winston. I have re-written Philips script to use xLayer. Credit goes to Philip for writing the original script. I have contacted Philip and he is OK with me providing this version of his original script.
santaspring.html santaspring.js Just can't stop playing with the springy!

Event Handling

Here is a demo that uses the newly added event handling

Demo Requirements Description
navbuddy.html

navbuddy.js
xLayer.js
xMouse.js


This is an experiment for a unique navigation aid. The little sprite tracks your mouse and when you move over he splits apart and a navigation menu unfolds.

It looks a bit plain at the moment but I have some better graphics in mind.

This now works in NS6 due to the fact that xLayer and xMouse have been modified to work in NS6.

navbuddy.html Too many to list This is a finished demo using 'nice' graphics. I will not be working any more on this project.

Creating xLayer from DIV's

Demo Requirements Description
simplemenu.html staticMenu.js
xLayer.js
xBrowser.js
This demo uses the new feature of xLayer "xLayerFromObj()" that allows you to create an xLayer from a pre-formated positional DIV. Using staticMenu.js and the code in simplemenu.html you can create a floating menu that is always visible on the page.
floatmenu1.html

staticMenu.js
xLayer.js
xBrowser.js
animate2.js

This example was going to use rollovers to show how complex the "DIV" can be but as I prefer animated rollovers I decided to created a floating menu with animated rollovers
floatmenu2.html staticMenu.js
xLayer.js
xBrowser.js
animate2.js
Another demo to show how complex you can make the floating menu. Here I simply took the menu from one of the interface pages (Tecno), placed it into a DIV and then used the new function xLayerFromObj() to turn it into a floating menu.

A Hierarchical Menu

Demo Requirements Description
menutest.html
menutest2.html

xMenu.js
mymenu.js
mymenu2.js
xmenu.gif
xLayer.js

I wrote xMenu and mymenu.js one rainy sunday afternoon. It is based on my knowledge of Java Swing and I tried to mimic a way of creating menus like the JMenuBar, JMenu and JMenuItem of swing. They have similar methods xMenuBar.add(new xMenu("File")) and xMenu.add(new xMenuItem("open") etc...
I got it working but it felt to much like "real" work. There is a lot thet needs to change to allow better customization and as there are other menus out there I have decided (for now) now to work on this any more.

 

 

(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.