DHTML Example
This is just a short tute to help you figure out how to use this 5 object dhtml code.In this tute I`ll first give you "Jawjahboy" code for moving 5 objects within a dhtml code and below the code I`ll give an explanation on what each part of the code does.This is a 2.6, 2.7, 2.8 & 2.9 friendly script.
5 OBJECT DHTML CODE
----------------------------------------------------------
<html><head><title>5 MOVES</title>
<script>
function bgn() {
document.all.one.style.posTop=-500;
document.all.two.style.posTop=-400;
document.all.three.style.posTop=-400;
document.all.four.style.posTop=-400;
document.all.five.style.posTop=-400;
if (document.all.one.style.posTop==-500 &&
document.all.two.style.posTop==-400 &&
document.all.three.style.posTop==-400 &&
document.all.four.style.posTop==-400 &&
document.all.five.style.posTop==-400) {
move1()}
}
function move1() {
document.all.one.style.posTop += 3;
if (document.all.one.style.posTop < 130) {
setTimeout("move1()", 50); }
else { setTimeout("move2()", 200); }
}
function move2() {
document.all.two.style.posTop += 10;
if (document.all.two.style.posTop < 130) {
setTimeout("move2()", 50); }
else { setTimeout("move3()", 200); }
}
function move3() {
document.all.three.style.posTop += 10;
if (document.all.three.style.posTop < 260) {
setTimeout("move3()", 50); }
else { setTimeout("move4()", 200); }
}
function move4() {
document.all.four.style.posTop += 10;
if (document.all.four.style.posTop < 130) {
setTimeout("move4()", 50); }
else { setTimeout("move5()", 200); }
}
function move5() {
document.all.five.style.posTop += 10;
if (document.all.five.style.posTop < 0) {
setTimeout("move5()", 50); }
}
</script>
<style type="text/css">
#one { position:absolute; z-index:1; left:0; }
#two { position:absolute; z-index:1; left:420; }
#three { position:absolute; z-index:1; left:215; }
#four { position:absolute; z-index:1; left:215; }
#five { position:absolute; z-index:1; left:215; }
</style>
</head>
<body bgcolor="#000000" text="white" onLoad="bgn()">
<noframes><center><spacer type="block" height="200">
<br />
<font color="red" size="7">WebTV Bug!!<br />
RELOAD PAGE
</font></center></noframes>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<div id="four">
</div>
<div id="five">
</div>
<body bgsound=""loop="?">
</body></html>
Explanation of coding elements
1st part
----------------------------------------------------------
This first part is the header,
it puts the title of your work into the status bar.
<html><head><title>Name of your DHTML ARTWORK
</title>
2nd part of code
----------------------------------------------------------
<script>
function bgn() {
document.all.one.style.posTop=-500;
document.all.two.style.posTop=-400;
document.all.three.style.posTop=-400;
document.all.four.style.posTop=-400;
document.all.five.style.posTop=-400;
if (document.all.one.style.posTop==-500 &&
document.all.two.style.posTop==-400 &&
document.all.three.style.posTop==-400 &&
document.all.four.style.posTop==-400 &&
document.all.five.style.posTop==-400) {
move1()}
The above code tells the browser to hide the object/graphic above the top of the page,
you need to use the same number on both posTop tags for each object/graphic.
(document.all.one.style.posTop=-500;
(document.all.one.style.posTop==-500 &&
This is telling your browser to put the first object/graphic -500 pixels above the page.You`ll notice that there`s a posTop position for all five of your objects/graphics (one-five).If you have a graphic that is 400 pixels in height then you want to set the posTop to something higher then -400 pixels so that the object/graphic isn`t seen when you first open the DHTML webpage.
I noticed on a different script that I was using if I put an object at a number lower then -400 the object wouldn`t be hidden on the opening of the page on a 2.7 screen,I`m not sure if that holds true with this code.TableMaster states he uses -400 & -500 for all of his scripts which is good enough for me.At the 2.9.1 upgrade I had to hide the first object at -500 in order for it not to show upon opening the page.
3rd part of code
----------------------------------------------------------
function move1() {
document.all.one.style.posTop += 3;
if (document.all.one.style.posTop < 130) {
setTimeout("move1()", 50); }
else { setTimeout("move2()", 200); }
The posTop += 3; part of this code is telling the object/graphic how fast to move down from the top of the page.The higher the number the faster the object/graphic will move.
posTop += 3 is slow speed
posTop += 5 is medium speed
posTop += 10 is fast speed
---------------------------------------------------
if (document.all.one.style.posTop < 130) {
This tells the objects/graphics how far from the top of the page to stop it`s descent. The higher the postTop number the lower the object/graphic would be on your screen.The top of the page starts at 0 and the bottom of the page is 400.You`ll see in the "5 Object Code" that there`s a place to change the speed for each object/graphic and a place to change the distance from the top that the object/graphic will stop.
---------------------------------------------------
setTimeout("move1()", 50); }
The "50" in this part of the code is telling the object/image how long to delay before starting it`s movement downwards.Make the number smaller and the objects/images will appear on screen sooner and make the number larger and the object/images will take longer to appear on screen.
---------------------------------------------------
else { setTimeout("move2()", 200); }
I haven`t been able to figure out what the "200" does in this part of the code.
4th part of code
----------------------------------------------------------
<style type="text/css">
#one { position:absolute; z-index:1; left:0; }
#two { position:absolute; z-index:1; left:420; }
#three { position:absolute; z-index:1; left:215; }
#four { position:absolute; z-index:1; left:215; }
#five { position:absolute; z-index:1; left:215; }
</style>
The above part of the code is giving the position of each object/graphic from the left side of the page.The higher the left number is the further it is from the left side.
5th part of code
----------------------------------------------------------
</head><body bgcolor="#000000" text="#ffffff" onLoad="bgn()">
This part of the code is for the color of the webpage and it starts the movement of your objects/graphics.
6th part of code
----------------------------------------------------------
<noframes><center><spacer type="block" height="135">
<font color="red" size="7">WebTV Bug!!
<br />RELOAD PAGE
</font></center></noframes>
The above code is the WEBTV BUG ALERT coding,you can change the color,size and wording of this code.
7th part of code
--------------------------------------------------------
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<div id="four">
</div>
<div id="five">
</div>
</body></html>
The above part of the coding is the easy part of the code,you add your object/graphics in between the opening and closing of each of these divisions
the opening
<div id="one">
and the closing
</div>
You add your objects/graphics the same way as you would in a regular sig code,so if you have a graphic you would add it this way
<div id="one">
<img src="http://of graphic" width="?" height="?" alt="?" />
</div>
or if you have a table code you want to add it this way
<div id="two">
<table><tr><td>
the rest of the table coding
</td></tr></table>
</div>
or if you have an audioscope you want to add it this way
<div id="three">
<audioscope--the rest of the coding
</div>
8th part of code
-------------------------------------------------------
<bgsound src="http://nquale.com/tutes/dhtml/riders.mid" loop="99">
The above is just what it looks like--the music coding
--------------------------------------------------------
I`ve made up a sample DHTML page
DHTML SampleThe code for the sample page is below in the white textarea box,CC&P it and take it to one of these testbed.
http://d21c.com/jawjahboy/a/bodacious-test-bed.html
or
http://www.geocities.com/alma34743/TESTBED2.htmlplay around with it--change the numbers and see what happens
Here`s TableMaster`s DHTML Tutorial
TableMaster`s Tute
Here`s Jawjahboy`s DHTML Tutorial
Jawjahboy tutorial & dhtml scripts