SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: moving object

  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    moving object

    Hi foreros
    My question is really basic and simple:
    I only want to have a div moving horizontaly on the screen, on loading the document. I have tried many syntaxes, and nothing moves there.
    So I need help with this.
    the code for the page must be very simple:


    <style type="text/css">
    <!--
    #Layer1 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 339px;
    top: 34px;
    background-color: #CCFF66;
    }
    -->
    </style>
    <script language="javascript" type="text/javascript">
    function movercapa(){
    var cuadro=document.offsetLeft.Layer1;
    cuadro.left=spot;
    {for (i=1; i<1000; i++; ) }
    spot= spot+i;


    </script>
    </head>

    <body >
    <script type="text/javascript"> window.onload=movercapa();</script>

    <div id="Layer1">esta capa se mover&aacute; </div>
    </body>
    </html>

    Sure I'm doing things really really wrong, but I am a beginner!
    Thanks in advance for your interest.
    Ana

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript"> window.onload=movercapa();</script>
    executes the movercapa function and then assign the result value (undefined, in this case) to window.onload.

    Most likely, you need to replace it with the following:

    Code:
    <script type="text/javascript"> window.onload=movercapa;</script>
    The movercapa function is not quite right:

    Code:
    function movercapa() {
      var cuadro = document.getElementById("Layer1");
      for (var i = 1; i < 1000; i++) {
        cuadro.style.left = i + 'px';
      }
    }
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  3. #3
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your fast reply, but ... still doesn't work!

  4. #4
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course it works, just do it very fast :-)

    This will work a little but slower:
    Code:
    <style type="text/css">
    <!--
    #Layer1 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 339px;
    top: 34px;
    background-color: #CCFF66;
    }
    -->
    </style>
    <script language="javascript" type="text/javascript">
    function movercapa() {
      var offset = 0;
      var cuadro = document.getElementById("Layer1");
      var interval = setInterval(function () {
        if ((offset += 2) < 1000) {
          cuadro.style.left = offset + 'px';
        } else {
          clearInterval(interval);
        }
      }, 5);
    }
    </script>
    </head>
    
    <body >
    <script type="text/javascript"> window.onload=movercapa;</script>
    
    <div id="Layer1">esta capa se mover&aacute; </div>
    </body>
    </html>
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  5. #5
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *********Great!!!!
    ********thanks so much alex.
    Now, what if I want to stop it by clicking on it?

  6. #6
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function movercapa() {
      var offset = 0;
      var cuadro = document.getElementById("Layer1");
      var interval = setInterval(function () {
        if ((offset += 2) < 1000) {
          cuadro.style.left = offset + 'px';
        } else {
          clearInterval(interval);
        }
      }, 5);
      cuadro.onclick = function () { clearInterval(interval); };
    }
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  7. #7
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just perfect!
    May I continue asking?
    Now I would like to make the box disappera when it reaches the right border and apperar again in the left border.
    I guess it is done through a while condition, something like
    while (cuadro.style.left<800px) at the beginning of the function, but I don't know how to implement it.
    Can you help me again?

  8. #8
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could try this

    Code:
    function movercapa() {
      var offset = 0;
      var cuadro = document.getElementById("Layer1");
      var interval = setInterval(function () {
        if ((offset += 2) < 1000) {
          cuadro.style.left = offset + 'px';
        } else {
          cuadro.style.left = '0px';
          clearInterval(interval);
        }
      }, 5);
      cuadro.onclick = function () { clearInterval(interval); };
    }
    I added the line

    Code:
          cuadro.style.left = '0px';
    in the else in the function.

    This way once the function has moved the box, and is now finished, it will clear the timeout, and put the box back to the left of the screen.

    Bye

  9. #9
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, thank you, that was the idea. But how do you apply the function to it again, I mean, to make it move again?

  10. #10
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just call movercapa() again.
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  11. #11
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I love this forum!
    You can't imagine how much you are helping and teaching me! I am really grateful for your help and interest.

    And now the last questions:
    What if I wanted several boxes moving horizontally on the stage, at different speeds and parting from different positions?
    My idea is that I have to use an array which should include the name of the div objects, their speed and their starting .style.left position.
    The problem is that I don't know how to implement the array; it goes faaaar beyond my poor knowledge of javascript.

    or, the other idea is to repeat the code for each of the objects. I tried but ir didn't work

    By the way, I am trying to build an educational exercise, made in the way of a game.

    Regards
    Ana

  12. #12
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I propose to use jQuery:
    Code:
    <div id="div1" class="box" style="position: relative; top: 10px; width: 10px; height: 10px; background: #00ff00;"></div>
    <div id="div2" class="box" style="position: relative; top: 30px; width: 10px; height: 10px; background: #ff0000;"></div>
    Code:
    var elements = {
      'div1' : { start: 10, distance: 100, duration: 1500},
      'div2' : { start: 30, distance: 600, duration: 1000}
    }
    $('.box').each(function (k, v) {
      var i = elements[v.id];
      $(v).css('left', i.start + 'px')
        .animate({left: (i.start + i.distance) + 'px'}, i.duration);
    });
    Live example (just click Run):
    http://www.jscodetips.com/use-jquery...t-speed-3.html
    Last edited by alex.w747; Jul 16, 2008 at 14:25.
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  13. #13
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aha, jQuery. Right now I'm going to start learning about it.
    Thank you for your suggestion and all your help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •