Sliding layer

[ycc]

Hello,

I am trying to slide a layer using Javascript.

Moving the layer by changing the layer.style property will move the layer in one jump. However, when I try to move the layer GRADUALLY, through a Javascript FOR-loop the layer does not move gradually.

I have introduced delay in the loop. However, when the page executes the execution will be delayed BEFORE the layer starts moving and finally, after the delay, the layer jumps, in one step, to its final location. (It does not slide gradually.)

Having done most of my programming in the 1980's I would say "The graphics buffer is not flushed continuously."

What can one do to slide the layer gradually?

I am a beginner here and I apologize if the code I produce is unclear and redundant. I have mostly copied it from free sources as acknowledged.

You can try it out here, I have tried to make the page short:

http://web.telia.com/~u17103363/doc/tst_01.htm

Thanks

ycc

I am on a trip and can only follow the forum at irregular intervals, but I will definitely read all replies very carefully in due course. Thanks :)

[lp1051]

Hi ycc,

it seems to me, you're trying to implement own version of setInterval or setTimeout. If you need to move the block by 2px, you can use e.g. this:

function slideLayer (id, i) {
i+=2;
if(i<=400) {
moveLayer(id,100,i);
window.setTimeout("slideLayer('"+id+"', "+i+")", 1); //1 milisecond
}
}

And you need to add new argument into the caller (I took 10 as you had it in your loop as a start point) -
<a href="javascript:slideLayer('blockDiv',10)">slide</a><br><br>

[ycc]

Well - that's perfect, thanks a lot lp1051.

I changed the code in the link above accordingly. To add several trajectories I introduced a "counter" (r). I don't know if this is how to do it. I have always found recursive routines hard to get a grip at, at first. (Some say, understanding recursion is a sign of intelligence, too bad for me :))

For my present purpose this is quite enough, thanks lp1051.