Tutorial

The Polymath's DHTML Library
Home

Basics Importing Library

First you need to download the library here
You can import the library by following this example of a basic page.
<html>
<head>
<title>My Page</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
<Script>
Your code
</script>
</head>
<body>
</body>
</html>
Using Div's

A div is an HTML tag that is the basis for DHTML because it allows HTML to be manipulated. The basic structure looks like this:
<div id="name" style="property:value;property:value;exc..">
HTML CODE
</div>
Here are some common properties and possible values:

Properties Values

position "absolute"

left number

top number

z-index number

visibility "visible":"hidden"

width number

height number

background-color and layer-background-color hexadecimal number

clip "rect(top right bottom left)"

For example:
<div id="name" style="position:absolute;left:0;top:0;z-index:1;visibility:visible;width:100;height:100;background-color:#000000;layer-background-color:#000000;color:#FFFFFF;clip:rect(0 100 100 0)">
Hello Dynamic World
</div>

Detecting Browser

variable "ie" holds a value of true if the browser is Internet Explorer 4 or greater.
variable "n4" holds a value of true if the browser is Netscape 4 or greater.
This is very useful because the syntax for Netscape and IE is not the same for dhtml so you may need to use these variables.
For example:
if(ie){
alert("You're using atleast Internet Explorer 4")
}
if(n4){
alert("You're using atleast Netscape 4");
}
Go here for a listing of other useful variables
How To Use Objects

Objects are automatically declared when the page has finished loading. You can handle objects in three different ways. If a div's id was "a_div", then it can be handled by saying either:
div("a_div").some_Function()
a_divObj.some_Function()
or if the div was the first one on the page it can be handled like this
div(0).some_Function()
If the div was the second on the page, it would be div(1), 3rd div(2), 4th div(3) exc..
Here is an example:
<html>
<title>Using Objects</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
<body>
<a href="javascript:alert(div('box1').x())">div('box1').x()</a><BR>
<a href="javascript:alert(div(0).x())">div(0).x()</a><BR>
<a href="javascript:alert(box1Obj.x())">box1Obj.x()</a><BR>
<div id="box1" style="position:absolute;left:200;top:200;">
This is box1
</div>
</body>
</html>
The problem with objects being automatically declared is that the objects must be declared before anything else is run. This causes a minor problem because you can no longer say
<body onload="run_function()">
because run_function() will run before the objects are declared. To get around this, I have created the container loaded() which will run after the objects have been declared. Note that a page will still work even if you do not have this function.
Here's an example:
<html>
<head>
<title>Using the loaded() Container</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
<Script>
function loaded(){
alert("div1 is positioned at "+div("div1").x()+","+div("div1").y());
}
</script>
</head>
<body>
<div id="div1" style="position:absolute;left:44;top:55;">
Where am I?
</div>
</body>
</html>
Read more about Containers here

Functions How to assign and recall x, y, and z coordinates

x, y, and z are numerical values that can be assigned and recalled from divs. x corresponds to the distance from the left side of the browser window in pixels, y corresponds to the distance frome the top of the window in pixels and z refers to the z-index. Assign values like this:
div(0).x(x)
div(0).y(y)
div(0).z(z)
Recall values like this
x=div(0).x()
y=div(0).y()
z=div(0).z()
Here is an example how to recall and assign values:
<html>
<head>
<title>Assigning Corrdinates</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
<Script>
function move(){
var list=prompt("Where should i go from here?\rI'm currently at ("+div(0).x()+","+div(0).y()+","+div(0).z()+")","x,y,z");
vals=list.split(",")
div(0).x(vals[0])
div(0).y(vals[1])
div(0).z(vals[2])
}
</script>
</head>
<body>
<div id="div1" style="position:absolute;left:0;top:0;">
<a href="javascript:move()">Where should I go?</a>
</div>
</body>
</html>
If you want to save key strokes, you can use the function move() to assign both x and y corrdinates like this:
div(0).move(x,y)

Width and Height

Width and Height functions work the same way that x, y, and z work and also have a shortcut. You can recall values like this:
width=div(0).width()
height=div(0).height()
or assign values like this:
div(0).width(width)
div(0).height(height)
There is also a short cut for assigning both width and height at the same time like this:
div(0).resize(width,height)

Write Function

You can change the html of a div like this:
div(0).write("html")
Here is an example:
<html>
<head>
<title>Using the write() Function</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
<Script>
c=0;
d=0;
var text4="Isn't this better then a Java Applet?      "
function dis2(){
    div(0).write("<pre>"+text4+"</pre>")
    text4=text4.substring(1,text4.length)+text4.substring(0,1)
    window.setTimeout("dis2()","100");
}
function loaded(){
    dis2()
}
</script>
</head>
<body>
<div id="div1" style="position:absolute;left:100;top:0;">
</div>
</body>
</html>

Changing Visibility

The visibility of a div can be controlled in several different ways,
to hide a div, use
div(0).hide()
to show a div use
div(0).show()
to toggle between the two (meaning if the div is shown, make it hidden and vise versa) use
div(0).toggle()
to find out if a div is visible, use
div(0).shown()
this function will return true if it's visible and false if it's not.
Here is an example of all of these functions working at the same time:
<html>
<head>
<title>Changing visibility</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
</head>
<body>
<a href="javascript:div(0).show()">Make it appear</a><BR>
<a href="javascript:div(0).hide()">Make it disappear</a><BR>
<a href="javascript:div(0).toggle()">Change the visibility</a><BR>
<a href="javascript:alert((div(0).shown())?'Yes':'No')">Is it visible?</a><BR>
<div id="div1" style="position:absolute;left:100;top:0;">
Can you see me?
</div>
</body>
</html>

Background Color

Background color property can be assigned like this:
div(0).bgColor("color")
When assigning color values, they can either be hexadecimal like "#000000" (black) or you can use certain color's names that the browser understands. Here are some of the colors that the browser understands:

white

black

blue

red

yellow

lime

silver

fuchsia

green

teal

purple

olive

aqua

Here is an example of how to use the bgColor Property:
<html>
<head>
<title>Using the bgColor() Function</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
</head>
<body>
<a href="javascript:div(0).bgColor('red')">Change color to "red"</a><BR>
<a href="javascript:div(0).bgColor('blue')">Change color to "blue"</a><BR>
<a href="javascript:div(0).bgColor('#CCCCCC')">Change color to "#00CC00"</a><BR>
<a href="javascript:div(0).bgColor('#00FF00')">change color to "#00FF00"</a><BR>
<div id="div1" style="position:absolute;left:200;top:100;width:200;height:100;">
Change the background
</div>
</body>
</html>

Clip Function

Clipping is a way of hiding parts of a div. You can do this by assigning how much of the top, right, bottom, and left of a div is cliped. For example:

Clip properties can be assigned in this format:
div(0).clip(top,right,bottom,left)
and can be recalled like this:
clip=div(0).clip("side")
side can equal 't' for top, 'r' for right 'b' for bottom, or 'l' for left
Here is an example of clipping:
<html>
<head>
<title>Using clip() function</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
<Script>
function loaded(){
div(0).clip(0,0,0,0)
}
</script>
</head>
<body>
<A href="javascript:div(0).clip(42,85,57,0)">Hello World</a><BR>
<A href="javascript:div(0).clip(42,37,57,0)">Hello</a><BR>
<A href="javascript:div(0).clip(42,85,57,37)">World</a><BR>
<A href="javascript:div(0).clip(42,28,57,0)">Hell</a><BR>
<A href="javascript:alert(div(0).clip('t')+','+div(0).clip('r')+','+div(0).clip('b')+','+div(0).clip('l'))">Whats the clip?</a><BR>
<div id="div1" style="position:absolute;left:200;top:0;">
<table width=100 height=100 bgcolor="blue"><TR><TD align="top">
<font color="yellow">Hello World</font>
</td></tr>
</table>
</div>
</body>
</html>

Slide Function

This function will slide a div across the screen to an x and y corrdinate at a certain speed.How quickly it moves depends on how many pixels it moves per time in miliseconds.This function requires 5 values in order to run. The first two are the x and y corrdinate, followed by the pixel incerment, followed by the miliseconds, and the last value is the command you want to run after the slide is complete.
div(0).slide(x,y,incerment,ms delay,'command')
Here is an example:
<html>
<head>
<title>Using slide() Function</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
</head>
<body>
<form name="form1">
X<input type="text" size=3 name="x"><BR>
Y<input type="text" size=3 name="y"><BR>
Incerment<input type="text" size=3 value=10 name="incr"><BR>
Delay<input type="text" size=3 value=100 name="delay"><BR>
<input type="button" value="Slide the div!" onclick="div(0).slide(document.form1.x.value,document.form1.y.value,document.form1.incr.value,document.form1.delay.value,'alert(\'All Done\')')">
</form>
<div id="div1" style="position:absolute;left:200;top:100;width:200;height:100;">
Slide me
</div>
</body>
</html>
In addition, x, y, incerment, and ms delay can all be arrays instead of single values. This means that the div will move to several points and can move at different speeds to each point.
you can assign arrays as values like this:
xArray=new Array(10,20,30)
yArray=new Array(30,20,10)
div(0).slide(xArray,yArray,10,100,'');
or like this:
div(0).slide("10,20,30","30,20,10",10,100,'');
Here is an example of sliding to several points:
<html>
<head>
<title>Using slide() Function Part 2</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
<script>
function loaded(){
    xs=new Array(100,300,100,300);
    ys=new Array(0,100,200,300);
    incrs=new Array(20,15,10,5);
    div(0).slide(xs,ys,incrs,100,'div(0).write("I\'ll stop here")')
}
</script>
</head>
<body>
<div id="div1" style="position:absolute;left:0;top:0;width:200;height:100;">
I Don't know where to go!
</div>
</body>
</html>
To stop the div while it's moving, use:
div(0).slideStop()

moveto Function

To give you more flexability in moving objects, I created the funciton moveto which will move a div to an Array of points instead of sliding it. Arrays can be assigned the same way as in the slide() function. The basic syntax for moveto() is this:
div(0).moveto(xArray,yArray,milisecond delay,'command to run after move');
Here's an example:
<html>
<head>
<title>Using moveto() Function</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
<script>
function loaded(){
theta=0
xArray=new Array()
yArray=new Array()
speedArray=new Array()
for(r=0;r!=200;r+=2){
    theta=(theta!=360)?theta+.25:0;
    xArray[r]=Math.round(Math.cos(theta)*r)+div(0).x()
    yArray[r]=Math.round(Math.sin(theta)*r)+div(0).y()
    speedArray[r]=50-(r/4)
}
div(0).moveto(xArray,yArray,speedArray,'');
}
</script>
</head>
<body>
<div id="div1" style="position:absolute;left:300;top:300;width:200;height:100;">
I'm getting dizzy
</div>
</body>
</html>
To stop the div while moving use:
div(0).moveStop()

Wipe Function

This function is a way of gradually changing the clip on a div. This is the basic syntax:
div(0).wipe(top,right,bottom,left,speed,delay,'command')
top, right, bottom, and left are pretty self explainitory, but speed and delay are not. Speed means how many times the div will change clip between the starting clip and the ending one. Delay means the delay in miliseconds between each change in the clip. Command stands for the code that will run after the wipe is complete.To stop the wipe, use:
div(0).wipeStop()
The first 6 properties will also support Arrays much like the slide() function. Here is an example of the wipe function:
<html>
<head>
<title>Using the wipe() function</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
<Script>
function loaded(){
x=4
topes=new Array(0,0,(div(0).height()/2)-10,0,(div(0).height()/2)-1,(div(0).height()/2)-1)
rites=new Array(x,div(0).width(),(div(0).width()/2)+10,div(0).width(),null,0)
botes=new Array(div(0).height(),div(0).height(),(div(0).height()/2)+10,div(0).height(),(div(0).height()/2)+1,(div(0).height()/2)+1)
lefes=new Array(0,div(0).width()-x,(div(0).width()/2)-10,0,0,0)
ines=new Array(1,70,15,30,30,30)
div(0).wipe(topes,rites,botes,lefes,ines,0,'');
}
</script>
</head>
<body bgcolor="black">
<div id="stuff" style="position:absolute;left:200;top:0;">
<img src="blake.jpg">
</div>
</body>
</html>

Scrolling

Scrolling is a complex way of cliping and moving a div to make it look like you're scrolling down the div. To create this effect, I have created various functions that can be used to scroll.
The first is called scrollBuild which is how you define how big the box is that you want to scroll in. The basic syntax is this:
div(0).scrollBuild(width,height)
To actually scroll within this box, there are several different methods. The first is the scroll() method which will scroll to the x,y corrdinate in side of the div. The syntax looks like this:
div(0).scroll(x,y)
Say if you want to have buttons that will scroll up, down, left, and right when the mouse is over them. This can be done using these functions
div(0).scrollDown(incerment)
div(0).scrollUp(incerment)
div(0).scrollRight(incerment)
div(0).scrollLeft(incerment)
These functions will only start scrolling in those directions, in order to tell them when to stop use the scrollStop function. The syntax is:
div(0).scrollStop()
Here is an example of scrolling:
<html>
<head>
<title>Scrolling</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
<Script>
function loaded(){
div(0).scrollBuild(200,200)
}
</script>
</head>
<body>
<a href="#" onmouseover="div(0).scrollDown(5)" onmouseout="div(0).scrollStop()">Down</a><BR>
<a href="#" onmouseover="div(0).scrollUp(5)" onmouseout="div(0).scrollStop()">Up</a><BR>
<a href="#" onmouseover="div(0).scrollRight(5)" onmouseout="div(0).scrollStop()">Right</a><BR>
<a href="#" onmouseover="div(0).scrollLeft(5)" onmouseout="div(0).scrollStop()">Left</a><BR>
<a href="javascript:div(0).scroll(0,0)">Top</a><BR>
<div id="stuff" style="position:absolute;left:100;top:20;z-index:1;visibility:visible;">
<PRE>
Line 1)Here is some text to scroll with, it goes on and on and on and on
Line 1)Here is some text to scroll with, it goes on and on and on and on
Line 1)Here is some text to scroll with, it goes on and on and on and on
Line 2)Here is some text to scroll with, it goes on and on and on and on
Line 3)Here is some text to scroll with, it goes on and on and on and on
Line 4)Here is some text to scroll with, it goes on and on and on and on
Line 5)Here is some text to scroll with, it goes on and on and on and on
Line 6)Here is some text to scroll with, it goes on and on and on and on
Line 7)Here is some text to scroll with, it goes on and on and on and on
Line 8)Here is some text to scroll with, it goes on and on and on and on
Line 9)Here is some text to scroll with, it goes on and on and on and on
Line 10)Here is some text to scroll with, it goes on and on and on and on
Line 11)Here is some text to scroll with, it goes on and on and on and on
Line 12)Here is some text to scroll with, it goes on and on and on and on
Line 13)Here is some text to scroll with, it goes on and on and on and on
Line 14)Here is some text to scroll with, it goes on and on and on and on
Line 15)Here is some text to scroll with, it goes on and on and on and on
Line 16)Here is some text to scroll with, it goes on and on and on and on
Line 17)Here is some text to scroll with, it goes on and on and on and on
Line 18)Here is some text to scroll with, it goes on and on and on and on
Line 19)Here is some text to scroll with, it goes on and on and on and on
Line 20)Here is some text to scroll with, it goes on and on and on and on
</PRE>
</div>
</body>
</html>

Dragging

Dragging is the ability to click on a div and then drag it any where on the screen. This is easy to using my library. To make something dragable, use:
div(0).drag()
To stop the div's ability to drag, use:
div(0).dragStatic()
Here is an example:
<html>
<head>
<title>Dragging</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
</head>
<body>
<a href="javascript:div(0).drag()">Drag Green</a><BR>
<a href="javascript:div(1).drag()">Drag Blue</a><BR>
<a href="javascript:div(2).drag()">Drag red</a><BR>
<a href="javascript:div(2).dragStatic(2);div(1).dragStatic(1);div(0).dragStatic(0);">Stop draging</a><BR>
<div id="green" style="position:absolute;left:100;top:20;z-index:1">
<table width=100 height=100 bgcolor="green"><TR><TD> </TD></TR></table>
</div>
<div id="blue" style="position:absolute;left:150;top:70;z-index:2">
<table width=100 height=100 bgcolor="blue"><TR><TD> </TD></TR></table>
</div>
<div id="red" style="position:absolute;left:200;top:120;z-index:3">
<table width=100 height=100 bgcolor="red"><TR><TD> </TD></TR></table>
</div>
</body>
</html>

onTop Function

This function will tell you if one div is on top of and covering up part of another. Here is the syntax:
div("div1").onTop("div2")
If div1 is on top of div2, this function returns true otherwise it returns false. Here is an example:
<html>
<head>
<title>Using onTop() function</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
<Script>
counterDiv=0
function dragStop(name){
if(div(0).onTop(divlist[divlist.length-1])){
        div(divlist.length-1).bgColor("#C0C0C0")
        create("box"+counterDiv,"left:"+Math.round(Math.random()*(screenWidth-50))+";top:"+Math.round(Math.random()*(screenHeight-50))+";background-color:red","<table width=50 height=50><TR><TD></TD></tr></table>");
        counterDiv++
}
}
function loaded(){
        div(0).drag()
}
function slideAll(){
x=div(divlist.length-1).x()
y=div(divlist.length-1).y()
for(i=1;i!=divlist.length-1;i++){
        div(i).slide(x,y,10,0,'')
}
}
</script>
</head>
<body>
<div id="div1" style="position:absolute;left:300;top:0;background-color:green;layer-background-color:green;">
<table width=50 height=50><TR><TD></TD></tr></table>
</div>
<div id="box" style="position:absolute;left:500;top:0;background-color:red;layer-background-color:red;">
<table width=50 height=50><TR><TD></TD></tr></table>
</div>
Drag the green box to the red one.<BR>
Click here to <a href="javascript:slideAll()">reset.</a>
</body>
</html>
Loading Pages

To load an external html page into a div, use:
div(0).loadPage('url')
Here's an example:
<html>
<head>
<title>Loading pages</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
</head>
<body>
<a href="javascript:div(0).loadPage('text1.htm')">loadpage</a><BR>
<div id="pageLoader" style="position:absolute;left:100;top:20;width:200;heigh:200;z-index:1">
</div>
</body>
</html>

Containers What are Containers?
Containers are functions that run when some event occurs. For example, the function loaded() will run after the document has finished loading.
Here is the basic structure for containers
function event(props){
do something
}
Containers

Function	Event
loaded()	document is finished loading
mouseDown(x,y,"divName")	mouse button is pushed down
mouseMove(x,y,"divName")	cursor moves
mouseUp(x,y,"divName")	mouse button comes up
mouseOver("divName")	mouse goes over a div
mouseOut("divName")	mouse goes off a div
keyDown(Ascii value,"keyboard value")	key is pressed down
keyUp(Ascii value,"keyboard value")	key comes up
keyPress(Ascii value,"keyboard value")	key is press down and then comes up
dragging("div being draged")	div is being dragged
dragStart("div being draged")	div starts being dragged
dragStop("div being draged")	div stops being dragged
loadedPage()	external page is finished being loaded
scrolling("div name",x,y)	div is being scrolled

Here is an example of using some of the containers
<html>
<head>
<title>Using Containers</title>
<Script src="dhtml.lib" language="Javascript1.2"></script>
<Script>
running=false
counts=0
function mouseDown(x,y){
running=true
}
function mouseMove(x,y){
if(running){
        counts++
        create("dot"+counts,"left:"+x+";top:"+y+";background-color:black;z-index:10;","<table width=3 height=3 cellspacing=0 border=0 cellpadding=0><TR><TD></TD></TR></table>");
}
}
function mouseUp(x,y){
running=false
}
store=">>"
function keyPress(ascii,val){
if(ascii>31){
        store+=val
        div(0).write("<table width=50%><TR><TD>"+store+"<font color='green'>|</font></TD></tr></table>")
}
}
</script>
</head>
<body>
<div id="textBox" style="position:absolute;left:0;top:0;">
Drag the mouse around to draw pictures or you can start typing
</div>
</body>
</html>

Containing Divs

Contain Function

You can contain divs inside of other divs by using the contain() command like this:
div("divName").contain("innerDivName");
After running this command, when "divName" is moved, "innerDivName" will move along with "divName". Also, when "innerDivName" is moved inside of "divName", "innerDivName" sides will be cliped so that "innerDivName" never appears outside "divName".

To remove "innerDivName" from inside "divName", use:
div("divName").release("innerDivName");

Here are four examples of using the contain() command: 1,2,3,4

Extras Variables
When using this library, there are some variables that may be useful to you when designing a web page.

Variable	Value
ie	has a value of true if the browser is Internet Explorer 4.0 or higher and false if not
n4	has a value of true if the browser is Netscape 4.0 or higher and false if not
screenWidth	the width of the browser window
screenHeight	the height of the browser window
divlist	array of all the divs on the page
draglist	array of the divs that are dragable

Functions

Adding divs
The add function is a way of adding divs to the page. Here is the basic syntax:
create("id name","properties of the div","HTML inside of div")
For example:
create("newLayer","left:10;top:20;background-color:red;clip:rect(0 100 100 0)","Hello World")
Or see this example
Removing divs
To remove a div from the page, use:
div(0).remove()
This does not really remove the div from the page so don't think you can make a new div with the same id name as the one you removed.

Deleting values from arrays
This is a function that I always get use out of. The deleter function will search through an Array and delete a value from it. The syntax looks like this:
anArray=deleter(value,anArray)

Copyright � 1999

Properties	Values
position	"absolute"
left	number
top	number
z-index	number
visibility	"visible":"hidden"
width	number
height	number
background-color and layer-background-color	hexadecimal number
clip	"rect(top right bottom left)"

white
black
blue
red
yellow
lime
silver
fuchsia
green
teal
purple
olive
aqua