Sliding layer

Discussion in 'JavaScript' started by ycc, Dec 17, 2008.

0
  1. #1
    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 :)
     
    ycc, Dec 17, 2008 IP
  2. lp1051

    lp1051 Well-Known Member

    Messages:
    163
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #2
    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>
     
    lp1051, Dec 17, 2008 IP
  3. ycc

    ycc Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    ycc, Dec 17, 2008 IP