magicyte
10-02-2008, 08:56 PM
Hey. I was wondering how I could recall a function inside of another function, namely in OOP. I have this code and the highlighted line is my problem. The function is animate(). Basically I created a function for making a linked list in an array that will be fetched and then be processed to move the element around. Here is an example object: var myObj = new Element(/*id here in quotes*/); This then sets aside element functions. I will change the class name to Animation() and just have the linked list function and implementor involved. Also: VERY IMPORTANT!!: There is NO ERROR. I just want the function to keep going until the animation is complete. Please help!!
Jasoop.js
/************* - NOTICE - *************/
/ Name: Jasoop Toolbox /
/ File: Jasoop.js /
/ Copyright: 2008 /
/ Author: Arthur Christopher Watkins /
/ Note: This notice must stay in this /
/ document in order for it to be legal /
/**************************************/
// Start Jasoop Toolbox
var $ = function (a) {
if(document.getElementById()) return document.getElementById(a);
else if(document.layers) return document.layers[a];
else if(document.all) return document.all[a];
}
function Element (a)
{
var animateX = new Array(99); // animation X position
var animateY = new Array(99); // animation Y position
var animateInt = new Array(99); // animation interval
var setAnimateNumber = 0; // number used to set animation
var animateNumber = 0; // number used to animate
this.pxWidth = function (w) {
$(a).style.width = w;
};
this.pxHeight = function (h) {
$(a).style.height = h;
};
this.textColor = function (txtcol) {
$(a).style.color = txtcol;
};
this.backgroundColor = function (bgcol) {
$(a).style.background = bgcol;
};
this.posType = function (postype) {
if(postype == "absolute")
$(a).style.position = "absolute";
else if(postype == "relative")
$(a).style.position = "relative";
else if(postype == "static")
$(a).style.position = "static";
else if(postype == "fixed")
$(a).style.position = "fixed";
else if(postype == "none")
$(a).style.position = "none";
else
$(a).style.position = "none";
};
this.overflow = function (o) {
if(o == "visible")
$(a).style.overflow = "visible";
else if(o == "hidden")
$(a).style.overflow = "hidden";
else if(o == "scroll")
$(a).style.overflow = "scroll";
else if(o == "auto")
$(a).style.overflow = "auto";
else if(o == "none")
$(a).style.overflow = "none";
else
$(a).style.overflow = "none";
};
this.setAnimate = function (x,y,int) {
animateX[setAnimateNumber] = x;
animateY[setAnimateNumber] = y;
animateInt[setAnimateNumber] = int;
setAnimateNumber++;
};
this.animate = function (startType) {
if(startType == 'start') {
if(animateNumber < setAnimateNumber)
{
$(a).style.position = "absolute";
$(a).style.left = animateX[animateNumber];
$(a).style.top = animateY[animateNumber];
animateNumber++;
//setTimeout('this.animate("start");',animateInt[animateNumber]); // Bug
}
else if(animateNumber >= setAnimateNumber)
{
for(i = 0; i < setAnimateNumber; i++)
{
animateX[i]=0;
animateY[i]=0;
animateInt[i]=0;
}
setAnimateNumber=0;
animateNumber=0;
}
else
{
}
}
else if(startType == 'reset')
{
for(i = 0; i < setAnimateNumber; i++)
{
animateX[i]=0;
animateY[i]=0;
animateInt[i]=0;
}
setAnimateNumber=0;
animateNumber=0;
}
else
{
}
};
this.moveTo = function (x,y) {
$(a).style.position = "absolute";
$(a).style.left = x;
$(a).style.top = y;
};
}
// End Jasoop Toolbox
I have tried multiple ways to do this, including Element().animate() and Element('myElement').animate(). Would anyone know how to do this?
NOTE: I created Jasoop Toolbox, standing for JavaScript Object Oriented Programming Toolbox. You need to leave the notice there to use it, that is, if you want to. ;)
-magicyte
Jasoop.js
/************* - NOTICE - *************/
/ Name: Jasoop Toolbox /
/ File: Jasoop.js /
/ Copyright: 2008 /
/ Author: Arthur Christopher Watkins /
/ Note: This notice must stay in this /
/ document in order for it to be legal /
/**************************************/
// Start Jasoop Toolbox
var $ = function (a) {
if(document.getElementById()) return document.getElementById(a);
else if(document.layers) return document.layers[a];
else if(document.all) return document.all[a];
}
function Element (a)
{
var animateX = new Array(99); // animation X position
var animateY = new Array(99); // animation Y position
var animateInt = new Array(99); // animation interval
var setAnimateNumber = 0; // number used to set animation
var animateNumber = 0; // number used to animate
this.pxWidth = function (w) {
$(a).style.width = w;
};
this.pxHeight = function (h) {
$(a).style.height = h;
};
this.textColor = function (txtcol) {
$(a).style.color = txtcol;
};
this.backgroundColor = function (bgcol) {
$(a).style.background = bgcol;
};
this.posType = function (postype) {
if(postype == "absolute")
$(a).style.position = "absolute";
else if(postype == "relative")
$(a).style.position = "relative";
else if(postype == "static")
$(a).style.position = "static";
else if(postype == "fixed")
$(a).style.position = "fixed";
else if(postype == "none")
$(a).style.position = "none";
else
$(a).style.position = "none";
};
this.overflow = function (o) {
if(o == "visible")
$(a).style.overflow = "visible";
else if(o == "hidden")
$(a).style.overflow = "hidden";
else if(o == "scroll")
$(a).style.overflow = "scroll";
else if(o == "auto")
$(a).style.overflow = "auto";
else if(o == "none")
$(a).style.overflow = "none";
else
$(a).style.overflow = "none";
};
this.setAnimate = function (x,y,int) {
animateX[setAnimateNumber] = x;
animateY[setAnimateNumber] = y;
animateInt[setAnimateNumber] = int;
setAnimateNumber++;
};
this.animate = function (startType) {
if(startType == 'start') {
if(animateNumber < setAnimateNumber)
{
$(a).style.position = "absolute";
$(a).style.left = animateX[animateNumber];
$(a).style.top = animateY[animateNumber];
animateNumber++;
//setTimeout('this.animate("start");',animateInt[animateNumber]); // Bug
}
else if(animateNumber >= setAnimateNumber)
{
for(i = 0; i < setAnimateNumber; i++)
{
animateX[i]=0;
animateY[i]=0;
animateInt[i]=0;
}
setAnimateNumber=0;
animateNumber=0;
}
else
{
}
}
else if(startType == 'reset')
{
for(i = 0; i < setAnimateNumber; i++)
{
animateX[i]=0;
animateY[i]=0;
animateInt[i]=0;
}
setAnimateNumber=0;
animateNumber=0;
}
else
{
}
};
this.moveTo = function (x,y) {
$(a).style.position = "absolute";
$(a).style.left = x;
$(a).style.top = y;
};
}
// End Jasoop Toolbox
I have tried multiple ways to do this, including Element().animate() and Element('myElement').animate(). Would anyone know how to do this?
NOTE: I created Jasoop Toolbox, standing for JavaScript Object Oriented Programming Toolbox. You need to leave the notice there to use it, that is, if you want to. ;)
-magicyte