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 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Script to Move Image across the screen

    I have a small script. I am trying to move the image from the left side of the page to right and back and then once it reaches the left it will jump back to the right. For some reason it is not moving. Any Suggestions?
    Code:
    <script type="text/javascript">
    function moveleft()
    {
    var pp=document.getElementById("x");
    var lefta=parseInt(pp.style.left);
    if(lefta>0)
    {
    var tt=setTimeout("moveleft()",20);
    lefta=lefta-10;
    pp.style.left=lefta+"px"; 
    }
    }
    </script>
    <img src="giorgio.gif" id="x" style="position:relative;top:10px;left:125px;"><br>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Check the value of lefta, it may not be what you expect it to be.

  • Users who have thanked jmrker for this post:

    hcrosex3 (11-04-2012)

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Ahh slip of the finger , rookie mistake. :P thank you! But see the image continues to move across the screen extending the length of the browser window. I don't want it to do that I want it to stop at whatever the length of the window is and then go back.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function moveleft()
    {
    var pp=document.getElementById("x");
    var lefta=parseInt(pp.style.left);
    if(lefta>0)
    {
    var tt=setTimeout("moveleft()",20);
    lefta=lefta+10;
    pp.style.left=lefta+"px"; 
    }
    }
    </script>
    </head>
    
    <body onload="moveleft()">
    <img src="giorgio.gif" id="x" style="position:relative;top:10px;left:125px;"><br>
    </body>
    
    </html>

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .div {
     position:absolute;overflow:hidden;visibility:hidden;left:0px;top:100px;width:100%;height:150px;
    }
    .move {
     position:absolute;visibility:visible;left:-200px;top:0px;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcMove(id,ms){
     var o=zxcMove['zxc'+id],img=document.getElementById(id);
     if (img&&!o){
      o=zxcMove['zxc'+id]={
       obj:img,
       p:img.parentNode,
       ud:true,
       ms:typeof(ms)=='number'?ms:10000
      };
     }
     if (o){
      clearTimeout(o.dly);
      animate(o,img.offsetLeft,o.ud?o.p.offsetWidth:-img.width,new Date(),typeof(ms)=='number'?ms:o.ms);
     }
    }
    
    function animate(o,f,t,srt,mS){
      var ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       o.obj.style.left=now+'px';
      }
      if (ms<mS){
       o['dly']=setTimeout(function(){ animate(o,f,t,srt,mS); },10);
      }
      else {
       o.obj.style.left=t+'px';
       o.ud=!o.ud;
       zxcMove(o.obj.id);
      }
     }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
    <input type="button" name="" value="Move" onmouseup="zxcMove('tst',5000);"/>
    <div class="div" >
    <img class="move" id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    Code:
    var geter,lefta;
    function moveRight() { 
           geter = document.getElementById("x"); 
            lefta = parseInt(geter.style.left); 
        var starter = setTimeout("moveRight()",20); 
    
                                lefta = lefta+5; 
                                geter.style.left = lefta + "px"; 
    
                                        if (lefta === 980) { 
                                            clearTimeout(starter);
                                            moveLeft();
       
    }; 
    };
    function moveLeft(){
    
        var starter = setTimeout("moveLeft()",20); 
                                lefta = lefta - 5; 
                                geter.style.left = lefta+"px"; 
    
                                                if (lefta === 125) { 
                                                    clearTimeout(starter);
                                                   
                                                }; 
    }
    Last edited by yaseenyahya; 11-04-2012 at 05:50 PM.

  • #6
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by yaseenyahya View Post
    Code:
    var geter,lefta;
    function moveRight() { 
           geter = document.getElementById("x"); 
            lefta = parseInt(geter.style.left); 
        var starter = setTimeout("moveRight()",20); 
    
                                lefta = lefta+5; 
                                geter.style.left = lefta + "px"; 
    
                                        if (lefta === 980) { 
                                            clearTimeout(starter);
                                            moveLeft();
       
    }; 
    };
    function moveLeft(){
    
        var starter = setTimeout("moveLeft()",20); 
                                lefta = lefta - 5; 
                                geter.style.left = lefta+"px"; 
    
                                                if (lefta === 125) { 
                                                    clearTimeout(starter);
                                                   
                                                }; 
    }

    Yes! This is exactly what i'm trying to do but now if I was to try and reverse the direction onlick I thought I would put in onclick= moveLeft() but that just makes the image shake in place. Im confused as to why that is.

  • #7
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts
    Code:
    var geter,lefta,dir=1;
    function mover(o) {
     if (o) {dir=-dir;}
           geter = document.getElementById("x"); 
            lefta = parseInt(geter.style.left); 
        var starter = setTimeout("mover()",20); 
    
                                lefta = lefta+(5*dir); 
                                geter.style.left = lefta + "px"; 
    
                                        if (lefta > 975) { 
                                            dir=-1;   
    };
                                                if (lefta < 130) { 
                                            dir=1;   
    };
     
    };
    onclick="mover(1);"
    onload="mover();"
    <DmncAtrny> I will write on a huge cement block "BY ACCEPTING THIS BRICK THROUGH YOUR WINDOW, YOU ACCEPT IT AS IS AND AGREE TO MY DISCLAIMER OF ALL WARRANTIES, EXPRESS OR IMPLIED, AS WELL AS DISCLAIMERS OF ALL LIABILITY, DIRECT, INDIRECT, CONSEQUENTIAL OR INCIDENTAL, THAT MAY ARISE FROM THE INSTALLATION OF THIS BRICK INTO YOUR BUILDING."
    <DmncAtrny> And then hurl it through the window of a Sony officer
    <DmncAtrny> and run like hell

    Portfolio, Tutorials - http://www.nomanic.biz/


  •  

    Posting Permissions

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