Move a "layer" in NS6

[Alan]

Hi there,

Trying like most developers to make my scripts cross-browser, I'm trying
to deal with DHTML in NS6...
I've seen on a web site that if you want to set a "layer's" position through
JavaScript, you should use something like this :

myElement.style.top = "200px" // this value is a string...

So when you want to scroll a layer f.ex., you should assign the position
to a variable (let's say "i"), then increment/decrement it, and then use
something similar to the following syntax :

myElement.style.top = i+"px"

Isn't there a more efficient way to do this, like "myElement.style.moveBy
= 10", or something ? I didn't find anything else.

Thanks for your help !
Alan

[Maureen Gamble]

"Alan" <aherten@yahoo.com> wrote:
>So when you want to scroll a layer f.ex., you should assign the position
>to a variable (let's say "i"), then increment/decrement it, and then use
>something similar to the following syntax :
>
>myElement.style.top = i+"px"
>
You could do it with a for loop. something like

for(i=10; i<400; i++){
myElement.style.top = i + "px";
}
add a timeout to make it smoother and that might be OK.

Actually, I have just had to solve this exact problem for a demonstration
to my HTML class. I did it with the extra overhead of some additional functions.


=====
function shiftIt(id, dx, dy) {
var object=document.getElementById(id);
object.style.left=dx + "px";
object.style.top=dy + "px";

}


function xCoord(id) {
var object=document.getElementById(id);
var xc=parseInt(object.style.left);
return xc;
}

function yCoord(id) {
var object=document.getElementById(id);
var yc=parseInt(object.style.top);
return yc;
}
=====
function moveAvalon() {
var y=yCoord("Avalon");
var x=xCoord("Avalon");
if (y<=260) {
dy=y+10;
shiftIt("Avalon", x, dy);
shiftIt("Books", x, dy);
setTimeout("moveAvalon()", 5);
} else {
moveBooks();
}
}
============
This is for a lesson from the New Perspectives series of textbooks. It was
already done for the differences between NS4 and IE, but wouldn't work in
NS6. I had to completely rewrite it, but tried to keep as much of the original
code as possible, since the students had already built that much of it. Hence,
it is not as efficient as I might have designed it from scratch. The animation
moves the word "Avalon" with the word "books" hidden behind it down the page
into position. Then the word "books" is moved to the right so it is out from
behind the "Avalon" to finish the logo.

Although this is NOT really elegant, it does get the job done.