javascript - How do I get an image to stop moving when it hits the edge of a webpage? -
i want image stop if hits edge of screen, instead going indefinitely (or until crashes) , making scroll bar appear.
i've tried setting stop having image's right side have lower client's width reason isn't registering viable command.
in other words, how make image recognize when has hit edge of 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 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 know lot of code sloppy. sorry.
window.innerwidth window's width. can check , see if window's width less or equal current image in iteration's left plus width , stop if that's case. deal case images moving left right, code seems indicate.
Comments
Post a Comment