Moving layers and control speed

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Fabri
    #1

    Moving layers and control speed

    I have to move 2 layers (one from up to center and one from bottom to
    center) and I found this way:

    <div id="up" style="position :absolute;left: 10px;top:-20px">Up</div>
    <div id="down" style="position :absolute;left: 10px;top:200px" >Down</div>

    function movediv(){
    var u = document.getEle mentById("up")
    var d = document.getEle mentById("down" )
    u.style.top = "100px";
    d.style.top = "100px";
    }

    It doesn' work...because:

    1) They don't move at "the same time"...I would like to obtain
    simultaneous move.

    2) I can't control speed so moving is invisible!

    Any help much appreciated.

    Best Regards.

    --
    Fabri
    (Lattepiù, chi può darti di più?)
    Tags: None
    • Paul R
      #2
      Re: Moving layers and control speed

      Here is a quick version to play with.

      The important thing is to use [window].setInterval() to move the div a
      short distance frequently. It's simplest to save status information for
      each DIV in a separate object, which I've called moveableDiv.

      movediv() now calls moveabit() every 5 milliseconds, which bumps the div
      up or down a pixel. Enjoy!

      <html><head>
      <script language="JavaS cript">
      function moveableDiv(nam e, startpoint)
      {
      this.obj = document.getEle mentById(name);
      this.whereAmI = startpoint;
      this.timer = 0;
      this.movecount = 0;
      }

      var md = new Array(2);

      function movediv()
      {
      md[0] = new moveableDiv("up ", -20);
      md[1] = new moveableDiv("do wn", 200);

      md[0].timer = setInterval("mo veabit(md[0], 1, 200)", 5);
      md[1].timer = setInterval("mo veabit(md[1], -1, 200)", 5);
      }

      function moveabit(which, howmuch, howmanytimes)
      {
      if(which.moveco unt++ == howmanytimes)
      {
      clearInterval(w hich.timer);
      return;
      }

      which.whereAmI += howmuch;

      if(which.obj.st yle)
      which.obj.style .top = which.whereAmI + "px";
      else
      which.obj.setAt tribute("style" , "top: " + which.whereAmI + "px");
      }
      </script>
      <style>div {position:absol ute;left:100px; }</style>
      </head>
      <body>
      <div id="up" style="top:-20px">Up</div>
      <div id="down" style="top:200p x">Down</div>
      <a href="javascrip t:void(0)" onclick="movedi v()">click</a>
      </body>

        Comment

        • Fabri
          #3
          Re: Moving layers and control speed

          AWESOME!

          I'll look into your code :-))

          Can I ask you what is it href="javascrip t:void(0)" ??

          Great job Paul.

          --
          Fabri
          (Lattepiù, chi può darti di più?)

            Comment

            • Paul R
              #4
              Re: Moving layers and control speed

              Fabri wrote:[color=blue]
              > AWESOME!
              >
              > I'll look into your code :-))
              >
              > Can I ask you what is it href="javascrip t:void(0)" ??
              >
              > Great job Paul.
              >[/color]
              It's a convenient way of stopping a hyperlink fetching another page or
              reloading the current one. In JavaScript, void(x) means ignore x's
              return value (if any). As an alternative, I could have written

              <a href="javascrip t:void(movediv( ))">

              and skipped the onclick altogether; it's a matter of style.

              Cheers.

                Comment

                • Fabri
                  #5
                  Re: Moving layers and control speed

                  Paul R wrote:
                  [CUT]

                  :-)

                  Paul...isn't it possible to modify speed in your script? nope eh?


                  --
                  Fabri
                  (Lattepiù, chi può darti di più?)

                    Comment

                    • Paul R
                      #6
                      Re: Moving layers and control speed

                      Fabri wrote:[color=blue]
                      > Paul R wrote:
                      > [CUT]
                      >
                      > :-)
                      >
                      > Paul...isn't it possible to modify speed in your script? nope eh?
                      >
                      >[/color]
                      You can't go faster than 1 move per millisecond, but you can go a bigger
                      distance with each move:

                      setInterval("mo veabit(md[0], 50, 20)", 5);

                      where 50 is 50px.

                        Comment

                        • Grant Wagner
                          #7
                          Re: Moving layers and control speed

                          "Paul R" <not.a.valid@em ail.address> wrote in message
                          news:2T5Od.586$ 1Y.425@newsfe4-gui.ntli.net...[color=blue]
                          > Fabri wrote:[color=green]
                          >> Paul R wrote:
                          >> [CUT]
                          >>
                          >> :-)
                          >>
                          >> Paul...isn't it possible to modify speed in your script? nope eh?
                          >>
                          >>[/color]
                          > You can't go faster than 1 move per millisecond, but you can go a
                          > bigger distance with each move:
                          >
                          > setInterval("mo veabit(md[0], 50, 20)", 5);
                          >
                          > where 50 is 50px.[/color]

                          You can't even go 1 move per millisecond on some operating
                          systems/platforms:

                          <url: http://mindprod.com/jgloss/time.html />

                          It seems unlikely that the resolution of setInterval() or setTimeout()
                          in a scripting language running in a browser would be better than the
                          resolution of the timer available on the underlying operating system.

                          --
                          Grant Wagner <gwagner@agrico reunited.com>
                          comp.lang.javas cript FAQ - http://jibbering.com/faq


                            Comment

                            • Dr John Stockton
                              #8
                              Re: Moving layers and control speed

                              JRS: In article <7o3Od.505$4t5. 343@newsfe5-gui.ntli.net>, dated Tue, 8
                              Feb 2005 13:45:39, seen in news:comp.lang. javascript, Paul R
                              <not.a.valid@em ail.address> posted :[color=blue]
                              >
                              >movediv() now calls moveabit() every 5 milliseconds, which bumps the div
                              >up or down a pixel.[/color]


                              In which combinations of browser and OS and computer have you
                              demonstrates that five milliseconds is achieved, as opposed to ten or
                              more? What do you get in Win98?

                              --
                              © John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 MIME. ©
                              Web <URL:http://www.merlyn.demo n.co.uk/> - w. FAQish topics, links, acronyms
                              PAS EXE etc : <URL:http://www.merlyn.demo n.co.uk/programs/> - see 00index.htm
                              Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.

                                Comment

                                • Paul R
                                  #9
                                  Re: Moving layers and control speed

                                  Dr John Stockton wrote:
                                  ....[color=blue]
                                  > In which combinations of browser and OS and computer have you
                                  > demonstrates that five milliseconds is achieved, as opposed to ten or
                                  > more? What do you get in Win98?
                                  >[/color]
                                  I haven't demonstrated any such thing. On my Win 2000 box it does indeed
                                  get no quicker than 10ms.

                                  If you're suggesting that my postings should be accurate to within 5
                                  thousandths of a second, I shall certainly try harder ;-)

                                    Comment

                                    Previous template Next
                                    Working...