moving elements

just wanted to make this to understand javascript a little better...

[John_Keates]

I want to make a javascript to handle sliding effects and moving stuff around, but not just the functionality but programming it myself.

Should do:

- Move up, down, left, right
- Move on the x and y axises simultaniously
- Have a speed setting (time)
- Move only on y or x or both

This is what I've come up with:

//Variables

//this one is for the list of javascript-positioned items
var elementid
var poslist = new Array()
var timerprocess1;
var timerprocess2;
var timerprocess3;
var newx;
var newy;
var relativex;
var relativey;
var currenty;
var currentx;
var resultx ;
var resulty ;
var xyratio ;
var x;
var y;
var elementid;
var time;
var intx;
var inty;
var xtime;
var timex;
var ytime;
var timey;
var loopkiller = "no";
var xdone = "no";
var ydone = "no";

//Set the position for an item
function setpos(x, y, elementid){
document.getElementById(elementid).style.top = y + "px"
document.getElementById(elementid).style.left = x + "px"

}
//only x-axis
function setposx(x, elementid){
document.getElementById(elementid).style.left = x + "px"
poslist[elementid] = new Array(document.getElementById(elementid).style.top.replace('px', ''), document.getElementById(elementid).style.left.replace('px', ''))
}
//only y-axis
function setposy(y, elementid){
document.getElementById(elementid).style.top = y + "px"
poslist[elementid] = new Array(document.getElementById(elementid).style.top.replace('px', ''), document.getElementById(elementid).style.left.replace('px', ''))
}

//Set the absolute parameter required to do some moving
function setabsolute(elementid){
document.getElementById(elementid).style.position = "absolute"
}
//convert a number to 0 decimals and positive
function convert2time(number){
if(parseInt(number) < 0.1){
//number is negative
number = number * parseInt(-1)
}
return Math.round(number*10)/10
}

//The relative next step

//X:
function relativex(x, elementid){
return parseInt(document.getElementById(elementid).style.left.replace('px', '')) + parseInt(x)

}

//Y:
function relativey(y, elementid){
return parseInt(document.getElementById(elementid).style.top.replace('px', '')) + parseInt(y)

}

//Stop the autoloop when done - lazy coding
function timerkill(pid){
window.clearInterval(pid)
}

//Walk on the X-Axis

function xwalk(destx, elementid){
//empty
}

//Walk on the Y-Axis
function xwalk(desty, elementid){
//empty
}

//Walk to coordinates
function xywalk(x, y, elementid){
elementid = elementid
//Calculate relative path [X±, Y±]
currenty = document.getElementById(elementid).style.top
currentx = document.getElementById(elementid).style.left
resultx = parseInt(x) - parseInt(currentx)
resulty = parseInt(y) - parseInt(currenty)
xyratio = convert2time(parseInt(resultx) / parseInt(resulty))
//hardcoded speed
time = 400
//Set system

if(resultx > resulty){
//X is the master
xtime = time
//no floating in milliseconds
ytime = Math.round(xtime * xyratio)
}else if(resultx < resulty){
//Y is the master
ytime = time
//no floating in milliseconds
xtime = Math.round(ytime * xyratio)
}

//What way to to go?
if(parseInt(resultx) < parseFloat(0)){
//left
intx = -1
}else{
//right
intx = 1
}
if(parseInt(resulty) < parseFloat(0)){
//up
inty = -1
}else{
//down
inty = 1

}

//Start timer

function x(){
document.getElementById(elementid).style.left = parseInt(document.getElementById(elementid).style.left.replace('px', '')) + intx + "px"
}

function y(){
document.getElementById(elementid).style.top = parseInt(document.getElementById(elementid).style.yop.replace('px', '')) + inty + "px"
}

function looptester(){
if(document.getElementById(elementid).style.left == x){
xdone = "yes"
//Kill if target was reached
timerkill(timerprocess1)
}
if(document.getElementById(elementid).style.top == y){
ydone = "yes"
//Kill if target was reached
timerkill(timerprocess2)
}
if(ydone == "yes" && xdone == "yes"){
//End the loop when both targets are reached
loopkiller == "yes"
timerkill(timerprocess3)
}
}
//Process manager
timerprocess3 = window.setInterval('looptester()', time / 10)
// X-axis
timerprocess1 = window.setInterval('x()', xtime)
// Y-axis
timerprocess2 = window.setInterval('y()', ytime)

//debug - id's match specific tablefields in the html file
document.getElementById('currentx').innerHTML = currentx
document.getElementById('currenty').innerHTML = currenty
document.getElementById('newx').innerHTML = x
document.getElementById('newy').innerHTML = y
document.getElementById('relativex').innerHTML = resultx
document.getElementById('relativey').innerHTML = resulty
document.getElementById('ratio').innerHTML = xyratio
document.getElementById('time').innerHTML = time
document.getElementById('xtime').innerHTML = xtime
document.getElementById('ytime').innerHTML = ytime
document.getElementById('xint').innerHTML = intx
document.getElementById('yint').innerHTML = inty
}

//test [debug]
xywalk(50, 50, 'div1')

It's not the best code... I know but I'm still learning but don't get why some things do not work.
I know xhtml strict, php 5, css1/2/3 and sql but never got into javascript... so things like globalizing, objects and functions in javascript seem a little strange to me. I'd appreciate if someone had a look at it and tell me why I get:

Error: looptester is not defined

that's what firefox tells me, safari just says TypeError

and some tips at creating the javascript to do this would be nice too...

the (ugly) html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Walker</title>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
font-family: arial;
}
</style>
</head><body>
<table>
<tr>
<td>Current X</td><td>Current Y</td><td>New X</td><td>New Y</td><td>Relative X</td><td>Relative Y</td><td>Ratio</td><td>Time</td><td>xtime</td><td>ytime</td><td>xint</td><td>yint</td></tr><tr>
<td id="currentx"></td><td id="currenty"></td><td id="newx"></td><td id="newy"></td><td id="relativex"></td><td id="relativey"></td><td id="ratio"></td><td id="time"></td><td id="xtime"></td><td id="ytime"></td>
<td id="xint"></td><td id="yint"></td></tr>
</table>

<div id="div1" style="width: 375px; height: 150px; border: 1px black solid; padding: 2px;position: absolute;top: 100px;left: 10px;">
Testframe
</div>
<script type="text/javascript" src="index.js">
</script>
</body></html>

[scriptmasterdel]

This should do the trick.

//Process manager
timerprocess3 = setInterval(function(){looptester()}, time / 10)

// X-axis
timerprocess1 = setInterval(function(){x2()}, xtime)

// Y-axis
timerprocess2 = setInterval(function(){y2()}, ytime)

Also, you can not name your functions x / y, i think this is because they are preset names, i have changed them in the above code to x2() and y2().

Oh and one more thing the function y() has a typo.

Hope this helps.

Del

[John_Keates]

That did help, thank you. I'm getting closer to what I want more and more...

At this point I have all the directions working (up, down, left, right), calculations are done the right way.

However, cant get the script to kill the Y-axis or X-axis mover when needed... They are both stopped after the X-axis has reached it's destination, no matter where the Y is.

I changed the script a bit, if someone can help me a little bit (and the notification from this board works ;-) ) I'll post that.