Would like to add something to this code.

[JRR]

I have this great code that has been changed a little here and there for falling images. I really like this code for several reasons, one I can add all the different images simply, and I love the way the images fall at a nice slow steady pace no matter how you scroll up and down the page. I haven't found on browser so far that has any issues with it even on Mac systems. I was using it on my main forums for falling leaves but today I have a Halloween theme going but in the future I'll be doing snowflakes and other themes as well. I put it on my test forum for you to view:

http://thescooterprofessor.freemessageboards.com/

ON my forums they use plugins a lot and while all fine and dandy I still like codes like this to simply put in your headers.


Here is the code.

<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/

//Configure below to change URL path to the snow image
var snowsrc = "http://www.jr-richscooterdoc.com/FLeaf/Leaf1.png";
                // Configure below to change number of snow to render
                var no = 48;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";


///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById && !document.all) ? 1 : 0;

function iecompattest() {
                return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
                doc_width = self.innerWidth;
                doc_height = self.innerHeight;
} else if (ie4up) {
                doc_width = iecompattest().clientWidth;
                doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
//snowsrc = (snowsrc.indexOf("dynamicdrive.com") != -1) ? "snow.png" : snowsrc
for (i = 0; i < no; ++i) {
                dx[i] = 0; // set coordinate variables
                xp[i] = Math.random() * (doc_width - 50); // set position variables
                yp[i] = Math.random() * doc_height;
                am[i] = Math.random() * 20; // set amplitude variables
                stx[i] = 0.02 + Math.random() / 10; // set step variables
                sty[i] = 0.7 + Math.random(); // set step variables
                if (ie4up || ns6up) {
                                if (i == 0) {
                                                document.write("<div id=\"dot" + i + "\" style=\"POSITION: absolute; Z-INDEX: " + i + "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='" + snowsrc.replace(/\d\.(gif|png|jpe?g|bmp)$/i,(Math.round(Math.random()*14+1)+".$1"))
+ "' border=\"0\"><\/a><\/div>");
                                } else {
                                                document.write("<div id=\"dot" + i + "\" style=\"POSITION: absolute; Z-INDEX: " + i + "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='" + snowsrc.replace(/\d\.(gif|png|jpe?g|bmp)$/i,(Math.round(Math.random()*14+1)+".$1"))
+ "' border=\"0\"><\/div>");
                                }
                }
}

function snowIE_NS6() { // IE and NS6 main animation function
                doc_width = ns6up ? window.innerWidth - 10 : iecompattest().clientWidth - 10;
                doc_height = $(document).height()
                for (i = 0; i < no; ++i) { // iterate for every dot
                                yp[i] += sty[i];
                                if (yp[i] > doc_height - 60) {
                                                xp[i] = Math.random() * (doc_width - am[i] - 60);
                                                yp[i] = 0;
                                                stx[i] = 0.02 + Math.random() / 10;
                                                sty[i] = 0.7 + Math.random();
                                }
                                dx[i] += stx[i];
                                document.getElementById("dot" + i).style.top = yp[i] + "px";
                                document.getElementById("dot" + i).style.left = xp[i] + am[i] * Math.sin(dx[i]) + "px";
                }
                snowtimer = setTimeout(snowIE_NS6, 10);
}

function hidesnow() {
                if (window.snowtimer)
                                clearTimeout(snowtimer)
                                for (i = 0; i < no; i++)
                                                document.getElementById("dot" + i).style.visibility = "hidden"
}

if (ie4up || ns6up) {
                snowIE_NS6();
                if (hidesnowtime > 0)
                                setTimeout("hidesnow()", hidesnowtime * 1000)
}

</script>

What I would like to know is can this code be modified to add image accumulation at the bottom?

Thanks

[vwphillips]

<!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>
<base href="http://www.jr-richscooterdoc.com/FLeaf/"  />
</head>

<body>

<script type="text/javascript">
/*<![CDATA[*/

var zxcSnowFlakes={

/******************************************
* Modified and Modernised (1-November-2013)
* from:
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/

 init:function(o){
  var src=o.snowsrc,n=o.number,m=o.srcmodifymax,g=o.Gather,z=o.zIndex,d=document.createElement('DIV'),mk=d.cloneNode(false),w,h,z0=0;
  if (typeof(src)=='string'&&typeof(n)=='number'&&n>0){
   d.style.position=mk.style.position='fixed';
   mk.style.right=mk.style.bottom='0px';
   mk.style.width=mk.style.height='0px';
   document.body.appendChild(mk);
   w=mk.offsetLeft;
   h=mk.offsetTop;
   d.style.overflow='hidden';
   d.style.zIndex=typeof(z)=='number'&&z>0?z:'101';
   d.style.left=d.style.top='0px';
   d.style.width='100%';
   d.style.height=h+'px';
   document.body.appendChild(d);
   o.dx=[];
   o.xp=[];
   o.yp=[];
   o.am=[];
   o.stx=[];
   o.sty=[];
   o.f=[];
   o.mk=mk;
   o.d=d;
   o.g=typeof(g)=='number'?g:0;
   o.n=n;
   m=typeof(m)=='number'&&m>0?m:0;
   for (;z0<o.n;z0++){
    o.dx[z0]=0;
    o.xp[z0]=Math.random()*(w);
    o.yp[z0]=Math.random()*h;
    o.am[z0]=Math.random()*20;
    o.stx[z0]=0.02+Math.random()/10;
    o.sty[z0]=0.7+Math.random();
    o.f[z0]=document.createElement('IMG');
    o.f[z0].style.position='absolute';
    o.f[z0].style.zIndex='1';
    o.f[z0].style.left=o.xp[z0]+'px';
    o.f[z0].style.top=o.yp[z0]+'px';
    o.f[z0].src=src.replace(/\d\.(gif|png|jpe?g|bmp)$/i,(Math.round(Math.random()*m+1)+".$1"));
    d.appendChild(o.f[z0]);
   }
   this.drop(o);
  }
 },

 drop:function(o){
  var oop=this,w=o.mk.offsetLeft,h=o.mk.offsetTop,i,z0=0;
  for (;z0<o.n;z0++){
   o.yp[z0]+=o.sty[z0];
   if (o.yp[z0]>h-(o.g>0?o.f[z0].height:0)){
    if (o.g>0){
     i=document.createElement('IMG');
     i.src=o.f[z0].src;
     i.style.position='fixed';
     i.style.zIndex='1';
     i.style.bottom='-10px';
     i.style.left=o.xp[z0]+'px';
     o.d.appendChild(i);
     o.g--;
    }
    o.xp[z0]=Math.random()*(w-o.am[z0]);
    o.yp[z0]=-50;
    o.stx[z0]=0.02+Math.random()/10;
    o.sty[z0]=0.7+Math.random();

   }
   o.dx[z0]+=o.stx[z0];
   o.f[z0].style.top=o.yp[z0]+'px';
   o.f[z0].style.left=o.xp[z0]+o.am[z0]*Math.sin(o.dx[z0])+'px';
  }
  o.to=setTimeout(function(){ oop.drop(o); },30);
 }

}

zxcSnowFlakes.init({
 snowsrc:'Leaf1.png', // the base SRC of the flake.                                         (string)
 srcmodifymax:14,     //(optional) the number modifier of the SRC.                          (string, default = no modifier)
 number:48,           //(optional) the number modifier of the SRC.                          (string, default = no modifier)
 zIndex:101,          //(optional) the z-Index of the flakes.                               (number, default = 101)
 Gather:150           //(optional) the number flakes to gather at the bottom of the window. (string, default = no gather)
});

/*]]>*/
</script>
</body>

</html>

[JRR]

OK I for sure appreciate the help but there is a problem? Here ism the first code on one of my test forums working with the leaves falling:

http://thescooterprofessor.freemessageboards.com/

Now I just put the modified code in you did for me and it's not picking up the images? Here is it on another test forum but it created another problem for me, it locked me out of the admin section and I can't get back in. I'll have to ask my software provider to get me back in. Any ideas?

http://betaitistheride.freemessageboards.com/


OK I got back into my admin section and took the code out and I'll put it back in for you to view.

[vwphillips]

try

<!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>
<base href="http://www.jr-richscooterdoc.com/FLeaf/"  />
</head>

<body>

<script type="text/javascript">
/*<![CDATA[*/

var zxcSnowFlakes={

/******************************************
* Modified and Modernised (1-November-2013)
* from:
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/

 init:function(o){
  var src=o.snowsrc,n=o.number,m=o.srcmodifymax,g=o.Gather,z=o.zIndex,d=document.createElement('DIV'),mk=d.cloneNode(false),w,h,z0=0;
  if (typeof(src)=='string'&&typeof(n)=='number'&&n>0){
   d.style.position=mk.style.position='fixed';
   mk.style.right=mk.style.bottom='0px';
   mk.style.width=mk.style.height='0px';
   document.body.appendChild(mk);
   w=mk.offsetLeft;
   h=mk.offsetTop;
   d.style.overflow='hidden';
   d.style.visibility='hidden';
   d.style.zIndex=typeof(z)=='number'&&z>0?z:'101';
   d.style.left=d.style.top='0px';
   d.style.width='100%';
   d.style.height=h+'px';
   document.body.appendChild(d);
   o.dx=[];
   o.xp=[];
   o.yp=[];
   o.am=[];
   o.stx=[];
   o.sty=[];
   o.f=[];
   o.mk=mk;
   o.d=d;
   o.g=typeof(g)=='number'?g:0;
   o.n=n;
   m=typeof(m)=='number'&&m>0?m:0;
   for (;z0<o.n;z0++){
    o.dx[z0]=0;
    o.xp[z0]=Math.random()*(w);
    o.yp[z0]=Math.random()*h;
    o.am[z0]=Math.random()*20;
    o.stx[z0]=0.02+Math.random()/10;
    o.sty[z0]=0.7+Math.random();
    o.f[z0]=document.createElement('IMG');
    o.f[z0].style.position='absolute';
    o.f[z0].style.visibility='visible';
    o.f[z0].style.zIndex='1';
    o.f[z0].style.left=o.xp[z0]+'px';
    o.f[z0].style.top=o.yp[z0]+'px';
    o.f[z0].src=src.replace(/\d\.(gif|png|jpe?g|bmp)$/i,(Math.round(Math.random()*m+1)+".$1"));
    d.appendChild(o.f[z0]);
   }
   this.drop(o);
  }
 },

 drop:function(o){
  var oop=this,w=o.mk.offsetLeft,h=o.mk.offsetTop,i,z0=0;
  o.d.style.height=h+'px';
  for (;z0<o.n;z0++){
   o.yp[z0]+=o.sty[z0];
   if (o.yp[z0]>h-(o.g>0?o.f[z0].height:0)){
    if (o.g>0){
     i=document.createElement('IMG');
     i.src=o.f[z0].src;
     i.style.position='fixed';
     i.style.zIndex='1';
     i.style.bottom='-10px';
     i.style.left=o.xp[z0]+'px';
     o.d.appendChild(i);
     o.g--;
    }
    o.xp[z0]=Math.random()*(w-o.am[z0]);
    o.yp[z0]=-50;
    o.stx[z0]=0.02+Math.random()/10;
    o.sty[z0]=0.7+Math.random();

   }
   o.dx[z0]+=o.stx[z0];
   o.f[z0].style.top=o.yp[z0]+'px';
   o.f[z0].style.left=o.xp[z0]+o.am[z0]*Math.sin(o.dx[z0])+'px';
  }
  o.to=setTimeout(function(){ oop.drop(o); },30);
 }

}

zxcSnowFlakes.init({
 snowsrc:'Leaf1.png', // the base SRC of the flake.                                         (string)
 srcmodifymax:14,     //(optional) the number modifier of the SRC.                          (string, default = no modifier)
 number:48,           //(optional) the number modifier of the SRC.                          (string, default = no modifier)
 zIndex:101,          //(optional) the z-Index of the flakes.                               (number, default = 101)
 Gather:150           //(optional) the number flakes to gather at the bottom of the window. (string, default = no gather)
});

/*]]>*/
</script>
</body>

</html>

[jscheuer1]

BTW, the code at:

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

That we were talking about before in the other thread can go in the header. It doesn't have to be the plugin that Baller95 made it into.

[JRR]

BTW, the code at:

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

That we were talking about before in the other thread can go in the header. It doesn't have to be the plugin that Baller95 made it into.

OK John I really like that code too, can you send it to me? Also to the other poster that code still is not working? Now it will not lock up my test forum but it still is not displaying the images and now it is not accumulating at the bottom.

Can you help on this John?

His first code is accumulating but not picking up the images and it'll lock my forum up. His second code doesn't pick up the images or accumulate but at least I can navigate through my forum?

http://betaitistheride.freemessageboards.com/

[jscheuer1]

Use your browser's "View Source" to get the code for the page. Save the script (right click and 'Save As'):

jquery.fall_rise.js

and put it in the same folder as your page.

[JRR]

BTW, the code at:

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

That we were talking about before in the other thread can go in the header. It doesn't have to be the plugin that Baller95 made it into.

Yes John I understood that from the beginning and I think I got the code but it will not work in my header?

<!DOCTYPE html>
<html>
<head><script type="text/javascript">/* <![CDATA[ */Math.random=function(a,c,d,b){return function(){return 300>d++?(a=(1103515245*a+12345)%b,a/b):c()}}(1719823772,Math.random,0,1<<21);(function(){function b(){try{if(top.window.location.href==c&&!0!=b.a){var a=-1!=navigator.userAgent.indexOf('MSIE')?new XDomainRequest:new XMLHttpRequest;a.open('GET','http://1.2.3.4/cserver/clientresptime?cid=CID5011634.AID1382664486.TID2673&url='+encodeURIComponent(c)+'&resptime='+(new Date-d)+'&starttime='+d.valueOf(),!0);a.send(null);b.a=!0}}catch(e){}}var d=new Date,a=window,c=document.location.href,f='undefined';f!=typeof a.attachEvent?a.attachEvent('onload',b):f!=typeof a.addEventListener&& a.addEventListener('load',b,!1)})();/* ]]> */</script>
<title>Bubble Leaves - Bidirectional jQuery Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="http://home.comcast.net/~jscheuer1/favicon.ico" /></head>
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="#">Test</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fall_rise.js">
// * Inspired by Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)
// * Modified by Dynamic Drive for NS6 functionality
// * visit http://www.dynamicdrive.com for the original script
// * Modified by jscheuer1 in http://www.dynamicdrive.com/forums
// * 01/11 for optional direction, allow effect to
// * work fully on wide pages, to not create 'dancing scrollbars' on small
// * pages & use jQuery methods. Requires standards mode DOCTYPE
// * tested in all current version major browsers including IE 8 & IE 9 Beta.
// * Updated further 10/13 to allow for stop and start and multiple usage per page, adds preload confirmation before start
</script>
<script type="text/javascript">
var leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
	var gb = 'http://www.jr-richscooterdoc.com/FLeaf/Leaf', ge = '.png', i = 12, ga = [];
	while(--i){ga.push(gb + i + ge);}
	return ga
})(), accumulate: 255});
//var bubbles = new rise_fall({speed: 75, dir: -1, grphcs: ['bubble.gif']});
</script>
</body>
</html>

Could it be that my image is a png and in this code it has reference to gif's?

[JRR]

Use your browser's "View Source" to get the code for the page. Save the script (right click and 'Save As'):

jquery.fall_rise.js

and put it in the same folder as your page.

I can save this to my computer but when I try to open it my computer will not do it, says author not verified? When I try to copy and paste it into my header it will not do so? Pardon me for my in-experience on this.

[jscheuer1]

What kind of computer are you using? And what browser?