Can someone help change this script from working over whole screen to only a div?

**thenderson** · 07-29-2010, 11:29 PM

Its an older file that works pretty good but there is one issue I hope to get some help with. He created the script to work within your whole screen. I have added it to a website and it works pretty well but I am hoping to get it to stay within a <div>. Here is tghe script if anyone might want to take a shot at how to make this work in a container and not the whole screen. I suspect its just a matter of changing the winsize function in it but I have no clue how to do it.

Code:

<script type="text/javascript"> 
//Random Movement 

if ((document.getElementById) && 
window.addEventListener || window.attachEvent){

(function(){

var rm_img = new Image();
rm_img.src = "flyingsaucer1.png"; 

var imgh = 52; 
var imgw = 126; 
var timer = 40; //setTimeout speed.
var min = 1; //slowest speed.
var max = 5; //fastest speed.

var idx = 1;
idx = parseInt(document.images.length);
if (document.getElementById("pic"+idx)) idx++;

var stuff = "<div id='pic"+idx+"' style='position:absolute;"
+"top:2px;left:2px;height:"+imgh+"px;width:"+imgw+"px;"
+"overflow:hidden'><img src='"+rm_img.src+"' alt=''/><\/div>";
document.write(stuff);

var h,w,r,temp;
var d = document;
var y = 2;
var x = 2;
var dir = 45; //direction.
var acc = 1; //acceleration.
var newacc = new Array(1,0,1);
var vel = 1; //initial speed.
var sev = 0;
var newsev = new Array(1,-1,2,-2,0,0,1,-1,2,-2);

//counters.
var c1 = 0; //time between changes.
var c2 = 0; //new time between changes.

var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");

if (domWw) r = window;
else{ 
if (d.documentElement && 
typeof d.documentElement.clientWidth == "number" && 
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{ 
if (d.body && 
typeof d.body.clientWidth == "number")
r = d.body;
}
}



function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView && 
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh - imgh; 
w = rw - imgw;
}
else{
h = r.clientHeight - imgh; 
w = r.clientWidth - imgw;
}
}


function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}


function newpath(){
sev = newsev[Math.floor(Math.random()*newsev.length)];
acc = newacc[Math.floor(Math.random()*newacc.length)];
c2 = Math.floor(20+Math.random()*50);
}


function moveit(){
var vb,hb,dy,dx,curr;
if (acc == 1) vel +=0.05;
if (acc == 0) vel -=0.05;
if (vel >= max) vel = max;
if (vel <= min) vel = min;
c1++;
if (c1 >= c2){
newpath();
c1=0;
}
curr = dir+=sev;
dy = vel * Math.sin(curr*Math.PI/180);
dx = vel * Math.cos(curr*Math.PI/180);
y+=dy;
x+=dx;
//horizontal-vertical bounce.
vb = 180-dir;
hb = 0-dir;
//Corner rebounds?
if ((y < 1) && (x < 1)){y = 1; x = 1; dir = 45;}
if ((y < 1) && (x > w)){y = 1; x = w; dir = 135;}
if ((y > h) && (x < 1)){y = h; x = 1; dir = 315;}
if ((y > h) && (x > w)){y = h; x = w; dir = 225;}
//edge rebounds.
if (y < 1) {y = 1; dir = hb;} 
if (y > h) {y = h; dir = hb;} 
if (x < 1) {x = 1; dir = vb;} 
if (x > w) {x = w; dir = vb;} 

//Assign it all to image.
temp.style.top = y + scrl(0) + pix;
temp.style.left = x + scrl(1) + pix;
setTimeout(moveit,timer);
}

function init(){
temp = document.getElementById("pic"+idx);
winsize();
moveit();
}


if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
} 
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
} 

})();
}//End.
</script>

I apprecite any assistance with this. I'm a newbie but learning....

**vwphillips** · 07-30-2010, 02:39 PM

Code:

 <!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" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<div style='position:absolute;top:100px;left:100px;height:350px;width:350px;overflow:hidden;background-Color:blue;'>
 <div id='m1' style='position:absolute;top:2px;left:2px;height:50px;width:50px;overflow:hidden;background-Color:red;'></div>
 <div id='m2' style='position:absolute;top:2px;left:2px;height:50px;width:50px;overflow:hidden;background-Color:green;'></div>
</div>


<script type="text/javascript">
/*<![CDATA[*/

function MoveIt(o){
 this.obj=document.getElementById(o.ID);
 this.w=o.MaxX;
 this.h=o.MaxY;
 this.ms=o.Timer||40
 this.min=o.MinSpeed||1;
 this.max=o.MaxSpeed||5;
 this.vel=Math.round(this.min+(this.max-this.min)/2);
 this.y = 2;
 this.x = 2;
 var dir=[45,135,225,315];
 this.dir = dir[Math.floor(Math.random()*4)]; //direction.
 this.acc = o.Acceleration||2; //acceleration.
 this.newacc = [1,0,1];
 this.sev = 0;
 this.newsev = [1,-1,2,-2,0,0,1,-1,2,-2];

//counters.
this.c1 = 0; //time between changes.
this.c2 = 0; //new time between changes.
this.moveit();
}

MoveIt.prototype={

 moveit:function(){
  var vb,hb,dy,dx,curr,oop=this;
  if (this.acc == 1) this.vel +=0.05;
  if (this.acc == 0) this.vel -=0.05;
  if (this.vel >= this.max) this.vel = this.max;
  if (this.vel <= this.min) this.vel = this.min;
  this.c1++;
  if (this.c1 >= this.c2){
   this.sev = this.newsev[Math.floor(Math.random()*this.newsev.length)];
   this.acc = this.newacc[Math.floor(Math.random()*this.newacc.length)];
   this.c2 = Math.floor(20+Math.random()*50);
   this.c1=0;
  }
  curr = this.dir+=this.sev;
  dy = this.vel * Math.sin(curr*Math.PI/180);
  dx = this.vel * Math.cos(curr*Math.PI/180);
  this.y+=dy;
  this.x+=dx;
//horizontal-vertical bounce.
  vb = 180-this.dir;
  hb = 0-this.dir;
//Corner rebounds?
  if ((this.y < 1) && (this.x < 1)){this.y = 1; this.x = 1; this.dir = 45;}
  if ((this.y < 1) && (this.x > this.w)){this.y = 1; this.x = this.w; this.dir = 135;}
  if ((this.y > this.h) && (this.x < 1)){this.y = this.h; this.x = 1; this.dir = 315;}
  if ((this.y > this.h) && (this.x > this.w)){this.y = h; this.x = this.w; this.dir = 225;}
//edge rebounds.
  if (this.y < 1) {this.y = 1; this.dir = hb;}
  if (this.y > this.h) {this.y = this.h; this.dir = hb;}
  if (this.x < 1) {this.x = 1; this.dir = vb;}
  if (this.x > this.w) {this.x = this.w; this.dir = vb;}

  this.obj.style.top = this.y + 'px';
  this.obj.style.left = this.x + 'px';
  setTimeout(function(){ oop.moveit(); },this.ms);
 }

}

new MoveIt({
 ID:'m1',
 MaxX:300,
 MaxY:300,
 Timer:40,
 MinSpeed:1,
 MaxSpeed:5,
 Acceleration:2
});

new MoveIt({
 ID:'m2',
 MaxX:300,
 MaxY:300,
 Timer:40,
 MinSpeed:5,
 MaxSpeed:15,
 Acceleration:5
});

/*]]>*/
</script>
</body>

</html>

**thenderson** · 08-01-2010, 05:35 AM

Excellent! And written clearly and usefully. I respect that. Thanks I will check it out...
Thanks

Thread: Can someone help change this script from working over whole screen to only a div?

Thread Tools

Search Thread

Can someone help change this script from working over whole screen to only a div?

Bookmarks

Bookmarks

Posting Permissions