Results 1 to 7 of 7

Thread: Autumn Leaves: dynamic Horiz. scroll bar

  1. #1
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Autumn Leaves: dynamic Horiz. scroll bar

    1) Script Title: Autumn Leaves (by Kurt Grigg)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex3/leaves.htm

    3) Describe problem: How can script be modified or variables added to prevent leaves going off right or left sides of visible screen. This causes problem if page includes <div> with overflow:auto causing horizontal scrollbar to dynamically appear, scroll, disappear randomly. An alternative would be what DOM / code could be invoked to prevent horizontal scroll bar at all. Any help for this novice would be appreciated.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's a rather old script. Here is a version that shouldn't have that problem:

    http://home.comcast.net/~jscheuer1/s...s_bidirect.htm

    The bubbles do go up, but you can configure the direction in the source code, and use whatever images (like leaves) you want.

    To get the documented source code, use your browser's 'view source'.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John, (aka Commander Cody), Thanks, for the help.

  4. #4
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi again -- I tried the bubble script, and it works nicely, but did not cure the "dancing scrollbars". After trying a number of things to no avail, I removed the DOCTYPE declaration from the page and it start behaving. This presumably because it cause IE 7beta3 to revert to some compatiblity mode. For purposes of this page, I will just leave the DOCTYPE off. Thanks again.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's most likely due to IE 7 actually being the most compliant MS browser yet. The modified script I linked to was written before IE 7 was even in testing, which gives you idea of how really old the original version was.

    The script could certainly be modified yet again to work without 'dancing scrollbars' in IE 7 under a valid DOCTYPE. I'm just not certain when I, or anyone else might get around to doing so.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Come to think of it, I already did another mod of this script that does work out in IE 7 with a valid DOCTYPE:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title>Falling/Rising - Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    </head>
    <body>
    <script type="text/javascript">
    
    /*
    * Falling/Rising - by John Davenport Scheuer - aka:jscheuer1
    * Very freely adapted from - Autumn leaves - by Kurt Grigg (kurt.grigg@virgin.net)
    * Visit http://www.dynamicdrive.com for TOS.
    * Modified by jscheuer1 in http://www.dynamicdrive.com/forums
    * This credit must remain for legal use.
    */
    
     fall.dir=1     // Set 'falling' direction (1 for down, -1 for up).
     fall.speed=50  // 20 to whatever (70 is pretty slow), higher numbers are slower
     fall.amount=16 // Set max number of images to fall at once, the smaller the images, the higher this can be.
     fall.sway=10   // Set amount of left/right swaying of objects (default=10), higher numbers produce more sway.
     fall.limit=0   // Set number of fallings/risings until effect should end, use 0 for no end.
    
    // Pre-load your image(s) below!
    if(document.images){ // <-- Do Not Edit or remove this line!!!
    fall.grphcs=new Array()
    fall.image0=new Image();
    fall.image0.src=fall.grphcs[0]="al.gif"
    fall.image1=new Image();
    fall.image1.src=fall.grphcs[1]="bl.gif"
    fall.image2=new Image();
    fall.image2.src=fall.grphcs[2]="cl.gif"
    fall.image3=new Image();
    fall.image3.src=fall.grphcs[3]="dl.gif"
    fall.image4=new Image();
    fall.image4.src=fall.grphcs[4]="el.gif"
    fall.image5=new Image();
    fall.image5.src=fall.grphcs[5]="fl.gif"
    
    //////////////// Stop Editing //////////////
    }
    
    fall.prepare=function(){
    fall.di=document.getElementById;
    fall.da=document.all;
    if (!document.images||(!fall.di&&!fall.da))
    return;
    fall.iebod=function(){
    return (document.compatMode && document.compatMode.indexOf('CSS')!=-1)? document.documentElement : document.body;
    }
    fall.get=function(id){return fall.di? document.getElementById(id) : fall.da[id];};
    fall.t1=fall.iebod().scrollWidth;
    document.write('<img id="fall_test" src="'+fall.grphcs[0]+'" style="position:fixed!important;position:absolute;top:-2000px;left:80000px">');
    fall.t2=fall.iebod().scrollWidth;
    if(fall.t2>fall.t1)
    fall.overflows=true;
    fall.get('fall_test').style.left='-2000px';
    fall.zero=(fall.di&&fall.get('fall_test').style.position=='fixed')||(document.defaultView&&document.defaultView.getComputedStyle(fall.get('fall_test'), null).getPropertyValue('position')=='fixed');
    if(fall.get('fall_test').parentNode&&document.createElement)
    fall.get('fall_test').parentNode.removeChild(fall.get('fall_test'));
    
    fall.Ypos=new Array();
    fall.Xpos=new Array();
    fall.Speed=new Array();
    fall.Step=new Array();
    fall.Cstep=new Array();
    
    fall.speed=Math.max(20, fall.speed);
    fall.set_ims();
    }
    fall.set_ims=function(){
    if(fall.overflows||!fall.zero)
    document.write('<div id="fall0" style="position:fixed!important;overflow:hidden;position:absolute;">');
    for (fall.i = 0; fall.i < fall.amount; fall.i++){
    fall.P=Math.floor(Math.random()*fall.grphcs.length);
    document.write('<img alt="" id="si'+fall.i+'" onload="fall.fall_start();" src="'+fall.grphcs[fall.P]+'" style="position:fixed!important;position:absolute;top:-2000px;left:-2000px">');
    }
    if(fall.overflows||!fall.zero)
    document.write('<\/div>');
    
    fall.WinHeight=function(){return window.innerHeight?window.innerHeight:fall.iebod().clientHeight;};
    fall.WinWidth=function(){
    if(window.innerWidth&&fall.iebod().clientWidth)
    return Math.min(window.innerWidth,fall.iebod().clientWidth);
    return window.innerWidth?window.innerWidth:fall.iebod().clientWidth;
    }
    for (fall.i=0; fall.i < fall.amount; fall.i++){                                                                
     fall.Ypos[fall.i] = Math.round(Math.random()*fall.WinHeight());
     fall.Xpos[fall.i] = Math.round(Math.random()*fall.WinWidth());
     fall.Speed[fall.i]= (Math.random()*5+3)*fall.dir;
     fall.Cstep[fall.i]=0;
     fall.Step[fall.i]=Math.random()*0.1+0.05;
    }
    }
    
    fall.falls=0;
    function fall(){
    var fac, cont=0, s='style', d='display', f=fall.dir, w=fall.WinWidth, h=fall.WinHeight;
    var hscrll=fall.zero?0:typeof window.pageYOffset=='number'?window.pageYOffset:fall.iebod().scrollTop?fall.iebod().scrollTop:0;
    var wscrll=fall.zero?0:typeof window.pageXOffset=='number'?window.pageXOffset:fall.iebod().scrollLeft?fall.iebod().scrollLeft:0;
    for (var i=0; i < fall.amount; i++){
    if(fall.overflows||!fall.zero){
    var sc = fall.get('fall0');
    sc[s].top=hscrll+'px';
    sc[s].left=wscrll+'px';
    sc[s].width=w()+'px';
    sc[s].height=h()+'px';
    }
    var sy = fall.Speed[i]*Math.sin(90*Math.PI/180);
    var sx = fall.Speed[i]*Math.cos(fall.Cstep[i]);
    fall.Ypos[i]+=sy;
    fall.Xpos[i]+=sx*fall.sway*0.1;
    fac=fall.get('si'+i).offsetHeight;
    if (fall.Ypos[i] > h()&&f>0||fall.Ypos[i] < fac*-1 && f<0){
    fall.Xpos[i]=Math.round(Math.random()*w());
    fall.Speed[i]=(Math.random()*5+3)*f;
    }
    if(i==fall.amount-1&&(fall.Ypos[i] > h()&&f>0||fall.Ypos[i] < fac*-1 && f<0))
    fall.falls++;
    fall.Ypos[i]=(fall.Ypos[i] > h()&&f>0)? fac*-1 : (fall.Ypos[i] < fac*-1 && f<0)? h()+fac : fall.Ypos[i];
    if(fall.limit&&fall.falls>fall.limit&&((f>0&&fall.Ypos[i]==fac*-1)||(f<0&&fall.Ypos[i]==h()+fac)))
    fall.get('si'+i)[s][d]='none';
    fall.df=fall.da&&!fall.di||window.opera&&(typeof opera.version=='undefined'||opera.version()<9)? (f<0?fac*2:fac):0;
    fall.get('si'+i)[s].left=fall.df? Math.min(fall.Xpos[i], w()-fall.get('si'+i).offsetWidth)+'px' : fall.Xpos[i]+'px';
    fall.get('si'+i)[s].top=fall.Ypos[i]-fall.df+'px';
    for (var j = 0; j < fall.amount; j++)
    if (fall.get('si'+j)[s][d]!='none')
    cont=1;
    if(!cont){
    clearInterval(fall.fall);
    if(fall.overflows||!fall.zero)
    sc[s][d]='none';
    }
    fall.Cstep[i]+=fall.Step[i];
    }
    }
    fall.starting=1;
    fall.fall_start=function(){
    if (fall.started||fall.amount>fall.starting++)
    return;
    fall.started=true;
    fall.fall=setInterval('fall()', fall.speed);
    };
    fall.prepare();
    
    </script>
    </body>
    </html>
    Last edited by jscheuer1; 10-30-2007 at 05:15 PM. Reason: fix minor strict code violation
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks - I'll give this a try (and maybe look at the differences and learn something in the process)
    Don E.

    -P.S. Works beautifully in IE 7 (beta 3), and Opera 8 - very nice 3-D effect when falling leaves pass over and under each other. Firefox 2 works also, but some strange graphic rendering problems as traces of images (leaves or window edges /scroll bars) follow the main image
    Last edited by dleddy; 10-30-2007 at 05:40 PM. Reason: Add comments

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
  •