Home/ Questions/Q 9165875
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T15:00:45+00:00

The issue I am having is that if the animation is not allowed to

  • 0

The issue I am having is that if the animation is not allowed to finish it will glitch.
Other than that everything works how I planned. Also if you see any room for improvement that could be made to the “physics” to make it look a little more natural or exciting feel free to toss that in there! Also I am new to javascript so formatting advice would be greatly appreciated!! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Click Move</title>
<script type="text/javascript">
document.onmousedown = getCursorXY;

function getCursorXY(e) {
var cursorX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft :document.body.scrollLeft);
var cursorY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
positionMessage(cursorX,cursorY);
}



function positionMessage(cursorX,cursorY){
if (!document.getElementById) return false;
if (!document.getElementById("message")) return false;
var elem = document.getElementById("message");
elem.style.position = "absolute";
moveElement("message",cursorX,cursorY,20);
}





function moveElement(elementID,cursorX,cursorY,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);

if (xpos == cursorX && ypos == cursorY) {
    return true;
}
if (xpos < cursorX) {
    var dist = Math.sqrt(cursorX - xpos);
    xpos += dist;
}
if (xpos > cursorX) {
    var dist = Math.sqrt((xpos - cursorX));
    xpos -=  dist;
}
if (ypos < cursorY) {
    var dist = Math.sqrt((cursorY - ypos));
    ypos +=  dist;
}
if (ypos > cursorY) {
    var dist = Math.sqrt((ypos - cursorY));
    ypos -= dist;
} 

elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+cursorX+","+cursorY+","+interval+")";
movement = setTimeout(repeat,interval);
}

function updateSpan(element){
message = document.getElementById("message");
newMessage = document.getElementById(element.id);
message.innerHTML = newMessage.id;

}


</script>

<style type="text/css">
#message {
width: 90px;
height: 50px;
background:#999;
z-index: 20;
}

#blue_box {
position: absolute;
top: 100px;
left: 100px;
width: 60px;
height: 50px;
background:#03F;
}

#red_box {
position: absolute;
top: 200px;
left: 100px;
width: 60px;
height: 50px;
background:#F00
}
</style>
</head>

<body>
<div id="message" style="top:50px; left:100px;">WEEEEE!!!!!</div>

<div id="blue_box" onclick="updateSpan(this)">Blue_Box</div>
<div id="red_box" onclick="updateSpan(this)">Red_Box</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    add this as the first line in your function:

    clearTimeout(movement);

    function:

    function getCursorXY(e) {
clearTimeout(movement);
var cursorX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft :document.body.scrollLeft);
var cursorY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
positionMessage(cursorX,cursorY);
}

    and then place this above your getCursorXY function:

    var movement;

    • 0