Autumn Leaves

[Baller95]

Thanks John. Strangely, it works on my iPad (Safari) but not on my laptop when using the latest version of FF & IE.

[jscheuer1]

Yes that is strange. I'm not sure which browsers are "getting it right" (works in Chrome too), but I'm pretty sure Chrome and Safari are. The default z-index is supposed to be 1, which is enough to put the accumulating leaves above the other positioned elements on the page. But, perhaps because the leaves are positioned fixed, IE and the Fox need the z-index specified.

I've now added it as a configuration option here:

(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 op . . .

And utilized it here:

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

I've updated the live script:

http://home.comcast.net/~jscheuer1/s...y.fall_rise.js

with these changes as well, in case anyone else wants it, or you want to see the actual code.

The value can be increased if need be either in the defaults section there, or as part of the configuration object passed with a new fall_rise call.

For your example page there, 1 should be fine.

[Baller95]

Perfect, works like a charm! Thanks John

[JRR]

This is cool! Have you checked this out yet on W8.1 with IE11? Just upgraded to this. Hi Baller95!

[Baller95]

This is cool! Have you checked this out yet on W8.1 with IE11? Just upgraded to this. Hi Baller95!

Hey JRR! Yes it works with all latest browsers (on Windows 8.1) and I'm working on making a plugin with the new code but it's much harder than with the older code.

[JRR]

Hey did you read my last PM on how I can't add any more images? Do you mind if I ask John about this?

[Baller95]

Hey did you read my last PM on how I can't add any more images? Do you mind if I ask John about this?

I've replied to you, check your inbox! :P

[JRR]

Yes I just did and I think Eton is too busy right now so I'm going to put this up for John to look at. Now Baller if you remember Eton help modify a old code from here that I am currently using on my forum it is in the main header:

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

Now here is the code it was again changed from the original and if you watch on my forum you'll see and count 11 different leaves. I can put in cows if I want.

<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 = 36;
// 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()*10+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()*10+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>

Now take note that only one image url is inserted at the top and that's it. This code was set up for only one image but has been changed so that with the right number settings it will automatically pick up other images you have in your picture host as long as you have them named the same and numbered in sequence like Leaf1, Leaf2 etc.







Now to add or take away on the number of images that fall you edit in two places here the numbers







(Math.random()*10+1)+".$1"))







Since I have 11 leaves you can clearly see 10 + 1 the one being the url I put in the code and the other 10 being the other ten leaves 2 thru 10 in my image hositing site




Now there is another part of this code that plays a important part in how the leaves fall or how many you will see. If this number is not high enough the code may start cutting down the number of images you see. This part of the code is this at the top on line 8.







var no = 36;




Now with just one image the number is 10 but the more you add the higher the number, why? It's like rolling dice, if you say roll a six and the number is 10 then you have 10 more chances to roll a six, but if you increase the number to 20 then you doubled the odds of rolling a six again. With 11 leaves in this code if you drop the number to 30 you will only see 10 leaves fall at any given time, I know I've played wit this a lot! LOL.


So with the code you currently have in the plugin you let me use to add images there is a problem. The code no matter how many images you add in any section will only show 6 or I have been able to cheat it up to 8 but I know what I'm doing is not the right way of going about it. In that code there is no variable to make it pick up all the images it sees and puts what images it want to on the page. I know the leaf numbers by heart and you can open my home page and see a certain number of leaves and the next time you will see different leaves. One time you may see say leaf one and six and the next time you may see number four and nine? Again out of the 11 images I have put in the code I have no way of making it see all 11 at once?

[JRR]

I've replied to you also.

[Baller95]

Do you mind if I ask John about this?

Oops I missed this, yeah definitely ask John, he'll be able to help