Lprox5 Lprox5 - 1 month ago 5
CSS Question

How to use setInterval and clearInterval to move text diagonally left (back to start) after moving right and down

This is the result of what I am trying to accomplish using only JavaScript (no jQuery or CSS) with setInterval and clearInterval:

Result

I have to begin moving the text from the top-left corner to the top-right corner of a window's browser. When it reaches the top-right corner, the text will begin to move down to the bottom-right corner. After that, it will go back to its start position and stop. I am able to move the text to the right and bottom, but not back to the start position. I have tried various ways to wrap my head around this one part and have been unsuccessful. Any help would be much appreciated. This is my code:



<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var thisLeft=0;
var thisTop=0;
var moveID=0;

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

// Function to move the text
function moveText(){

var thisText= document.getElementById('myDiv');
if (thisLeft < width ){
thisLeft += 100; //how much the text moves right
}else if (thisLeft >= width) {
document.getElementById("myDiv").style.color = "blue";
document.getElementById("myDiv").style.fontSize= "xx-Large";
document.getElementById('myDiv').innerHTML= "moveDown";
thisTop +=100; //how much the text moves down
}

if (thisTop >= height && thisLeft >= width){
thisTop -= 100;
thisLeft -= 100;
}


thisText.style.left=thisLeft +"px";
thisText.style.top=thisTop +"px";
}

// how long it will take the text move to complete
function doMove(){
moveID=setInterval(moveText, 500);
}

</script>
</head>
<body onload= "doMove()" >
<div id="myDiv"style="position:absolute;" >
<p>movingRight</p>
</div>

</body>
</html>




Answer

I'd use a state based approach and move to another state after every change of direction.

One thing you'd also need to do, that I haven't included in my code below, is to scale either thisLeft or thisTop by the ratio of width to height to get back to the start due to the page not being square.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var thisLeft=0;
var thisTop=0;
var moveID=0;

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

var state = 1;

// Function to move the text
function moveText(){

    var thisText= document.getElementById('myDiv');

    if (state == 1){
        thisLeft += 100; //how much the text moves right

    } else if (state == 2) {
        thisTop +=100; //how much the text moves down

    } else if (state == 3) {
        thisTop -= 100;
        thisLeft -= 100;
    }

    if (state == 1 && thisLeft >= width ){
        state = 2;
        document.getElementById("myDiv").style.color = "blue";
        document.getElementById("myDiv").style.fontSize= "xx-Large";
        document.getElementById('myDiv').innerHTML= "moveDown";
    } else if (state == 2 && (thisTop >= height)) {
        state = 3;
    } else if (state == 3 && (thisLeft <= 0)) {
        state = 0;
    }

    thisText.style.left=thisLeft +"px";
    thisText.style.top=thisTop +"px";
}

// how long it will take the text move to complete
function doMove(){
moveID=setInterval(moveText, 500);
}

</script>
</head>
<body  onload= "doMove()" >
<div id="myDiv"style="position:absolute;" >
<p>movingRight</p>
</div>
</body>
</html>

Example: http://jsbin.com/latotujuga/edit?html,output