Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help Javascript simple animation script

    Hi.
    I'm working on how to animate a div element through a page.
    the example is on this page.
    http://iamtibo.com/pleasant/

    You can see the square mooving on top of the screen.

    What I'm looking for is use javascript to calculate the width of the screen.
    And as soon as the square will pass the end of the screen it will disappear and reappear at the origin point..
    anyone can help..

    You can check the source code to see what I did.

    Thanks

  • #2
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    var foo = null; // object

    function doMove() {

    foo.style.left = parseInt(foo.style.left)+1+'px';
    setTimeout(doMove,70); // call doMove in 20msec
    }


    function init() {
    foo = document.getElementById('fooObject'); // get the "foo" object
    foo.style.left = '0px'; // set its initial position to 0px
    doMove(); // start animating
    }


    window.onload = init;



    Should I create more functions??
    to Restart when the element is = or > than the stage width ?

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Try this example


    Code:
    <script type="text/javascript">
    <!--
    function autoMove2(){
    divElement=document.getElementById("div3")
    currentPosition=divElement.offsetLeft
    currentPosition+=20
    divElement.style.left=currentPosition+"px"
    timer=setTimeout("autoMove2()",100)
    
    pageWidth=document.body.clientWidth
    elementWidth=divElement.offsetWidth
    
    if(currentPosition>=pageWidth){
    //clearTimeout(timer)
    divElement.style.left=-elementWidth+"px"
    }
    
    }
    // -->
    </script>  
    
    
    <DIV id="div3" style="position:absolute; left:10px; top:180px;width:100px;height:60px;border:1px solid #0000FF;background-color:#AAAAFF"></DIV> 
    
    <a href="#null" onclick="autoMove2()">Start</a>
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

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