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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Location
    Bucharest, RO
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Move an image with Javascript and see the actual movement (please help !)

    Hi, I'm a beginner in web programming so please, don't mind if this might look as a dum request.
    I need an image to move from outside the viewed space, from somwhere on the page where users cannot hav acces, let's say from x position of -439px to 0px, so that the image looks like entering the window. And I need to do this after the user clicks a piece of text that is already on the screen. How can I do that ? In what tag should I include the image ? where should I put de event handler/ listener ? I know I need to change the CSS atributes but how.
    I tried this and it didn't work in Firefox nor in IE.

    Code:
    THE HTML FILE
    
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Greenbrain</title>
    <script language="javascript" type="text/javascript" src="greenbrain.js"></script>
    <link rel="stylesheet" type="text/css" href="greenbrain.css">
    </head>
    <body>   
       <div id=int; onClick="intr()"> <h1 class="intrare">INTRARE</h1> </div>
       <div id=img_intrare> <img src="soare.png"; class="soare"> </div>
    </body>
    </html>
    
    
    THE .CSS FILE
    body {background-image:url(fondhome.png); position:fixed;}
    img.soare {position:absolute; left:-459px; top:100px; z-index:1;}
    h1.intrare {z-index:2}
    
    
    THE .JS FILE
    
    function intr()
    {
    	var x, xi;
    	x=0;
    	xi=document.getElementById('img_intrare').style.left;
    	if(xi!=x) {document.getElementById('img_intrare').style.left = x + "px"}  
    }
    ps: i've been trying for 4 days now to find out how to do this, the answer might be just under my nose but then, my nose would be to big and pidgeons would come and sit on it...
    Last edited by rigaleb; 08-13-2009 at 05:20 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    This may help:-

    Code:
    <p id = "p1"  onclick = "moveRight()">Some text here for you to click on</p>
    
    <script type="text/javascript">
    
    var userWidth = window.screen.width;
    function moveRight() {
    var pp = document.getElementById("x");
    var lft = parseInt(pp.style.left);
    var tim = setTimeout("moveRight()",20);  // 20 controls the speed
    lft = lft+5;  // move by 5 pixels
    pp.style.left = lft+"px";
    if (lft > userWidth + 10) {  // left edge of image past the right edge of screen
    pp.style.left = -200;  // back to the left
    clearTimeout(tim);
    }
    }
    
    
    </script>
    
    <img src="one.gif" id="x" style="position:relative;top:10px;left:-200px;"><br>


    “Live like a candle which burns itself, yet gives light to others. Look backwards with gratitude, forward with hope, and upwards with confidence."
    Last edited by Philip M; 08-13-2009 at 05:30 PM.

  • #3
    New to the CF scene
    Join Date
    Aug 2009
    Location
    Bucharest, RO
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, so I got this
    Code:
    <body>   
       <p id = "intrare"  onclick = "moveRight()">INTRARE</p>
       <img src="one.gif" id="soare" class="sun">
    </body>
    
    var userWidth = window.screen.width;
    function moveRight()
    {
    	var pp= document.getElementById("soare");
    	var lft = parseInt(pp.style.left);
    	var tim = setTimeout("moveRight()",50);
    	lft = left+50;
    	pp.style.left = lft+"px";
    	if (lft > userWidth + 439)
    {
    	pp.style.left = -878;  
    	clearTimeout(tim);
    }
    }
    Nothing happens in firefox and when I click the text in IE I get an "error on page" message in the status bar. What's wrong ?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Works fine for me.

    Code:
    <p id = "intrare"  onclick = "moveRight()">INTRARE</p>
    <img src="one.gif" id="soare" style="position:relative;top:10px;left:-200px; "><br>
    <script type="text/javascript">
    
    var userWidth = window.screen.width;
    function moveRight() {
    var pp = document.getElementById("soare");
    var lft = parseInt(pp.style.left);
    var tim = setTimeout("moveRight()",50);  // 50 controls the speed
    lft = lft+50;  // move by 50 pixels
    pp.style.left = lft+"px";
    if (lft > userWidth + 439) {  // left edge of image past the right edge of screen
    pp.style.left = -878;  // back to the left
    clearTimeout(tim);
    }
    }
    
    </script>
    You must specify the style position in the img src.

  • #5
    New to the CF scene
    Join Date
    Aug 2009
    Location
    Bucharest, RO
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    GOOOOD. It worked ! Thanks. Now, another problem.. how do I make it stop at one point in it's trajectory and remain there ? Should i put a while loop ?that counts the "left" attribute ?
    Last edited by rigaleb; 08-13-2009 at 07:15 PM.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by rigaleb View Post
    GOOOOD. It worked ! Thanks. Now, another problem.. how do I make it stop at one point in it's trajectory and remain there ? Should i put a while loop ?that counts the "left" attribute ?
    Code:
    pp.style.left = lft+"px";
    if (lft > 500) {
    clearTimeout(tim);

  • #7
    New to the CF scene
    Join Date
    Aug 2009
    Location
    Bucharest, RO
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And another thing: when i put the stylesheet in a separate .css file, the whole thing stops functioning. WHY ?

  • #8
    New to the CF scene
    Join Date
    Aug 2009
    Location
    Bucharest, RO
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How do I make 2 images move at the same time ?


  •  

    Tags for this Thread

    Posting Permissions

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