PDA

View Full Version : Autumn Leaves: dynamic Horiz. scroll bar



dleddy
10-29-2007, 08:57 PM
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.

jscheuer1
10-29-2007, 09:15 PM
That's a rather old script. Here is a version that shouldn't have that problem:

http://home.comcast.net/~jscheuer1/side/bubble_leaves_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'.

dleddy
10-30-2007, 02:51 AM
John, (aka Commander Cody), Thanks, for the help.

dleddy
10-30-2007, 04:42 AM
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.

jscheuer1
10-30-2007, 04:50 AM
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.

jscheuer1
10-30-2007, 05:51 AM
Come to think of it, I already did another mod of this script that does work out in IE 7 with a valid DOCTYPE:


<!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>

dleddy
10-30-2007, 04:51 PM
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