1. Move div without limits

JAVASCRIPT and
DYNAMIC CONTENT
1. Move Div Without Limits

Many of you have probably seen those neat javascripts that can add cool stuff to your pages but couldn't understand how to use them. What I would like to do here is give some examples of easy scripts and some hopefully simple instructions to go with them. With a little practice these scripts can be used as chunks of code that can be ccp to your own pages. The result being that you can make your own scripts (-: sounds fun eh..

Like HTML,Javascript follows rules. The script is ALWAYS contained within the <script> </script> tag. Javascript should not contain extraneous white spaces and if the punctuation is not perfect; it will not work. Therefore ALWAYS keep the original in case you need to begin again.

Javascripts are almost always several parts. For our first script we will use four buttons to move an object in four directions. There are three parts to this script.

Part One:
This part goes in the head of your page. It defines what "functions" the script will perform. It defines how far it will go and what direction it will go.

REMEMBER: Everything is relative to the 0x0 upper left coordinate.
Moving to the right is always a plus value. Moving down is also a plus value.
Moving to the left is minus as is moving up.
Button number one will move our square to the left 5 pixels with each click. This says, "Move my square 5 pixels closer to the left side from where it is now".

function moveL() { document.all.table1.style.posLeft -=5 }

Button number two will move our square 5 pixels to the right with each click. Why does it say posLeft if the square is moving right?? Because when we position anything we always use the 0x0 default left. So this says..."Move my square five more pixels from the left than it is now".

function moveR() { document.all.table1.style.posLeft +=5 }

The third button will move our square down five pixels with each click. We use the default top so this says "Move my square five more pixels from the top than it is now".

function moveD() { document.all.table1.style.posTop +=5 }

The fourth button will move our square up five pixels with each click. Using the default top this says. "Move my square five pixels closer to the top than it is now".

function moveU() { document.all.table1.style.posTop -=5 }

Part Two:
This part of the script also goes in the head. It sets the starting position for whatever will perform the function. It is enclosed in <style> </style> tags. This is position CSS. Our Table has been set at 180 left and 1250 top as the starting position.

Part Three:
This is the "div" or the thing you want to move. In this case a red square. It is enclosed in the div tags just like css.<div> </div> tags

Here is the code for your first Javascript.

<html><head><title>JavaScript 1</title><script language="JavaScript">

function moveL() { 
document.all.table1.style.posLeft -=5
}

function moveR() { 
document.all.table1.style.posLeft +=5
}

function moveD() { 
document.all.table1.style.posTop +=5
}

function moveUP() { 
document.all.table1.style.posTop -=5
}

</script> 
<style> 
#table1 {position:absolute; top:200; left:180;}
</style>
</head>
<body bgcolor=ffffcc text=beige fontsize=medium link=gold alink=gold vlink=gold><div align="center"><br><br><br>
<table cellspacing=0 cellpadding=5 border=0 width=80% height=80>
<tr><td width=50>
<form>
<input type="button" borderimage="file://rom/borders/buttonborder4
.bif" text=white value="L" onClick=moveL()> 
</form></td>
<td width=50>
<form>
<input type="button" borderimage="file://rom/borders/buttonborder4
.bif" text=white value="R" onClick=moveR()> 
</form></td>
<td width=50>

To make the table go diagonal you add the top function to the left and right. And the left to the up and down. So each now has two lines that together perform the function. The following will move the square up 5 pixels and to the left 5 pixels at the same time....

function moveUL() {
document.all.table1.style.posLeft -=5
document.all.table1.style.posTop -=5
}

Keep in mind it is always in relation to the left and top.

<html><head><title>JavaScript 2</title>
<script> 
function moveUL() { 
document.all.table1.style.posLeft -=5
document.all.table1.style.posTop -=5
}
function moveUR() { 
document.all.table1.style.posLeft +=5
document.all.table1.style.posTop -=5
}
function moveDL() { 
document.all.table1.style.posLeft -=5
document.all.table1.style.posTop +=5
}
function moveDR() { 
document.all.table1.style.posLeft +=5
document.all.table1.style.posTop +=5
}
</script> 
<style> 
#table1 {position:absolute; top:200; left:180;}
</style>
</head>

JS Lessons by Ken
1. Move div without limits
1. txt page ~ ~ ~ 1. c/c/p codes

2. Move div with limits
2. txt page ~ ~ ~ 2. c/c/p codes

3. Using a single function for multiple actions
3. txt page ~ ~ ~ 3. c/c/p codes

4. Repositioning using the else command
4. txt page ~ ~ ~ 4. c/c/p codes

5. Intro to the setTimeout. Using it to scroll a div
5. txt page ~ ~ ~ 5. c/c/p codes

6. DHTML
6. txt page ~ ~ ~ 6. c/c/p codes

7. More DHTML
7. txt page ~ ~ ~ 7. c/c/p codes

8. Visibility
8. txt page ~ ~ ~ 8. s/s/p codes

Tandem Tooters Paulie's Interface NG