4thorder(TM) - Code Snippets and Full Scripts

Stopping a moving cursor (hiding elements)

Question:

Hello everyone and thank you for reading this post.

I'm not very familiar with Java script and I have this code:

Code:

<SCRIPT language="JavaScript1.2">
/*
Floating Spirit
*/
var cursorpath;
if(Math.random() > 0.5)
{
cursorpath="images/roomba.gif"; 
}
else
{
cursorpath="images/roomba.gif"; 
}

if (document.layers)
{document.write("<LAYER NAME='PoInTeRs' LEFT=10 TOP=10><img src='"+cursorpath+"' width=115 height=137></LAYER>")}
else if (document.all){document.write("<div id='pOiNtErS' style='position:absolute;top:10px;left:10px;width:  127px;height:126px;z-index:50'><img src='"+cursorpath+" 'width=127 height=126></div>")}
count=-1; 
move=1;
function Curve(){
abc=new Array(0,1,1,1,2,3,4,0,6,-1,-1,-1,-2,-3,-4,0,-6)
for (i=0; i < abc.length; i++)
{var C=Math.round(Math.random()*[i])}
howbend=abc[C];
setTimeout('Curve()',1900);
return howbend;
}
ypos=10;
xpos=10;
degree = 60;
function MoveRandom(){
PathBend=degree+=howbend;//ok!
y = 4*Math.sin(PathBend*Math.PI/180);
x = 6*Math.cos(PathBend*Math.PI/180);
if (document.layers){
ypos+=y;
xpos+=x;
document.PoInTeRs.top=ypos+window.pageYOffset;
document.PoInTeRs.left=xpos+window.pageXOffset;
}
else if (document.all){
ypos+=y;
xpos+=x;
document.all.pOiNtErS.style.top=ypos+document.body.scrollTop;
document.all.pOiNtErS.style.left=xpos+document.body.scrollLeft;
}
T=setTimeout('MoveRandom()',50);
}
function edges(){
if (document.layers){
if (document.PoInTeRs.left >= window.innerWidth-40+window.pageXOffset)degree=Math.round(Math.random()*45+157.5);
if (document.PoInTeRs.top >= window.innerHeight-30+window.pageYOffset)degree=Math.round(Math.random()*45-112.5);
if (document.PoInTeRs.top <= 2+window.pageYOffset) degree = Math.round(Math.random()*45+67.5);//OK!
if (document.PoInTeRs.left <= 2+window.pageXOffset) degree = Math.round(Math.random()*45-22.5);//OK!
}
else if (document.all)
{
if (document.all.pOiNtErS.style.pixelLeft >= document.body.offsetWidth-45+document.body.scrollLeft)degree=Math.round(Math.random()*45+157.5);
if (document.all.pOiNtErS.style.pixelTop >= document.body.offsetHeight-35+document.body.scrollTop)degree=Math.round(Math.random()*45-112.5);
if (document.all.pOiNtErS.style.pixelTop <= 2+document.body.scrollTop) degree = Math.round(Math.random()*45+67.5);//OK!
if (document.all.pOiNtErS.style.pixelLeft <= 2+document.body.scrollLeft) degree = Math.round(Math.random()*45-22.5);//OK!
}
setTimeout('edges()',100);
}
function starteffect(){
Curve();
MoveRandom();// onUnload="opener.gO()"
edges();
}
if (document.all||document.layers)
window.onload=starteffect
</script>

Which floats an object around the page. You may see it in action here:
http://www.skysnet.com/clients/roomba/

Now, since this can be annoying for the visitor, I want them to be able to stop the script by clicking on the image or pressing Escape or something like that. But I honestly have no idea how to do it.

I would greatly appreciate any help.

Answer:

First off your ORIGINAL script doesnt seem to work in netscape or firefox and I havent taken the time to figure out why.

Nevertheless, this is what I would do:

Add these two functions to script

Code:

function stop()
{
document.getElementById('PoInTeRs').style.display='none'
}
function restart()
{
document.getElementById('PoInTeRs').style.display='inline'
}

And something like this to the body:

Code:

<P><INPUT onClick="stop()" type="button" value="stop"></P>
<P><INPUT onClick="restart()" type="button" value="restart"></P>

That way you can stop or start the image. your not really stopping the script just turning off the display of the image.

Also you can add something other than buttons to start or stop the action.

DEMO HERE

Top of Page