I am new to Javascript and have run into a but of a problem. I am hoping someone can tell me what i am doing wrong.
I have all my code working for IE only. I am now trying to make it support both ie and ns. It is a simple layer animation that allows the programmer to feed in various variables to control the movement.
I move the layer in IE with this code
document.all(layerToMove).style.left = position
layerToMove is a variable
when I to do the tradition cross browser conversion of putting document.all and .style into a variable and then using eval to create the statement I get an error saying it does not recognize the layer denoted in the layerToMove variable
is am using this line of code
eval(layerRef + "(" + layerToMove + "
" + styleRef + ".left =" + position);
i am sure i am just missing something simple but I am lost with this one.
the full code is below
function moveIt()
{
moveLinks(1,0,500,1,4,50);//Link Number,Starting Position, Ending Position, Direction (1= Right 2= Left), Speed
moveLinks(2,800,300,2,4,50)
moveLinks(3,0,500,1,4,50)
moveLinks(4,800,300,2,4,50)
}
function moveLinks (linkNum,startPos,endPos,direction,speed,layerBounce)
{
//Cross Browser Conversion
layerRef = ""
styleRef = ""
if (navigator.appName =="Netscape"
{
layerRef ="document.layers"
styleRef =""
}
else
{
layerRef = "document.all"
styleRef = ".style"
}
// linkNum is the number of the Layer to be moved i.e. a Layer with the ID of link one would have a linkNum of 1
// startPos should be 0 or higher. Please do not use negative numbers
// endPos is the position where you would like for the layer to end before the bounce action (this is the final position
// + or - the bounce
// direction tell the code what direction you want it to move the layer. 1 is for right 2 is for left
// speed tells the code how many pixels to move the layer per iteration
// layerBounce is the number of pixels you would like the layer to bounce back when the code reaches endPos
loopLength = Math.abs(startPos - endPos);
position = startPos
layerToMove = "link" + linkNum
if (position != endPos)
{
if (direction == 1)
{
position =position + speed;
}
else// direction = 2
{
position = position - speed;
}
}
else
{
if (direction == 1)
{bounceBack = position - layerBounce}//bounce back is the number of pixels to bounce back from end of move
else
{bounceBack = position + layerBounce}//bounce back is the number of pixels to bounce back from end of move
bounce(linkNum,position,bounceBack,direction)
return
}
eval(layerRef + "(" + layerToMove + "" + styleRef + ".left =" + position);
setTimeout('moveLinks('+linkNum+','+position+','+endPos+','+direction+','+speed+','+layerBounce+')',1);
}
function bounce(layerNum,bounceStart,bounceEnd,direction)
{
layerToBounce = "link" + layerNum
bouncePos = bounceStart
if (bouncePos != bounceEnd)
{
if (direction == 1)
{bouncePos = bouncePos - 1}
else
{bouncePos = bouncePos + 1}
}
else
{return}
document.all(layerToBounce).style.left = bouncePos
setTimeout('bounce('+layerNum+','+bouncePos+','+bounceEnd+','+direction+')',1);
}
I have all my code working for IE only. I am now trying to make it support both ie and ns. It is a simple layer animation that allows the programmer to feed in various variables to control the movement.
I move the layer in IE with this code
document.all(layerToMove).style.left = position
layerToMove is a variable
when I to do the tradition cross browser conversion of putting document.all and .style into a variable and then using eval to create the statement I get an error saying it does not recognize the layer denoted in the layerToMove variable
is am using this line of code
eval(layerRef + "(" + layerToMove + "
" + styleRef + ".left =" + position); i am sure i am just missing something simple but I am lost with this one.
the full code is below
function moveIt()
{
moveLinks(1,0,500,1,4,50);//Link Number,Starting Position, Ending Position, Direction (1= Right 2= Left), Speed
moveLinks(2,800,300,2,4,50)
moveLinks(3,0,500,1,4,50)
moveLinks(4,800,300,2,4,50)
}
function moveLinks (linkNum,startPos,endPos,direction,speed,layerBounce)
{
//Cross Browser Conversion
layerRef = ""
styleRef = ""
if (navigator.appName =="Netscape"
{
layerRef ="document.layers"
styleRef =""
}
else
{
layerRef = "document.all"
styleRef = ".style"
}
// linkNum is the number of the Layer to be moved i.e. a Layer with the ID of link one would have a linkNum of 1
// startPos should be 0 or higher. Please do not use negative numbers
// endPos is the position where you would like for the layer to end before the bounce action (this is the final position
// + or - the bounce
// direction tell the code what direction you want it to move the layer. 1 is for right 2 is for left
// speed tells the code how many pixels to move the layer per iteration
// layerBounce is the number of pixels you would like the layer to bounce back when the code reaches endPos
loopLength = Math.abs(startPos - endPos);
position = startPos
layerToMove = "link" + linkNum
if (position != endPos)
{
if (direction == 1)
{
position =position + speed;
}
else// direction = 2
{
position = position - speed;
}
}
else
{
if (direction == 1)
{bounceBack = position - layerBounce}//bounce back is the number of pixels to bounce back from end of move
else
{bounceBack = position + layerBounce}//bounce back is the number of pixels to bounce back from end of move
bounce(linkNum,position,bounceBack,direction)
return
}
eval(layerRef + "(" + layerToMove + "
" + styleRef + ".left =" + position); setTimeout('moveLinks('+linkNum+','+position+','+endPos+','+direction+','+speed+','+layerBounce+')',1);
}
function bounce(layerNum,bounceStart,bounceEnd,direction)
{
layerToBounce = "link" + layerNum
bouncePos = bounceStart
if (bouncePos != bounceEnd)
{
if (direction == 1)
{bouncePos = bouncePos - 1}
else
{bouncePos = bouncePos + 1}
}
else
{return}
document.all(layerToBounce).style.left = bouncePos
setTimeout('bounce('+layerNum+','+bouncePos+','+bounceEnd+','+direction+')',1);
}
