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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Moving an image with javascript

    Can I know what is the simplest way an image can move from one place to another again and again using javascript? I found a code on the internet but all it does is fall from the top to the bottom and I'm looking for a way to move the image from right to left.

    I'm really sorry about this question but we've been given this homework and we haven't even discussed javascript. I've done my research but I can't seem to find a way.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    If this is homework please have a look at forum Rule #1.5.

    This forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others (especially code that appears to be for homework), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.

    I don't understand how you can have been given this assignment when you say you to have received no instruction at all in Javascript. Would your college work that way with French, medicine, law, chemistry .....?

    Google is your friend! When I search I get quite a lot of answers thrown up.


    We watched the best of Fernando today, but he can do better. - Commentator Radio 5 Live
    Last edited by Philip M; 12-27-2012 at 01:09 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh right sorry so I have a code that moves 1 image and I saw someone else's code that moves multiple images using arrays. I tried applying that to my code and the image no longer moves.

    Code:
    <script>
        var bat = [];
        var yend = [];
        var ystart = [];
        var ydiff = [];
        var xincrement = [];
        var yincrement = [];
        var screenwidth = [];
        var screenheight = [];
     
    function Ypick(){
    	for(var num = 0; num < 2; num++)
    	{
    		screenwidth[num] = screensize.offsetWidth;
    		screenheight[num] = screensize.offsetHeight;
    		xincrement[num] = 1000;
    		ystart[num] = 400;
    		yend[num] = Math.round(Math.random()*(screenheight-92));
    		bat = document.getElementbyId("bat"+num);
    		bat.style.top=ystart[num];
    		bat.style.left=-100;
        if (ystart > yend){
            ydiff[num] = (ystart[num]-yend[num]);
            yincrement[num] = (ydiff[num]/xincrement[num]);
            Moveneg();
        }
        else {
            ydiff[num] = (yend[num]-ystart[num]);
            yincrement[num] = (ydiff[num]/xincrement[num]);
            Movepos();
        }
    	}
    }   
    function Moveneg(){
    	for(num = 0; num < 2; num++){
        if (screenwidth[num] > parseInt(bat.style.left)) {
            with (bat) {
            style.left = parseInt(style.pixelLeft + 10);
            style.top = parseInt(style.pixelTop - yincrement[num]);
            }
            setTimeout('Moveneg()',20);
        }
        else {
            with (bat) {
            style.left = parseInt(style.pixelLeft - screenwidth[num]);
            style.top = parseInt(style.pixelTop - yend[num]);
            }
            Ypick();
        }
        }
    }
    function Movepos(){
    for(num = 0; num < 2; num++){
        if (screenwidth[num] > parseInt(bat.style.left)) {
            with (bat) {
            style.left = parseInt(style.pixelLeft + 10);
            style.top = parseInt(style.pixelTop + yincrement[num]);
            }
            setTimeout('Movepos()',20);
        }
        else {
            with (bat) {
            style.left = parseInt(style.pixelLeft - screenwidth[num]);
            style.top = parseInt(style.pixelTop - yend[num]);
            }
            Ypick();
        }
       }
    }
    </script>
    in the code above I'm trying to move to images.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Code makes no sense.

    You declare that bat is an array (using var bat = []; but then you *WIPE OUT* the array and only have one bat when you do this:
    Code:
        bat = document.getElementbyId("bat"+num);
    Make up your mind: Are you going to use those arrays or not? If not, then why have them as arrays?

    It would seem they should be arrays, because you consistently do
    Code:
        for(var num = 0; num < 2; num++)
    meaning it looks like you expect array elements 0 and 1.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    use css, along with css-transitions to do GPU-accelerated animation without the stutters of javascript's hurry-up-and-wait execution environment.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #6
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    216
    Thanks
    0
    Thanked 29 Times in 27 Posts
    See the source of this page...
    Use an image with position absolute and modify the style.pos and style.left values
    Code:
    <style type="text/css">
    body {margin:0;padding:0;background-color:#000000;}
    img {display:block;margin:0;border:0;width:13px;height:13px;position:absolute;top:30px;left:30px;}
    </style>
    <script type="text/javascript">
    // n for new x, y, v (for speed (vitesse) only vy, vx is constant) or a for acceleration
    var oy=ox=30,ny=ov=nv=oc=nc=nx=0,ky=0.43,kv=0.0002,dx=0.3+Math.random()*2;
    function ballMove(){
    	if (nv) s=nv/Math.abs(nv);else s=1;
    	na=ky-s*kv*ov*ov;// gravity - air resistance
    	nv=ov+na;ny=oy+nv;
    	nx=ox+dx;
    	if (500<ny) {ny=1000-ny;nv=-nv*0.95;dx=0.97*dx}
    	if (Math.abs(nv)<0.01 && dx<0.1) return;
    	oy=ny;ov=nv;oc=nv;ox=nx;
    	document.getElementById('bal').style.top=Math.round(ny)+'px';
    	document.getElementById('bal').style.left=Math.round(nx)+'px';
    	setTimeout(ballMove,10); 
    }	
    ballMove();
    </script>
    Last edited by 007julien; 12-28-2012 at 02:05 PM.


  •  

    Posting Permissions

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