PDA

View Full Version : Please help me with this slide animation code.... PLEASE!

shivboy
01-05-2003, 08:03 AM
hi,

i need help with this slide animation code. i am first generating x-browser layers, and then i'm moving it using another function. but a weird error appears, "object" not defined at line 0. why is this happening? please help me. any help is appreciated. im posting the code.


function browserSniff()
{
this.ver = navigator.appVersion; //Cheking for browser version
this.agent = navigator.userAgent; //Checking for browser type
this.dom = document.getElementById?1:0; //Checking if IE5+ & NS6+
this.opera5 = this.agent.indexOf("Opera 5")>-1; //Opera detection
this.ie5 = (this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; //Checking if IE5
this.ie6 = (this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; //Checking if IE6
this.ie4 = (document.all && !this.dom && !this.opera5)?1:0; //Checking if IE4
this.ie = this.ie4||this.ie5||this.ie6; //One common variable for IE detection
this.mac = this.agent.indexOf("Mac")>-1; //If IE for Mac
this.ns6 = (this.dom && parseInt(this.ver) >= 5) ?1:0; //If NS6
this.ns4 = (document.layers && !this.dom)?1:0; //If NS4
this.bs = (this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5); //Assigning browser sniffed to variable bs.
return this;
}

// Generating a simple browser sniffing object bs
var bs = new browserSniff();

//++++++++++++++GENERATING CROSS-BROWSER LAYERS+++++++++++++++\\

function layerGen(id,cl,cont)
{
if(bs.ns4)
{
this.layerId = id;
this.layerClass = cl;
this.xinc = this.yinc = 0;
document.writeln('<div id="'+this.layerId+'" class="'+this.layerClass+'"></div>');
return this;
}
else if(bs.dom || bs.ie5 || bs.ie6)
{
this.d = document.createElement("div");
this.d.id = id;
this.d.className = cl;
this.str = document.createTextNode(cont);
this.d.appendChild(this.str);
document.getElementsByTagName("body").item(0).appendChild(this.d);
this.css = document.getElementById(id).style;
this.xinc = this.yinc = 0;
return this;
}
}

layerGen.prototype.move = function(x,y,inc)
{
if(bs.ie4 || bs.ie5 || bs.ie6)
{
this.xPos = this.css.left;
this.yPos = this.css.top;
this.angle = 30;
this.xinc = 5*Math.cos(this.angle*Math.PI/180);
this.yinc = 5*Math.sin(this.angle*Math.PI/180);
this.count = 0;
if(this.count < 25)
{
this.xPos += this.xinc;
this.yPos += this.yinc;
this.css.left = this.xPos;
this.css.top = this.yPos;
setTimeout(this.css+'.move('+x+','+y+','+inc+')',100);
}
}
}


function pageInit()
{
var mDiv = new layerGen('box','dStyle',' ');
mDiv.move(400,500,5);
}
onload = pageInit;
//--></script>
</head>
<body>
</body>
</html>

thanx,
shivboy
joeframbach
01-05-2003, 05:18 PM
it seems to me that line 17 of the layerGen.move function.
.move() is a method of layerGen, not of layerGen.css.
try passing the element itself to the .move method instead of the style.
shivboy
01-05-2003, 06:11 PM
hi joeframbach,

thanx for replying man. that was really kind of u. but i dint get what u meant. can u explain me what u mean by try passing the element itself to the .move method instead of the style.? im sorry but i really coudnt get through with it. i'll be really thankful if u cud help me with this here.

thanx,
shivboy
joeframbach
01-05-2003, 08:40 PM
this.css is the style of the element.
move() is a methid of the element itself. you cannot access the method by element.style.move(). it has to be element.move().
so... instead of using this.css=document.getElementById(...).style,
use this.oElement=document.getElementById(...) and access it with this.oElement.stlye.left, oElement.style.top and oElement.move()
shivboy
01-06-2003, 07:09 AM
hi joeframbach,

thanx for replying again. i realised what mistake i was doing. but it still isnt working. it says 'object' is undefined at Line 0. i dont understand where am i going wrong now. im sorry if im bothering u too much, but could u just have a look at the code once more and let me know what wrong with it? i'll be really grateful.



function browserSniff()
{
this.ver = navigator.appVersion; //Cheking for browser version
this.agent = navigator.userAgent; //Checking for browser type
this.dom = document.getElementById?1:0; //Checking if IE5+ & NS6+
this.opera5 = this.agent.indexOf("Opera 5")>-1; //Opera detection
this.ie5 = (this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; //Checking if IE5
this.ie6 = (this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; //Checking if IE6
this.ie4 = (document.all && !this.dom && !this.opera5)?1:0; //Checking if IE4
this.ie = this.ie4||this.ie5||this.ie6; //One common variable for IE detection
this.mac = this.agent.indexOf("Mac")>-1; //If IE for Mac
this.ns6 = (this.dom && parseInt(this.ver) >= 5) ?1:0; //If NS6
this.ns4 = (document.layers && !this.dom)?1:0; //If NS4
this.bs = (this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5); //Assigning browser sniffed to variable bs.
return this;
}

// Generating a simple browser sniffing object bs
var bs = new browserSniff();

//++++++++++++++GENERATING CROSS-BROWSER LAYERS+++++++++++++++\\

function layerGen(id,cl,cont)
{
if(bs.ns4)
{
this.layerId = id;
this.layerClass = cl;
this.xinc = this.yinc = 0;
document.writeln('<div id="'+this.layerId+'" class="'+this.layerClass+'"></div>');
return this;
}
else if(bs.dom || bs.ie5 || bs.ie6)
{
this.d = document.createElement("div");
this.d.id = id;
this.d.className = cl;
this.str = document.createTextNode(cont);
this.d.appendChild(this.str);
document.getElementsByTagName("body").item(0).appendChild(this.d);
this.oE = document.getElementById(id);
this.xinc = this.yinc = 0;
return this;
}
}

layerGen.prototype.move = function(x,y,inc)
{
if(bs.ie4 || bs.ie5 || bs.ie6)
{
this.xPos = this.oE.style.left;
this.yPos = this.oE.style.top;
this.angle = 30;
this.xinc = 5*Math.cos(this.angle*Math.PI/180);
this.yinc = 5*Math.sin(this.angle*Math.PI/180);
this.count = 0;
if(this.count < 25)
{
this.xPos += this.xinc;
this.yPos += this.yinc;
this.oE.style.left = this.xPos;
this.oE.style.top = this.yPos;
setTimeout(this.oE+'.move('+x+','+y+','+inc+')',100);
}
}
}



function pageInit()
{
mDiv = new layerGen('box','dStyle',' ');
mDiv.move(400,500,5);
}
onload = pageInit;
glenngv
01-06-2003, 08:50 AM
try to alert(mDiv) to see if the object is instantiated.

function pageInit()
{
mDiv = new layerGen('box','dStyle',' ');
alert(mDiv); //must alert object
mDiv.move(400,500,5);
}

I think constructor function should have no return statement. Don't know if putting return caused the error you encountered.
joeframbach
01-06-2003, 12:27 PM
i dont understand what is causing the object expected error now... all seems fine!

one more thing - you might want to change this
this.xPos = this.oE.style.left;
to this
this.xPos = this.oE.style.left.split("px")[0]*1;
shivboy
01-06-2003, 08:40 PM
hi joeframbach & glenngv,

thanx guys for replying and trying to help me with this code. but this STILL isnt working. joeframbahc, i added that split thing u asked me to. it was a neat suggestion coz it could have generated an error anytime. glenngv what u suggested, i tried that, when i used alert(mDiv) & commented mDiv.move(...) it gave me [object Object] which i think shud be there. but when i removed alert it gave me the same error. why is this happening? this is SO weird!

thanx again,
shivboy
glenngv
01-07-2003, 02:30 AM
I think I know now where the problem is.
It's in:

setTimeout(this.oE+'.move('+x+','+y+','+inc+')',100);

you are executing this.oE.move() function in setTimeout.
As mentioned in the thread below, setTimeout/setInterval/eval execute code at the global level. So this would refer to window not to the constructor function.
http://codingforums.com/showthread.php?s=&threadid=10081

for that to work you should have called it like this:

setTimeout('mDiv.move('+x+','+y+','+inc+')',100);

but of course, you wouldn't know what variable would be used.
look at my suggestion in the thread above.
shivboy
01-07-2003, 08:09 PM
hi joeframbach,

thanx again for replying man. but this thing is not working at all! i dont know why. i'm positng the code, just see if there's something drastically wrong that im doing!!!


function browserSniff()
{
this.ver = navigator.appVersion; //Cheking for browser version
this.agent = navigator.userAgent; //Checking for browser type
this.dom = document.getElementById?1:0; //Checking if IE5+ & NS6+
this.opera5 = this.agent.indexOf("Opera 5")>-1; //Opera detection
this.ie5 = (this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; //Checking if IE5
this.ie6 = (this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; //Checking if IE6
this.ie4 = (document.all && !this.dom && !this.opera5)?1:0; //Checking if IE4
this.ie = this.ie4||this.ie5||this.ie6; //One common variable for IE detection
this.mac = this.agent.indexOf("Mac")>-1; //If IE for Mac
this.ns6 = (this.dom && parseInt(this.ver) >= 5) ?1:0; //If NS6
this.ns4 = (document.layers && !this.dom)?1:0; //If NS4
this.bs = (this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5); //Assigning browser sniffed to variable bs.
return this;
}

// Generating a simple browser sniffing object bs
var bs = new browserSniff();

//++++++++++++++GENERATING CROSS-BROWSER LAYERS+++++++++++++++\\

function layerGen(id,cl,cont)
{
if(bs.ns4)
{
this.layerId = id;
this.layerClass = cl;
this.xinc = this.yinc = 0;
document.writeln('<div id="'+this.layerId+'" class="'+this.layerClass+'"></div>');
return this;
}
else if(bs.dom || bs.ie5 || bs.ie6)
{
this.d = document.createElement("div");
this.d.id = id;
this.d.className = cl;
this.str = document.createTextNode(cont);
this.d.appendChild(this.str);
document.getElementsByTagName("body").item(0).appendChild(this.d);
this.oE = document.getElementById(id);
this.xinc = this.yinc = 0;
return this;
}
}

layerGen.prototype.move = function(id,x,y,inc)
{
obj = id;
if(bs.ie4 || bs.ie5 || bs.ie6)
{
this.xPos = this.oE.style.left.split("px")[0]*1;
this.yPos = this.oE.style.top.split("px")[0]*1;
this.angle = 30;
this.xinc = 5*Math.cos(this.angle*Math.PI/180);
this.yinc = 5*Math.sin(this.angle*Math.PI/180);
this.count = 0;
if(this.count < 25)
{
this.xPos += this.xinc;
this.yPos += this.yinc;
this.oE.style.left = this.xPos;
this.oE.style.top = this.yPos;
setTimeout(obj+'.move('+x+','+y+','+inc+')',100);
}
}
}



function pageInit()
{
mDiv = new layerGen('box','dStyle',' ');
mDiv.move('box',400,500,5);
}
onload = pageInit;



but again an error was generated Object support this property or method at Line 0. so i tried doing it another way. im posting the code.


..... browser sniffer same as above used and then....

//-----Generating Cross-browser objects-----\\
function xbrowserObj(obj)
{
if(bs.ns4)
this.st=document.layers[obj];//NS4
else if(bs.ie4)
this.st=document.all[obj].style;//IE4 to IE5
else if(document.getElementById)//IE5+ or NS6
this.st=document.getElementById(obj).style;
this.m=move;
return this;
}
function move()
{
//alert(parseInt(this.st.left));
if(bs.ie4 || bs.ie5 || bs.ie6)
{
this.xPos = parseInt(this.st.left); //this.st.left.split("px")[0]*1
this.yPos = parseInt(this.st.top); //this.st.top.split("px")[0]*1
this.angle = 30;
this.xinc = 5*Math.cos(this.angle*Math.PI/180);
this.yinc = 5*Math.sin(this.angle*Math.PI/180);
this.count = 0;
if(this.count < 25)
{
this.xPos += this.xinc;
this.yPos += this.yinc;
this.st.left = this.xPos;
this.st.top = this.yPos;
setTimeout('move()',100);
}
}
}
function pageInit()
{
mDiv = new xbrowserObj('box');
//alert(mDiv);
mDiv.m();
}
onload = pageInit;

//--></script>
</head>
<body>
<div id="box" style="position: absolute; height: 20px; width: 20px; top: 200px; left: 300px; background-color: red; layer-background-color: red; border: 2px solid blue;">
</div>
</body>
</html>


but this too generated a very weird error. it said that this.st.left is null or not an object at the red line in the code above. and if u use alert it perfectly gives the value as 300. i just fail to understand what's so drastically wrong with my coding. im sorry for bothering u so much but plz help me with this.

thanx again,
shivboy