Results 1 to 3 of 3

Thread: images make pages scroll

  1. #1
    Join Date
    Dec 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default images make pages scroll

    We have added "Autumn Leaves" from the Special Document Effects page. The images go beyond the size of our page and make the scroll bars temporarily appear, thus making our page look like it is jumping left and right. We are using Chrome, but have had the same effect in FF and IE. Can you point me to the section of code that controls the width of the area the falling leaves will cover? The code from you site is below. Thank you for any help!

    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]="al.gif";
    Image1=new Image();
    Image1.src=grphcs[1]="bl.gif"
    Image2=new Image();
    Image2.src=grphcs[2]="cl.gif"
    Image3=new Image();
    Image3.src=grphcs[3]="dl.gif"
    Image4=new Image();
    Image4.src=grphcs[4]="el.gif"
    Image5=new Image();
    Image5.src=grphcs[5]="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;
    }
    if (ns){
    document.layers['sn'+i].left=Xpos[i];
    document.layers['sn'+i].top=Ypos[i]+hscrll;
    }
    else if (ns6){
    document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
    document.getElementById("si"+i).style.top=Ypos[i]+hscrll;
    }
    else{
    eval("document.all.si"+i).style.left=Xpos[i];
    eval("document.all.si"+i).style.top=Ypos[i]+hscrll;
    } 
    Cstep[i]+=Step[i];
    }
    setTimeout('fall()',20);
    }
    
    window.onload=fall
    //-->
    </script>

  2. #2
    Join Date
    Feb 2016
    Posts
    57
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Not sure if this will help as still a rookie to this javascript but:

    look at the style= and change the position to absolute
    maybe add si.style.width = ""; (whatever pixel size you want)

    I could be way off with these, but hope that may push you in the right direction. Can you let me know if you get it working and whether i was close or not. Thanks

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,880
    Thanks
    49
    Thanked 265 Times in 257 Posts
    Blog Entries
    56

    Default

    Try to replace
    Code:
    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>');
    }
    with
    Code:
    else{
    document.write('<div style="position: absolute; left:0; top:0; right:0; bottom:0; overflow: hidden"><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></div>');
    }
    That should do it.

Similar Threads

  1. make rain/snow effect w/o images scroll entire page
    By Victorianmom in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-29-2010, 06:40 PM
  2. how can i make Div scroll horizontal
    By wael in forum Looking for such a script or service
    Replies: 3
    Last Post: 07-20-2009, 10:18 AM
  3. Replies: 1
    Last Post: 09-08-2008, 05:18 AM
  4. Does it make my pages slow?
    By Aloha Kay in forum CSS
    Replies: 11
    Last Post: 04-11-2007, 02:51 AM
  5. Replies: 5
    Last Post: 05-26-2005, 03:21 PM

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
  •