SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help needed with code please

    im trying to move 3 cars across the screen
    i already got it to move

    but my problem is to get it to restart from the position where it started when it reaches the end of the window
    no matter what size window you got
    can you assist me with that please



    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>DRIVING CARS</title>
    
        <style type="text/css">
    img {position:absolute;}
    </style>
    
        <script type="text/javascript">
            var rgt = 50;
            var rgt2 = 50;
            var rgt3 = 50;
            
    
            function driveCar() {
                document.getElementById("car").style.top = "200px";
                document.getElementById("car").style.right = rgt + "px";
                
    
                document.getElementById("car2").style.top = "350px";
                document.getElementById("car2").style.right = rgt2 + "px";
               
    
                document.getElementById("car3").style.top = "550px";
                document.getElementById("car3").style.right = rgt3 + "px";
    
    
    
    
                rgt += 5;
                
                rgt2 += 10;
               
    
                    rgt3 += 15;
                
    
                setTimeout("driveCar()", 100);  
            }
            
    </script>
    
    </head>
    
    
    
    
    <body bgcolor="pink" onload="driveCar()">
    
    <img id="car" src="images/a.gif" /> <br /> <br /> <br /> 
    
    <img id="car2" src="images/b.gif" /> <br /> <br /> <br /> 
    
    <img id="car3" src="images/c.gif" />
    
    </body>
    </html>

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use window.innerWidth to get the browser window's width in pixels so you can work out when the car has got to the window's left border.

    With this modification, only the first car restarts when it has got to the end but the same principle applies to all 3.

    You might want to tweak the code to have a smoother transition on the restart.
    Code:
            <script type="text/javascript">
                var rgt = 50;
                var rgt2 = 50;
                var rgt3 = 50;
    
                function driveCar() {
                    document.getElementById("car").style.top = "200px";
                    document.getElementById("car").style.right = rgt + "px";
                    
                    document.getElementById("car2").style.top = "350px";
                    document.getElementById("car2").style.right = rgt2 + "px";
    
                    document.getElementById("car3").style.top = "550px";
                    document.getElementById("car3").style.right = rgt3 + "px";
    
                    rgt += 5;
    
                    if(rgt > window.innerWidth){
                        rgt = 50;
                    }
    
                    rgt2 += 10;
    
                    rgt3 += 15;
    
                    setTimeout("driveCar()", 100);
                }
            </script>


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
  •