Would like to add something to this code.

[JRR]

John I use a HP Pavillion with Windows 8.1 and IE11.

[jscheuer1]

You might have better luck with a different browser. But you should be able to save the file by right clicking on it and choosing "Save As". Once you have the file, you should be able to edit it with NotePad. There may be warnings, ignore those or chose the "do it anyway" option. If all else fails, copy and paste the .js from here:

/* 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 */

function rise_fall(opts){
	this.init(opts);
}

(function($){
	rise_fall.prototype = {
		defaults: { //these items may be set in the on page call
			dir: 1,    // Set the direction (1 for down, -1 for up)
			speed: 20,  // 12 to whatever (60 is pretty slow) higher numbers are slower
			Amount: 18, // Smoothness depends on image file size, the smaller the size the more you can use!
			sway: 6,  // Set amount of left/right swaying of objects (default = 10), higher numbers produce more sway
			zIndex: 1, // Set z-index value for image overlay
			//Pre-load your image(s) below! 6 is an optimal number for variety. Use just one for uniformity.
			grphcs: [
				"al.gif",
				"bl.gif",
				"cl.gif",
				"dl.gif",
				"el.gif",
				"fl.gif" //<-- no trailing comma after last image
			]
		},

		//////////////// Stop Editing //////////////

		loadem: function(){
			var i = this.grphcs.length, c = i, rf = this;
			while(--i > -1){
				$(new Image()).bind('load error', function(){
					if(!--c){rf.makeem();}
				}).attr('src', this.grphcs[i]);
			}
		},
		$master: $('<div style="position:fixed;top:0;left:0;"></div>'),
		WinHeight: $(window).height(),
		WinWidth: $(window).width(),
	
		makeem: function(){
			var i = this.Amount, els = [], rf = this;
			this.grphcs.sort(function(){return 0.5 - Math.random();});
			while (--i > -1){
				this.els.push($('<img alt="" src="' + this.grphcs[i % this.grphcs.length] + '" style="position:fixed;top:0;left:0;">').appendTo(this.$master));
				this.Ypos.push(Math.floor(Math.random()*this.WinHeight));
				this.Xpos.push(Math.floor(Math.random()*this.WinWidth));
				this.Speed.push((Math.random()*5+3)*this.dir);
				this.Cstep.push(0);
				this.Step.push(Math.random()*0.1+0.05);
			}
			$('body').append(this.$master.css({zIndex: this.zIndex}));
			this.moveem();
			this.inst = setInterval(function(){rf.moveem();}, this.speed);
		},
		moveem: function(){
			this.WinHeight = $(window).height();
			this.WinWidth = $(window).width();
			var i = this.Amount, sy, sx, w, h, cloned;
			while (--i > -1){
				sy = this.Speed[i]*Math.sin(90*Math.PI/180);
				sx = this.Speed[i]*Math.cos(this.Cstep[i]);
				w = this.els[i].width();
				h = this.els[i].height();
				this.Ypos[i] += sy;
				this.Xpos[i] += sx * this.sway * 0.1; 
				if (this.Ypos[i] > this.WinHeight && this.dir === 1 || this.Ypos[i] < -h && this.dir === -1){
					this.Xpos[i] = Math.round(Math.random() * this.WinWidth);
					this.Speed[i] = (Math.random() * 5 + 3) * this.dir;
				}
				this.Ypos[i] = (this.Ypos[i] > this.WinHeight && this.dir === 1)? -h : (this.Ypos[i] < -h && this.dir === -1)? this.WinHeight + h : this.Ypos[i];
				sx = Math.min(this.WinWidth, this.Xpos[i]);
				sy = this.Ypos[i];
				if(this.dir === 1 && sy > this.WinHeight - h && this.accumulate && !this.els[i].data('cloned')){
					this.clones.push(this.els[i].data({cloned: true}).clone().css({top: 'auto', bottom: 0, zIndex: -1}).appendTo(this.$master));
					(function(el){
						setTimeout(function(){el.data({cloned: false});}, 2000);
					})(this.els[i].css({visibility: 'hidden'}));
					while(this.clones.length > this.accumulate){
						(this.clones.shift()).fadeOut('slow', function(){$(this).remove();});
					}
				} else if(sy === -h) {
					this.els[i].css({visibility: 'visible'})
				}
				this.els[i].css({left: sx, top: sy});
				this.Cstep[i] += this.Step[i];
			}
		},
		stop: function(hide){
			var rf = this;
			if(hide){
				$.each(this.els, function(i, el){el.fadeOut(1000);});
				$.each(this.clones, function(i, el){el.fadeOut(1000);});
			}
			setTimeout(function(){clearInterval(rf.inst); hide && $.each(rf.clones, function(i, el){el.hide();});}, hide? 1000 : 0);
		},
		restart: function(fresh){
			clearInterval(this.inst);
			if(fresh){
				$.each(this.els, function(i, el){el.remove();});
				$.each(this.clones, function(i, el){el.remove();});
				this.init(this.cObj);
			} else {
				$.each(this.els, function(i, el){el.show();});
				$.each(this.clones, function(i, el){el.show();});
				var rf = this;
				this.inst = setInterval(function(){rf.moveem();}, this.speed);
			}
		},
		init: function(cObj){
			cObj = cObj && cObj.constructor === Object? cObj : {};
			this.cObj = cObj;
			$.extend(this, this.defaults, cObj);
			this.Ypos = []; this.Xpos = []; this.Speed = []; this.Step = []; this.Cstep = []; this.els = []; this.clones = [];
			this.loadem();
		}
	};
})(jQuery);

[JRR]

Thanks John and you earlier mentioned that this code can be put in the headers and not a plugin and that was always my intention. I'm not a big plugin fan even though I do use some of them. Why?

One most of the plugins are made from javascript code to start with and on the old software that PB is leaving V4 they all worked great in the headers but now with the new V5 the system wants you to get away from header code and use plugins. All find and dandy except for a few reasons just like the other day. I have this crawler plugin on my main forum that someone helped me make a plugin out of even though I can use it as a header code with uploading some of it on my own server. I used it like that on V4 until I converted to V5 which all PB will be using by the end of this year, V4 will be gone. This is it working on my main forum right here:

http://www.thescooterprofessor.proboards.com/

Now just 3 days ago for to me at the time no apparent reason it went whacko and the names above the images were all off center badly. Long story short PB done what they call "push" and made some server changes that in this case effected some plugins. Solution, change the plugin to make it work correctly again to their changes. This rarely happens when using header codes.

Second every forum is allowed only so many plugins and if you go over the limit you pay for them, simply put.

Third I like theses kind of codes even though I know little about them but I am learning quickly. I do try to read a lot about how to do these and try things myself before I ask for help. When I see how to fix or change something I do keep track of how for future reference.

On the code you just sent me that Baller made his plugin out of I do not like the limit of six images. He did this because he was making this work with 6 or 7 different themes in the plugin. PB limits plugins to 50 images total so by using that many themes of about 8 he is pretty much limited to 6 images per theme.

I like my code that I listed to start this thread because I can add as many images I like by just putting them in my image host and using one link in the code. It's easy to add or subtract the number images I want and I can put as many as I want in my image host but choose the number I want the code to pick up. As we mentioned it can be just put in the header, I have no intention of making a plugin out of it. If I'm tired of it for a spell just remove it for another day.

Second just like Ballers plugin I can change my themes, just download the images I want in my image host, put the proper link in code and the amount I want and put it in the header. I am putting in images now for themes from Christmas to July 4th, the sky is the limit and the images will always be in my image host. This gives me the same flexibility as his plugin but again with more images and I'm not limited in any way with a header code like he is on a plugin.

Third on this code I along with some of my members do not like the way the images act on the plugin. Baller liked the way they fell but I do not. His images as you scroll up or down the page move with the page. On my code the images continue to fall and never change no matter how you scroll up and down the page. It did act like his code at first but I got that changed and my members were more happy.

So my single hope and request in this thread was/is to see if my code I listed can be modified to accumulate at the bottom like the code you gave Baller for his plugin. I think the other gentleman is getting close? On his first code that he told me to try it accumulates at the bottom nicely but it has two problems, one it is not picking up the images from my host. Two it locks up my forum in a way that I have to go in the back door to just get in the admin section to take it out. In other words if you try to click on any function you can't it wont work, the code messes up this. His second code suggestion won't lock up the forum but it still will not pick up the images, nor will they accumulate at the bottom.

I would really like to make my code work. I will put that code back in here for you to see:

http://betaitistheride.freemessageboards.com/



Thanks for reading this long winded post.

[jscheuer1]

If you put the code from my previous post in the head of your page, it has to come after the external script tag for jQuery (that's already on the page). It also has to be inside its own script tags:

<script type="text/javascript">
the code goes here
</script>

Finally you would need to initialize it after that:

<script type="text/javascript">
var leaves;
jQuery(function($){
	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});
});
</script>

[JRR]

OK John got it and here's a look on my test forum.

http://betaitistheride.freemessageboards.com/

So I've only got one question, I understand the speed setting, accumulation setting, even the sway and size but I'm not sure about adding additional images? Would one modify this part of the code?

                                                 //Pre-load your image(s) below! 6 is an optimal number for variety. Use just one for uniformity.
                                                grphcs: [
                                                                "al.gif",
                                                                "bl.gif",
                                                                "cl.gif",
                                                                "dl.gif",
                                                                "el.gif",
                                                                "fl.gif" //<-- no trailing comma after last image

Now take a look at my other test forum with the code I opened the thread with:

http://thescooterprofessor.freemessageboards.com/

If you watch closely and count you'll see 15 different leaves falling. I like the way they slowly fall and don't even care for the sway but if it's added that will be fine because you can change the settings but I really like the accumulation thing especially for snowflakes and leaves.

Thanks

[jscheuer1]

The section of code in your post is from the defaults of the script. I set (and you copied setting) the images here:

<script type="text/javascript">
var leaves;
jQuery(function($){
	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});
});
</script>

What that does is grab Leaf1.png through Leaf11.png inclusive. But you could list them separately, add or remove images, or even use a completely different set of images. To list them separately there, you can:

<script type="text/javascript">
var leaves;
jQuery(function($){
	leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: [
		'http://www.jr-richscooterdoc.com/FLeaf/Leaf1.png',
		'http://www.jr-richscooterdoc.com/FLeaf/Leaf2.png',
		'http://www.jr-richscooterdoc.com/FLeaf/Leaf3.png',
		'http://www.jr-richscooterdoc.com/FLeaf/Leaf4.png',
		'http://www.jr-richscooterdoc.com/FLeaf/Leaf5.png',
		'http://www.jr-richscooterdoc.com/FLeaf/Leaf6.png',
		'http://www.jr-richscooterdoc.com/FLeaf/Leaf7.png',
		'http://www.jr-richscooterdoc.com/FLeaf/Leaf8.png',
		'http://www.jr-richscooterdoc.com/FLeaf/Leaf9.png',
		'http://www.jr-richscooterdoc.com/FLeaf/Leaf10.png',
		'http://www.jr-richscooterdoc.com/FLeaf/Leaf11.png'
	], accumulate: 255});
});
</script>

[JRR]

Yes sir I understand what you did to make that code pick up the 11 images and in my host I now have leaf 12 to 15 added and using the old code you simple change the numbers to make the code pick up the 15 images:

                                                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>");
                                }

As you can see in two places in that old code I have 14 + 1 with the one being the Leaf1 image the code and in my image host. So when you made the change to this other code at the time I had only 11 images but later I added four more. I think 15 different images does a real nice job.

So I figured that to add 4 more images to this code it was just a matter of changing the number in the code somewhere to make it add or pick up 4 more images. I can and will put in every image url link if I have to but this is another thing I like about the other code and the way you also just used one image link and it picks the others images as long as they are numbered correctly in the image host. In other words how do you make it grab Leaf1 png to Leaf15 png inclusive?

[jscheuer1]

<script type="text/javascript">
var leaves;
jQuery(function($){
	leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
		var gb = 'http://www.jr-richscooterdoc.com/FLeaf/Leaf', ge = '.png', i = 16, ga = [];
		while(--i){ga.push(gb + i + ge);}
		return ga;
	})(), accumulate: 255});
});
</script>

That will grab Leaf1 to Leaf15 inclusive.

Oh, and I've been meaning to ask you. Are those public domain leaves? Can I copy and use them in my live demos?

[JRR]

Awesome so let me be clear, the number you changed in red to 16 is how to change the number of images to grab them inclusively? So for instance say I have 20 images in my host on a theme like Leaves or Christmas but I only at the time want 12 of them to fall or the code to grab 12 images then I would set that number to 13 which is one more than the total of 12 I want to grab? If it works like this then that's a very big bonus because it allows you to store more images on your host and then put it on the forum and decide at the time like " no 10 isn't enough I should increase it to 14?" Then you would just change the number in the code and wala! 14 would appear! Correct?

Oh and on the leaves by all means use them John! They are public domain that I found on various free image sites on the net.

OH one last thing I forgot to ask? In your code it has the array section listed as gif images yet it works with my image link inclusively with png type images. Does this code need to be modified for all images like in my old code to make it work with all image formats?

                                                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>");

You an see where this one was fixed for several formats, if that is not a issue then fine.

Thanks!

[jscheuer1]

The types of images that can be used are only limited by the browsers being used to view the images, and by common sense. For something small like that you would usually want to use a GIF or PNG image. But any other browser supported format will work.

This code (the image part is highlighted):

<script type="text/javascript">
var leaves;
jQuery(function($){
	leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
		var gb = 'http://www.jr-richscooterdoc.com/FLeaf/Leaf', ge = '.png', i = 16, ga = [];
		while(--i){ga.push(gb + i + ge);}
		return ga;
	})(), accumulate: 255});
});
</script>

is customized. You can see where and how the speed, sway, Amount, and, accumulate are set. The way I chose to set the grphcs in this case is known as a self executing anonymous function. It's like a regular function, but it runs right away and delivers its results instead of itself to the code. The main features of it are:

var gb = 'http://www.jr-richscooterdoc.com/FLeaf/Leaf', ge = '.png', i = 16,

gb is the beginning, ge is the end, i is the number we start subtracting from. While i - 1 exists (is more than 0) we loop:

while(--i){ga.push(gb + i + ge);}

So the first one this will grab is http://www.jr-richscooterdoc.com/FLeaf/Leaf15.png and the last one will be http://www.jr-richscooterdoc.com/FLeaf/Leaf1.png. After that i - 1 will be 0 so it will stop. Along the way it will get 14, 13, 12, etc.

It puts each one of these in the ga array then returns it where it becomes the grphcs array for that fall_rise instance.

If you want it to grab a different type of file, you would have to change the ge to - say, '.gif'

If you want it to grab files from a different folder with a different first part in their filename, you would have to change gb.

And, as I said before, you don't have to use that code for the grphcs array, you can list them separately as I mention and show in one of my other recent posts in this thread.