How do I get an image to stop moving when it hits the edge of a webpage?

Question

I want an image to stop if it hits the edge of the screen, but instead it is going indefinitely (or until it crashes) and making the scroll bar appear.

I've tried setting it to stop by having the image's right side have to be lower than the client's width but for some reason that isn't registering as a viable command.

In other words, how do I make the image recognize when it has hit the edge of the browser?

HTML:

<!DOCTYPE html>
<html>
<head>
<h1> ----'s Door prize </h1>
</head>
<body>
<script src="doorprize.js"></script>
<div id="d1" style ="display:inline">
    <h3 style= "font-size:24px;" ><b> Enter Names </b></h3></br>
    <textarea style="margin: 0px; height: 347px; width: 327px;" id="contestantField"></textarea></br>
    <button id="chooseNames">Choose your Participants</button>
</div>
<div id="d2" style="display:none">
    <h3 id="onYourMarks"> Contestants </h3>
    <img src="BlueToad.png" style="position:relative; left: 10px;width:75px;height:75px;display:none" id="img0"></img><p id="name0"></p></br>
    <img src="Luigi-Nintendo.png" style="position:relative; left: 10px;width:75px;height:75px;display:none"id="img1"></img><p id="name1"></p></br>
    <img src="Wario_Real.png" style="position:relative; left: 10px;width:75px;height:75px;display:none"id="img2"></img><p id="name2"></p></br>
    <img src="Shadow-large.png" style="position:relative; left: 10px;width:75px;height:75px;display:none" id="img3"></img><p id="name3"></p></br>
    <img src="NsmbMario.png" style="position:relative; left: 10px;width:75px;height:75px;display:none"id="img4"></img><p id="name4"></p></br>
    <img src="Nabbit.png" style="position:relative; left: 10px;width:75px;height:75px;display:none"id="img5"></img><p id="name5"></p></br>
    <button id="Race">RACE!</button>
    <button id="CancelIt">Cancel</button>
    <audio id="chariotsOfFire">
        <source src="chariots.mp3" type ="audio/mpeg">
    </audio>

</div>
<div id="d3" style="display:none">
    <p> Congratulations! </p> <p id="winner"></p>
    <img id="winner">
    <button id="newRace">Try Again?</button>

</body>
</html>

Javascript:

var Go;
var img0 = new Image();
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
var img4 = new Image();
var img5 = new Image();
var imgArray = new Array();
function waitForIt()
{
    document.getElementById("onYourMarks").innerHTML = "Get Ready!...Set!";
    document.getElementById("Race").style.display = "none";
    for(i=0;i<6;i++)
    {
        document.getElementById("name" + i).innerHTML = "";
    }
    var waitForIt = setTimeout(startRacing, 2000);
    window.addEventListener("load",startRacing);
}
function moveThatImage()
{

    img0 = document.getElementById("img0");
    img1 = document.getElementById("img1");
    img2 = document.getElementById("img2");
    img3 = document.getElementById("img3");
    img4 = document.getElementById("img4");
    img5 = document.getElementById("img5");
    imgArray[0] = img0;
    imgArray[1] = img1;
    imgArray[2] = img2;
    imgArray[3] = img3;
    imgArray[4] = img4;
    imgArray[5] = img5;
    for(i=0;i<imgArray.length;i++)
    {
        var left = parseInt(imgArray[i].style.left,imgArray[i].style.left);
        console.log(left);
        left += Math.floor((Math.random() * 10 + 1));
        imgArray[i].style.left = left + 'px';
    }
}

function startRacing()
{
    img0 = document.getElementById("img0");
    img1 = document.getElementById("img1");
    img2 = document.getElementById("img2");
    img3 = document.getElementById("img3");
    img4 = document.getElementById("img4");
    img5 = document.getElementById("img5");
    imgArray[0] = img0;
    imgArray[1] = img1;
    imgArray[2] = img2;
    imgArray[3] = img3;
    imgArray[4] = img4;
    imgArray[5] = img5;
    document.getElementById("onYourMarks").innerHTML = "GOOOOOO!!!!!!";
    var audio = document.getElementById("chariotsOfFire");
    audio.play();
    var width = document.documentElement.clientWidth;
    console.log(width);
    console.log(imgArray[1].style.length);
    for(i=0;i<imgArray.length;i++)
    {
        console.log(i);
        while(imgArray[i].style.left < width)
        {
        Go = setInterval(moveThatImage,2);
        }
    }
    clearInterval(Go);
}

function raceOver()
{
    document.getElementById("d2").style.display = "none";
    document.getElementById("d3").style.display = "block";

}

p.s. yes I know a lot of this code is sloppy. Sorry.

This example doesn't work, it includes JS from an external script. Please create a [SSCCE](http://sscce.org/) and add it using the snippet function of the SO question editor. — s3lph, Mar 29 '15 at 02:52
Yes I know it includes javascript from an external script. The external script that I'm writing is what I'm having trouble with. I shall try to figure it out on my own it seems as doing the SSCCE thing would probably take about the same amount of time. — TandyRayes, Mar 29 '15 at 03:00
possible duplicate of [What is the most robust way to get the width/height of the browser window using JavaScript?](http://stackoverflow.com/questions/4126790/what-is-the-most-robust-way-to-get-the-width-height-of-the-browser-window-using) — Ryan, Mar 29 '15 at 03:18
@ryan not really I want to know how to use that to stop the image from moving he was just trying to find it. — TandyRayes, Mar 29 '15 at 03:35

score 0 · Answer 1 · answered Mar 29 '15 at 04:57

window.innerWidth will get you your window's width. You can check and see if the window's width is less than or equal to the current image in the iteration's left plus its width and then stop if that's the case. This will deal with the case where the images are moving from left to right, as your code seems to indicate.

How do I get an image to stop moving when it hits the edge of a webpage?

1 Answers1