Results 1 to 5 of 5

Thread: autumn leave problem

  1. #1
    Join Date
    Jun 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default autumn leave problem

    Hi All,

    I have autum leave javascript in my website downloaed from here. It is showing scrolling bar horizontally and veritically in ie, i don't understand why. It is worst with firefox,it let me scroll down way further than I should have been able to.

    Could any one would be able to guide me how should I solve this problem. The site in problem is

    http://yogaforfun.netne.net/

    Thanks and Regards
    Gauri

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

    Default

    Code:
    <script language="JavaScript1.2">
    
    //Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)
    //Modified by Dynamic Drive for NS6 functionality
    //visit http://www.dynamicdrive.com for this script
    
    //Pre-load your image below!
    grphcs=new Array(6)
    Image0=new Image();
    Image0.src=grphcs[0]="http://yogaforfun.netne.net/images/al.gif";
    Image1=new Image();
    Image1.src=grphcs[1]="http://yogaforfun.netne.net/images/bl.gif"
    Image2=new Image();
    Image2.src=grphcs[2]="http://yogaforfun.netne.net/images/cl.gif"
    Image3=new Image();
    Image3.src=grphcs[3]="http://yogaforfun.netne.net/images/dl.gif"
    Image4=new Image();
    Image4.src=grphcs[4]="http://yogaforfun.netne.net/images/el.gif"
    Image5=new Image();
    Image5.src=grphcs[5]="http://yogaforfun.netne.net/images/fl.gif"
    Amount=8; //Smoothness depends on image file size, the smaller the size the more you can use!
    Ypos=new Array();
    Xpos=new Array();
    Speed=new Array();
    Step=new Array();
    Cstep=new Array();
    ns=(document.layers)?1:0;
    ns6=(document.getElementById&&!document.all)?1:0;
    
    if (ns){
    for (i = 0; i < Amount; i++){
    var P=Math.floor(Math.random()*grphcs.length);
    rndPic=grphcs[P];
    document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
    }
    }
    else{
    document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i = 0; i < Amount; i++){
    var P=Math.floor(Math.random()*grphcs.length);
    rndPic=grphcs[P];
    document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
    }
    document.write('</div></div>');
    }
    WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
    WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
    for (i=0; i < Amount; i++){
     Ypos[i] = Math.round(Math.random()*WinHeight);
     Xpos[i] = Math.round(Math.random()*WinWidth);
     Speed[i]= Math.random()*5+3;
     Cstep[i]=0;
     Step[i]=Math.random()*0.1+0.05;
    }
    function fall(){
    var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
    var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
    var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
    var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
    for (i=0; i < Amount; i++){
    sy = Speed[i]*Math.sin(90*Math.PI/180);
    sx = Speed[i]*Math.cos(Cstep[i]);
    Ypos[i]+=sy;
    Xpos[i]+=sx;
    if (Ypos[i] > WinHeight){
    Ypos[i]=-60;
    Xpos[i]=Math.round(Math.random()*WinWidth);
    Speed[i]=Math.random()*5+3;
    }
    var img=document.getElementById("si"+i);
    img.style.left=Math.min(WinWidth,Xpos[i])-img.width;
    img.style.top=Ypos[i]+hscrll-img.height;
    Cstep[i]+=Step[i];
    }
    setTimeout('fall()',20);
    }
    
    window.onload=fall
    //-->
    
    </script>
    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
    Jun 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks vik. It is fixed. Could you please explain that piece of code. I am just beginner for javascript but not new to programming.

    Regards
    Gauri

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

    Default

    gauri_agr

    the code you are using is very old.

    all modern browsers recognise getElementByID so I removed the obsolete alternatives.

    also the code did not account for the image width and height.

    DD should update the code as it is effective but among other things, makes all variables global(bad practice)

    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>
    <script language="JavaScript1.2">
    
    //Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)
    //Modified by Vic Phillips (19-August-2009)
    
    var ImgAry=[];
    ImgAry[0]="http://yogaforfun.netne.net/images/al.gif";
    ImgAry[1]="http://yogaforfun.netne.net/images/bl.gif"
    ImgAry[2]="http://yogaforfun.netne.net/images/cl.gif"
    ImgAry[3]="http://yogaforfun.netne.net/images/dl.gif"
    ImgAry[4]="http://yogaforfun.netne.net/images/el.gif"
    ImgAry[5]="http://yogaforfun.netne.net/images/fl.gif"
    
    // optional preload code
    for (var SRCAry=[],z0=0;z0<ImgAry.length;z0++){
     SRCAry[z0]=new Image();
     SRCAry[z0].src=ImgAry[z0];
    }
    
    function AutumnLeaves(imgary,nu){
     var p=zxcES('DIV',{position:'absolute',top:'0px',left:'0px'},document.body);
     this.nu=nu||10;
     this.imgs=[];
     this.Ypos=[];
     this.Xpos=[];
     this.Speed=[];
     this.Cstep=[];
     this.Step=[];
     for (var z0=0;z0<nu;z0++){
      this.imgs[z0]=zxcES('IMG',{position:'absolute',top:'0px',left:'0px'},p);
      this.imgs[z0].src=imgary[Math.floor(Math.random()*imgary.length)]
      this.Ypos[z0] = Math.round(Math.random()*zxcWWHS()[1]);
      this.Xpos[z0] = Math.round(Math.random()*zxcWWHS()[0]);
      this.Speed[z0]= Math.random()*5+3;
      this.Cstep[z0]=0;
      this.Step[z0]=Math.random()*0.1+0.05;
     }
     this.Drop();
    }
    
    
    AutumnLeaves.prototype.Drop=function(){
     var oop=this,wd=zxcWWHS();
     for (var sx,sy,i=0; i <this.nu; i++){
      sy = this.Speed[i]*Math.sin(90*Math.PI/180);
      sx = this.Speed[i]*Math.cos(this.Cstep[i]);
      this.Ypos[i]+=sy;
      this.Xpos[i]+=sx;
      if (this.Ypos[i] > wd[1]){
       this.Ypos[i]=-60;
       this.Xpos[i]=Math.round(Math.random()*wd[0]);
       this.Speed[i]=Math.random()*5+3;
      }
      var img=this.imgs[i];
      img.style.left=Math.min(wd[0],this.Xpos[i])-img.width+'px';
      img.style.top=this.Ypos[i]+wd[3]-img.height+'px';
      this.Cstep[i]+=this.Step[i];
     }
     this.to=setTimeout(function(){ oop.Drop(); },20);
    }
    
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    
    function zxcES(ele,style,par,txt){
     if (typeof(ele)=='string') ele=document.createElement(ele);
     for (key in style) ele.style[key]=style[key];
     if (par) par.appendChild(ele);
     if (txt) ele.appendChild(document.createTextNode(txt));
     return ele;
    }
    
    
    window.onload=function(){
     var a=new AutumnLeaves(ImgAry,8)
     }
    //-->
    
    </script></head>
    
    <body>
    <div style="height:1000px;" ></div>
    </body>
    
    </html>
    Last edited by vwphillips; 08-19-2009 at 12:11 PM.
    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/

  5. #5
    Join Date
    Jun 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanksa a lot vik

    Regards
    Gauri

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
  •