Results 1 to 3 of 3

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

  1. #1
    Join Date
    Apr 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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....
    Last edited by jscheuer1; 07-31-2010 at 03:47 AM. Reason: format code

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Apr 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •