PDA

View Full Version : Autumn Leaves



Metermaid
10-02-2013, 11:22 AM
1) Script Title: Autumn Leaves

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

3) Describe problem: I can see the leaves queued up top left but they don't fall - no pun intended! LOL

Link to my test forum: http://testingwellies.proboards.com

Beverleyh
10-02-2013, 11:40 AM
The link you posted only goes to a login page that doesn't contain the script.

Metermaid
10-02-2013, 11:53 AM
Ooops sorry - sorted now.

jscheuer1
10-02-2013, 12:38 PM
This is an old script and was written for quirks mode. The page you're using it on is in standards mode. You can use this update:

http://home.comcast.net/~jscheuer1/side/bubble_leaves_bidirect.htm

Use your browser's "View Source" to get the code.

I know, the demo is bubbles moving up, but in the configuration you can change the images as well as the direction, and a few other things.

Any questions. just let me know.

Metermaid
10-02-2013, 01:18 PM
Thanks John - I'll give it a try.

Metermaid
10-02-2013, 01:29 PM
Working a treat now thanks John. :cool:

jscheuer1
10-02-2013, 02:25 PM
That page takes forever to load, and the leaves won't start falling until it does. You might want to change this in the script:


window.onload=fall;

(since you already have jQuery on the page) to:


jQuery(fall);

which will execute it once the document has been parsed.

But that might be too soon - the leaf images might not have loaded yet. If so and it looks bad, we can modify the script to delay either execution or revealing itself until they are loaded.

Metermaid
10-02-2013, 02:42 PM
The leaves certainly start falling much sooner now, John. :)

jscheuer1
10-02-2013, 03:35 PM
Good, I thought of another improvement after testing in IE 10. It seems that IE 9 and greater can handle the "ns6" way of working things and behave better with it (prevents the page from getting larger and smaller when the leaves cross over the right and bottom edges - aka "dancing scrollbars"). To take advantage of that, add the highlighted, as shown:


Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all||window.opera)?1:0;
var newie = /MSIE (\d+)/.exec(navigator.userAgent);
if(newie && newie[1] > 8){ns6 = true;}
speed=ns6? speed-12 : speed

IE 8 and less still need the old IE methods and will use them. For some reason though they, IE 8 at least, have a problem with the page getting larger and smaller as mentioned above. The script was supposed to prevent that, but IE 6 was the latest IE browser at that time, probably still works fine in it. If I see an easy fix, I'll let you know.

Metermaid
10-02-2013, 04:19 PM
I'll add that as you have suggested. I'm a Mac Safari user by the way. :)

Baller95
10-18-2013, 06:26 PM
Any questions. just let me know.

Hello John, I noticed when scrolling the page up, the falling images go up as well. Is there a way to fix this?

Thanks :)

jscheuer1
10-19-2013, 03:03 AM
Since browsers that don't recognize fixed positioning are now rare (IE 6 and less). You could change position absolute to position fixed and eliminate the consideration of the page's scroll state in determining where the images should be at any given moment. Yep, seems to work:

http://home.comcast.net/~jscheuer1/side/bubble_leaves_bidirect_fixed.htm

Baller95
10-19-2013, 03:56 PM
John, I've changed the original "absolute" to "fixed" but that didn't work.

I changed this -


document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');

To this -


document.write('<div style="position:fixed;top:0px;left:0px"><div style="position:relative">');

Is there something else I have to change?

jscheuer1
10-19-2013, 04:04 PM
Use the updated code found here:

http://home.comcast.net/~jscheuer1/side/bubble_leaves_bidirect_fixed.htm

Use the browser's "View Source" to get it.

Baller95
10-19-2013, 04:07 PM
Hmm, it still isn't working like the demo page John. Will using CSS (to automatically resize the images) affect this?

Baller95
10-19-2013, 04:11 PM
Oops, never mind. It's working :)

Thanks John!

Baller95
10-20-2013, 08:40 PM
John, I've just realized that the leaves kinda disappear as they get to the bottom of the screen, they don't fall right off the screen like before. Do you know why?

djr33
10-20-2013, 09:50 PM
I assume this is because the space for the animation is limited to the size of the window. It should be possible to adjust this so it is like the top, but that would require changing the math just a bit. John should be able to answer this better than me, but at least I can, for the moment, clarify why that isn't especially unexpected. The only problem might be keeping the scrolling as-is rather than having the window resize every time they go below the space available; browsers might not like allowing them to slide off the page, rather than extending the scrollable region.

Baller95
10-20-2013, 10:07 PM
Thanks Daniel! It's not much of an issue and coming to think of it, I think it's fine how it is. :)

jscheuer1
10-21-2013, 04:04 AM
You might like:

http://home.comcast.net/~jscheuer1/side/fall_rise_jq.htm

djr33
10-21-2013, 05:07 AM
That's pretty cool. Could you (without too much trouble) add a fade as the leaves are at the bottom?

Metermaid
10-21-2013, 06:35 AM
You might like:

http://home.comcast.net/~jscheuer1/side/fall_rise_jq.htm

I like that effect. :)

Metermaid
10-21-2013, 06:36 AM
The leaves accumulating at the bottom is what they do in reality, as with snow I'd really like it! :cool:

jscheuer1
10-21-2013, 08:33 AM
Right, and for that other person who wanted them to slide off the screen, if s/he wants them not to accumulate, in this version where it has:


rise_fall.init({speed: 60, Amount: 10, accumulate: 255});

Make that:


rise_fall.init({speed: 60, Amount: 10});

And they will slide off the screen at the bottom.

It should be easy to have them fade, I guess you mean as they're lying there they could get a little dimmer? Right now, though you have to watch it for awhile and need to pay pretty close attention to see it happening, once the leaves reach the accumulate limit set in the init, they will start to disappear (fade out) but usually from so deep in the pile you can't tell. But there always seem to be some you can see if you're watching closely as they fade away. With a lower accumulate number, like - say 55, it's much easier to see them fading out.

Baller95
10-21-2013, 12:05 PM
Great stuff John, thanks for that! :)

Baller95
10-22-2013, 05:43 PM
You might like:

http://home.comcast.net/~jscheuer1/side/fall_rise_jq.htm

The leaves don't seem to be accumulating for me. Is there anything I need to change?

Baller95
10-22-2013, 05:46 PM
Is there a way to integrate the accumulating into this code?


function iecompattest() {
return (document.compatMode && document.compatMode.indexOf("CSS") != -1) ? document.documentElement : document.body
}

Ypos = new Array();
Xpos = new Array();
Speed = new Array();
Step = new Array();
Cstep = new Array();
ns = (document.layers) ? 1 : 0;
ns6 = (document.getElementById && !document.all || window.opera) ? 1 : 0;
var newie = /MSIE (\d+)/.exec(navigator.userAgent);
if (newie && newie[1] > 8) {
ns6 = true;
}
speed = ns6 ? speed - 12 : speed

if (ns) {
for (i = 0; i < Amount; i++) {
var P = Math.floor(Math.random() * grphcs.length);
rndPic = grphcs[P];
document.write("<LAYER NAME='sn" + i + "' LEFT=0 TOP=0><img src=" + rndPic + "></LAYER>");
}
} else {
document.write('<div style="position:fixed;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++) {
var P = Math.floor(Math.random() * grphcs.length);
rndPic = grphcs[P];
document.write('<img id="si' + i + '" src="' + rndPic + '" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight = (ns || ns6) ? window.innerHeight : window.iecompattest().clientHeight - 66;
WinWidth = (ns || ns6) ? window.innerWidth - 70 : window.iecompattest().clientWidth - 66;
for (i = 0; i < Amount; i++) {
Ypos[i] = Math.round(Math.random() * WinHeight);
Xpos[i] = Math.round(Math.random() * WinWidth);
Speed[i] = (Math.random() * 5 + 3) * dir;
Cstep[i] = 0;
Step[i] = Math.random() * 0.1 + 0.05;
}

function fall() {
var WinHeight = (ns || ns6) ? window.innerHeight : window.iecompattest().clientHeight - 66;
var WinWidth = (ns || ns6) ? window.innerWidth - 70 : window.iecompattest().clientWidth - 66;
var hscrll = (ns || ns6) ? window.pageYOffset : iecompattest().scrollTop;
var wscrll = (ns || ns6) ? window.pageXOffset : iecompattest().scrollLeft;
for (i = 0; i < Amount; i++) {
sy = Speed[i] * Math.sin(90 * Math.PI / 180);
sx = Speed[i] * Math.cos(Cstep[i]);
Ypos[i] += sy;
Xpos[i] += sx * sway * 0.1;
if (Ypos[i] > WinHeight && dir == 1 || Ypos[i] < 0 && dir == -1) {
Xpos[i] = Math.round(Math.random() * WinWidth);
Speed[i] = (Math.random() * 5 + 3) * dir;
}
Ypos[i] = (Ypos[i] > WinHeight && dir == 1) ? -60 : (Ypos[i] < 0 && dir == -1) ? WinHeight + 60 : Ypos[i];
if (ns) {
document.layers['sn' + i].left = Xpos[i] + wscrll;
document.layers['sn' + i].top = Ypos[i] + hscrll;
} else if (ns6) {
var dirFac = dir == 1 ? 60 : 200
document.getElementById("si" + i).style.left = Math.min(WinWidth, Xpos[i]) + 'px';
document.getElementById("si" + i).style.top = Ypos[i] - dirFac + 'px';
} else {
document.all["si" + i].style.left = Xpos[i] + 'px';
document.all["si" + i].style.top = Ypos[i] + 'px';
}
Cstep[i] += Step[i];
}
setTimeout('fall()', speed);
}

jQuery(fall);

jscheuer1
10-23-2013, 12:10 AM
Not really. Get rid of all of that and use the latest code:

http://home.comcast.net/~jscheuer1/side/fall_rise_jq_ssmu.htm

script is here (right click and 'Save As'):

http://home.comcast.net/~jscheuer1/side/jquery.fall_rise.js

There are many configuration options including the ability to have two or more fallings/risings going on at once. But generally you will want only one, for leaves, use only the highlighted, comment out the other one as shown in red:


<script type="text/javascript">
var leaves = new rise_fall({speed: 60, sway: 20, Amount: 10, accumulate: 255});
//var bubbles = new rise_fall({speed: 75, dir: -1, grphcs: ['bubble.gif']});
</script>

Baller95
10-24-2013, 11:21 PM
John I need it all in one script, I can't do two scripts.

jscheuer1
10-25-2013, 03:44 AM
Why not?

djr33
10-25-2013, 05:03 AM
And what's stopping you from combining them? (Just add the contents of one on to the end of the other, although technically the order might matter, so follow the order given here.) There are rarely problems that come from that, so you can test it out and see if there's a problem.

Baller95
10-25-2013, 11:57 AM
Why not?


And what's stopping you from combining them? (Just add the contents of one on to the end of the other, although technically the order might matter, so follow the order given here.) There are rarely problems that come from that, so you can test it out and see if there's a problem.

Hmm, I'll play around with it a little more and see if it works and I'll report back.

Baller95
10-25-2013, 03:35 PM
So I have this in a JavaScript component but I just can't get it to work! :(


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

//Pre-load your image(s) below! 6 is an optimal number for variety. Use just one for uniformity.
grphcs: [
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif";
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif";
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif";
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif";
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif";
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif"
]
},

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

loadem: function(){
var i = this.grphcs.length, c = i, rs = this;
while(--i > -1){
$(new Image()).bind('load error', function(){
if(!--c){rs.makeem();}
}).attr('src', this.grphcs[i]);
}
},
$master: $('<div style: "position:fixed,top:0,left:0;">'),
WinHeight: $(window).height(),
WinWidth: $(window).width(),

makeem: function(){
var i = this.Amount, els = [], rs = 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);
this.moveem();
this.inst = setInterval(function(){rs.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){
clearInterval(this.inst);
if(hide){
$.each(this.els, function(i, el){el.hide();});
$.each(this.clones, function(i, el){el.hide();});
}
},
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 rs = this;
this.inst = setInterval(function(){rs.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);
var leaves = new rise_fall({speed: 60, sway: 20, Amount: 10, accumulate: 255});

jscheuer1
10-25-2013, 05:08 PM
That code requires jQuery. So, if you're locked in to having it all in one place, you need a copy of jQuery before all of that. But jQuery is hosted on Google's servers, so, you could just use the external script tag as shown in the demo.

Oh, and if you're only using the one image, you only need to list it once in the array. And the array separator is a comma, not a semi-colon. But for just the one image, you don't need any separator:


//Pre-load your image(s) below! 6 is an optimal number for variety. Use just one for uniformity.
grphcs: [
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif"
]

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Baller95
10-25-2013, 05:42 PM
Thanks John. So this new code is jQuery and the others weren't? The only reason I want this new code is for it's ability to accumulate. The ability to fall up and down at the same time is cool too.

I've created a plugin for my forum and other forums using the other code. Here's the link to my forum with my falling leaves plugin using the older code - http://www.inspiredsciforum.com

I'm trying to get the new code working on my test forum but it's not working - http://inspiredtestforum.proboards.com

If you want to see what my working plugin looks like and how the plugin builder works, feel free to join my test forum and I can give you administrator permissions.

jscheuer1
10-25-2013, 06:57 PM
Good news, the page already has jQuery on it, just make sure this script comes after that. Looks like it does. This script should be the last thing before the closing </body> tag of the page. Move (don't copy, move it) this:


<script type="text/javascript" src="http://s29136.storage.proboards.com/5399136/j/LdpC_6aN2x7cr2Yc8rJ8.js" data-plugin="15" data-component="29"></script>


to right before:


</body>
</html>

If you cannot place it there, change this:


var leaves = new rise_fall({speed: 60, sway: 20, Amount: 10, accumulate: 255});

to:


var leaves;
jQuery(function($){
leaves = new rise_fall({speed: 60, sway: 20, Amount: 10, accumulate: 255});
});



You still have semi-colons, where there should be commas, change:


grphcs: [
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif";
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif";
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif";
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif";
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif";
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif"
]

to:


grphcs: [
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif",
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif",
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif",
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif",
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif",
"http://images2.layoutsparks.com/1/167200/love-fall-maple-leaf.gif"
]

The browser cache may need to be cleared and/or the page refreshed to see changes.

Baller95
10-25-2013, 07:47 PM
John, I can't move the HTML code so I changed the second part and corrected the last part but still no luck :(

Also, why is there an option for speed, sway & amount twice?

jscheuer1
10-26-2013, 12:57 AM
I did not tell you to remove the highlighted:


this.loadem();
}
};
})(jQuery);
var leaves;
jQuery(function($){
leaves = new rise_fall({speed: 60, sway: 20, Amount: 10, accumulate: 255});
});

Replace it.

The browser cache may need to be cleared and/or the page refreshed to see changes.

there could still be other problems, but that has to be fixed first and might be the only remaining problem.

As to your other question, the script may be configured either by changing the defaults, or by passing in a configuration object with the new rise_fall call. If the latter is used, it's values take precedence over the default ones. Any value not specified in the configuration object reverts to the default.

Baller95
10-26-2013, 01:10 AM
Thanks John that's kinda fixed it!

If you have a look at the forum the leaves accumulate under the boards which end up hiding them - http://inspiredtestforum.proboards.com

jscheuer1
10-26-2013, 04:43 AM
I had a typo (since fixed on the live version) in the script, which you copied, here:


$master: $('<div style: "position:fixed,top:0,left:0;">'),

That should be:


$master: $('<div style="position:fixed;top:0;left:0;"></div>'),

That should take care of it. If not we will have to add some z-index there and/or for the image tags that are generated later.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Baller95
10-26-2013, 03:47 PM
Thanks John. Strangely, it works on my iPad (Safari) but not on my laptop when using the latest version of FF & IE.

jscheuer1
10-26-2013, 04:30 PM
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/side/jquery.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
10-26-2013, 05:12 PM
Perfect, works like a charm! Thanks John :)

JRR
10-26-2013, 07:19 PM
This is cool! Have you checked this out yet on W8.1 with IE11? Just upgraded to this. Hi Baller95!

Baller95
10-26-2013, 07:29 PM
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
10-26-2013, 07:42 PM
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
10-26-2013, 07:58 PM
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
10-26-2013, 08:20 PM
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
10-26-2013, 08:25 PM
I've replied to you also.

Baller95
10-26-2013, 08:37 PM
Do you mind if I ask John about this?

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

jscheuer1
10-26-2013, 08:56 PM
There seems to be some question here about the number of images with this latest code. First you have to understand that there are two ways to count images:

1.) The number of different images
2.) The number of images falling at once

So you could have only one image and have 10 of them falling at a time. The defaults in the script are currently set to 6 images falling 18 at a time:


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
]
},

See, Amount is 18, and there are 6 images. You can set these however you want. I think that what JRR might want is:


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: 36, // 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: [
"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" //<-- no trailing comma after last image
]
},

But remember that the defaults are overridden in the call, and in the call on the demo we have:


leaves = new rise_fall({speed: 60, sway: 20, Amount: 10, accumulate: 255});

So, either make that 36 as well or get rid of it.

Baller95
10-26-2013, 09:50 PM
John, going back to the previous code, it doesn't appear that the images are continually falling correctly while scrolling the page as seen on my forum - http://inspiredsciforum.com/


function iecompattest() {
return (document.compatMode && document.compatMode.indexOf("CSS") != -1) ? document.documentElement : document.body
}

Ypos = new Array();
Xpos = new Array();
Speed = new Array();
Step = new Array();
Cstep = new Array();
ns = (document.layers) ? 1 : 0;
ns6 = (document.getElementById && !document.all || window.opera) ? 1 : 0;
var newie = /MSIE (\d+)/.exec(navigator.userAgent);
if (newie && newie[1] > 8) {
ns6 = true;
}
speed = ns6 ? speed - 12 : speed

if (ns) {
for (i = 0; i < Amount; i++) {
var P = Math.floor(Math.random() * grphcs.length);
rndPic = grphcs[P];
document.write("<LAYER NAME='sn" + i + "' LEFT=0 TOP=0><img src=" + rndPic + "></LAYER>");
}
} else {
document.write('<div style="position:fixed;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++) {
var P = Math.floor(Math.random() * grphcs.length);
rndPic = grphcs[P];
document.write('<img id="si' + i + '" src="' + rndPic + '" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight = (ns || ns6) ? window.innerHeight : window.iecompattest().clientHeight - 66;
WinWidth = (ns || ns6) ? window.innerWidth - 70 : window.iecompattest().clientWidth - 66;
for (i = 0; i < Amount; i++) {
Ypos[i] = Math.round(Math.random() * WinHeight);
Xpos[i] = Math.round(Math.random() * WinWidth);
Speed[i] = (Math.random() * 5 + 3) * dir;
Cstep[i] = 0;
Step[i] = Math.random() * 0.1 + 0.05;
}

function fall() {
var WinHeight = (ns || ns6) ? window.innerHeight : window.iecompattest().clientHeight - 66;
var WinWidth = (ns || ns6) ? window.innerWidth - 70 : window.iecompattest().clientWidth - 66;
var hscrll = (ns || ns6) ? window.pageYOffset : iecompattest().scrollTop;
var wscrll = (ns || ns6) ? window.pageXOffset : iecompattest().scrollLeft;
for (i = 0; i < Amount; i++) {
sy = Speed[i] * Math.sin(90 * Math.PI / 180);
sx = Speed[i] * Math.cos(Cstep[i]);
Ypos[i] += sy;
Xpos[i] += sx * sway * 0.1;
if (Ypos[i] > WinHeight && dir == 1 || Ypos[i] < 0 && dir == -1) {
Xpos[i] = Math.round(Math.random() * WinWidth);
Speed[i] = (Math.random() * 5 + 3) * dir;
}
Ypos[i] = (Ypos[i] > WinHeight && dir == 1) ? -60 : (Ypos[i] < 0 && dir == -1) ? WinHeight + 60 : Ypos[i];
if (ns) {
document.layers['sn' + i].left = Xpos[i] + wscrll;
document.layers['sn' + i].top = Ypos[i] + hscrll;
} else if (ns6) {
var dirFac = dir == 1 ? 60 : 200
document.getElementById("si" + i).style.left = Math.min(WinWidth, Xpos[i]) + 'px';
document.getElementById("si" + i).style.top = Ypos[i] - dirFac + 'px';
} else {
document.all["si" + i].style.left = Xpos[i] + 'px';
document.all["si" + i].style.top = Ypos[i] + 'px';
}
Cstep[i] += Step[i];
}
setTimeout('fall()', speed);
}

jQuery(fall);

JRR
10-26-2013, 11:38 PM
Good Evening John.

I don't want to hijack this thread so if I need to start another say so. You are correct, I want to see "different" images not the same image 18 times or the same 6 over and over. If I put 11 "different" image codes in I want to be able to sit and watch all 11 of them fall and randomly is ok. I just want to know that there are 11 "different" images.

I will go back to this old code and as I stated before it has been changed to make just this happen in a unique way. One places the first image in the top part of the code which as you can see I have done. I use my own server/image host to host my images:



//Configure below to change URL path to the snow image
var snowsrc = "http://www.jr-richscooterdoc.com/FLeaf/Leaf1.png";



Now as I stated I do not have to do what you suggested with the other code of Baller95. As long as I put the other images in my host with the same exact url but numbered from say in this case Leaf2.png then I can put as many as I want in and in this case I chose 11 different leaves. I also do not according to this code size them over 40px because the max is 60px and that accounts for the scroll bar width which with W8.1 is 17px. The code is set for the scroll bar at 15px so adding 40px to 15px = 55px. If you go over the max image size if 60px the scroll bar and page will jump.

Now to get it to use the 11 "different" leaves I do my math in the code in two places:


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

The 1 = the image url of Leaf1 and the 10 = Leaf2 to Leaf11 which again are on my image host and not in the code itself.

Now here is one cool part of this code and it's the line 8 of the code "var no =" If you just decide to use one image then set it to the original setting on 10 and move on. I have worked with this a lot. I know these leaves and numbers by heart. So to see 11 different leaves the minimum you can set the "var no =" is 36, you can go higher and you may see one image more than another?

The way it was explained to me is it's like rolling dice. Say you roll a six on your first roll and set this number to 10 then there is a one in ten chance you'll roll a six again so the same with seeing the image. If you set the number to 20 you have doubled the odds and so forth.

Now what is cool about this is for instance if someone complained for example and said there are too many leaves I could just go change this to a lower number, that's all. I wouldn't have to do anything like delete images on my host just lower this number. I know if you set it to 34 it will drop a leaf and you can set ther for 3 days and only count 10 "different" leaves.

Also the problem with the leaves moving as you scroll was also on this code but it was corrected by changing part of the old code from this:



doc_height = (window.innerHeight && snowdistance == "windowheight") ? window.innerHeight : (ie4up && snowdistance == "windowheight") ? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance == "pageheight") ? iecompattest().scrollHeight : iecompattest().offsetHeight;


To this:



doc_height = $(document).height()


With this the leaves will continue to fall no mater if you scroll the page up or down.

I'm wondering if this code can be made into a plugin also?

Thanks.

jscheuer1
10-27-2013, 01:07 AM
John, going back to the previous code, it doesn't appear that the images are continually falling correctly while scrolling the page as seen on my forum


Good Evening John.

I don't want to hijack this thread so if I need to start another say so. You are correct, I want to see "different" images not the same image 18 times or the same 6 over and over. If I put 11 "different" image codes in I want to be able to sit and watch all 11 of them fall and randomly is ok. I just want to know that there are 11 "different" images.

I will go back to this old code

Let's stick with the latest code. Use that. If there's still a problem, let me know.

JRR
10-27-2013, 01:22 AM
Thanks John, I'll just watch this and see how it plays out.

jscheuer1
10-27-2013, 05:55 AM
Oh, and there is another way (many really) of specifying the images. After all, it's just an array. So any method that yields an array of images will do. For instance one could do:


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

demo:

http://home.comcast.net/~jscheuer1/side/jrr_fall_rise_jq_ssmu.htm

Metermaid
10-27-2013, 09:28 AM
Looks good John - bit too much sway for me though. :)

jscheuer1
10-27-2013, 11:24 AM
Windy day. :)

jscheuer1
10-27-2013, 12:00 PM
Somethings else I usually mention whenever this comes up (it allways comes up in the fall for leaves and in winter for snow), this is CPU intensive and distracting/annoying to the visitor. The more images you have, and the more they accumulate, the slower the response from the CPU. Sometimes this is enough to slow down the leaves over time. And/or slow down performance of the computer in general while this effect is going on in a browser.

Those are the reasons why I've added the ability to stop and start these things independently of the page load or parse events. Once you've started one and assigned it to a variable name, you can stop it with varname.stop(), which will stop the motion, or varname.stop(true), which will stop it and hide the images. So for example you could do:


leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
var gb = 'leafimages/Leaf', ge = '.png', i = 12, ga = [];
while(--i){ga.push(gb + i + ge);}
return ga
})(), accumulate: 100});
setTimeout(function(){leaves.stop(true)}, 6000);

And they would stop and disappear after 6 seconds, freeing up the CPU, and letting the visitor see the page without distraction.

You can restart them with leaves.restart() or leaves.restart(true). The first will resume them from where they were, the second will wipe out everything and start over.

So, you could have a button or link on the page whose onclick event was to restart them if the user wants to.

Metermaid
10-27-2013, 12:15 PM
Windy day. :)

Of course! http://i493.photobucket.com/albums/rr297/WWWF_08/Smileys/windy4.gif

JRR
10-27-2013, 04:04 PM
Oh, and there is another way (many really) of specifying the images. After all, it's just an array. So any method that yields an array of images will do. For instance one could do:


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

demo:

http://home.comcast.net/~jscheuer1/side/jrr_fall_rise_jq_ssmu.htm


A little confused here John (born that way) is this way of making all of the different leaves I want to show for Baller95's code or was you referring to the other code I mentioned? Either way I want to use it. If this is referring to Baller95's code where do I insert this at and if the one I mentioned the same question? That is cool!

jscheuer1
10-27-2013, 04:23 PM
I'm dealing only with the latest code. Baller95 had a demo of that as what he calls a plugin. But I see he's playing around with it and that it's not working at the moment. Perhaps when he sees my latest demo, he will figure it out.

JRR
10-27-2013, 05:12 PM
Yes John and I am on the same forum as him and we both have forums of our own along with test forums. On his original plugin it is set to display 6 different images and of course it has a variable of how many is on the page at a time. I asked him about putting more "different" images on the plugin and he graciously sent me the plugin to edit to my desires to add more images but as you know we both ran into the problem of making it scroll or drop more different images. In that demo you just put up I see all 11 of my leaves falling and that's why I asked about how to put this in the code because I have the same plugin that he gave me.

That also means I have the same issue of the leaves moving up or down the page when you are scrolling the page up or down instead of them just falling no matter how you move the page.

jscheuer1
10-27-2013, 05:31 PM
It's hard for me to tell you what to do without it getting confused with what Baller95 is telling you to do.

Let's let him ask the questions for now. When he had it working, his adaptation of the latest script could have used that code (from my last post) to do that (the demo in my last post).

JRR
10-27-2013, 05:35 PM
I understand thanks.

Metermaid
10-27-2013, 08:24 PM
Yes John and I am on the same forum as him and we both have forums of our own along with test forums. On his original plugin it is set to display 6 different images and of course it has a variable of how many is on the page at a time. I asked him about putting more "different" images on the plugin and he graciously sent me the plugin to edit to my desires to add more images but as you know we both ran into the problem of making it scroll or drop more different images. In that demo you just put up I see all 11 of my leaves falling and that's why I asked about how to put this in the code because I have the same plugin that he gave me.

That also means I have the same issue of the leaves moving up or down the page when you are scrolling the page up or down instead of them just falling no matter how you move the page.

I'm on the same forum too, and have my own forum and test forum. ;)

JRR
10-27-2013, 08:59 PM
Yes Hi Rita!

Baller95
10-27-2013, 11:51 PM
John, why can't I use if statements in the new code? Also, for things like amount, speed, etc I'm trying to use variables but they don't work. It's really hard making a plugin with this code. The one I'm using on my actual forum works great and was much easier to make as a plugin.


Yeah we're all coming from ProBoards :P

jscheuer1
10-28-2013, 07:45 AM
You can if the syntax is correct. The most recent code is setup like a standard jQuery plugin in that it has defaults and takes configuration options which will override those defaults as an argument. So, although they could be inserted if done so in a syntactically correct manner, you don't really need if statements within the defaults object. Any property of the defaults object which also appears within the configuration object will be overridden by it. In other words, the config object takes precedence and the defaults are just there as fallbacks in case no value is specified for that property in the config.

The net effect is as though, for every item in the defaults object the script is already performing an if action, which is:


If there's no value set for this option in the config object, use this value.

The config object is in the new rise_fall() call and can include any or all of the properties that appear in the defaults. Those that are included will override the defaults for that call. If it's absent, it's assumed to be empty and no substitutions will be made. Example config objects (each config object is highlighted):


leaves = new rise_fall({speed: 60, Amount: 10, accumulate: 255});


bubbles = new rise_fall({speed: 75, sway: 20, dir: -1, grphcs: ['bubble.gif']});


leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
var gb = 'leafimages/Leaf', ge = '.png', i = 12, ga = [];
while(--i){ga.push(gb + i + ge);}
return ga;
})(), accumulate: 100});

Baller95
10-28-2013, 03:24 PM
John, here's my current functional code. I've made my plugin using this code and the only way for it to correctly function is by using if statements and other variables.


var dir = proboards.plugin.get('falling_images').settings.fall_direction;
var speed = proboards.plugin.get('falling_images').settings.fall_speed || 80;
var Amount = proboards.plugin.get('falling_images').settings.image_amount || 10;
var sway = proboards.plugin.get('falling_images').settings.sway_amount || 10;
var plugin = proboards.plugin.get('falling_images');
var settings = plugin.settings;
var images = plugin.images;
var grphcs = new Array(6);

if (proboards.data('route').name == 'home' || settings.placement == "2") {

if (settings.preset_images == "1") {
grphcs[0] = images.n1;
grphcs[1] = images.n2;
grphcs[2] = images.n3;
grphcs[3] = images.n2;
grphcs[4] = images.snow1;
grphcs[5] = images.snow2;
} else if (settings.preset_images == "2") {
grphcs[0] = images.v1;
grphcs[1] = images.v2;
grphcs[2] = images.v3;
grphcs[3] = images.v4;
grphcs[4] = images.v5;
grphcs[5] = images.v6;
} else if (settings.preset_images == "3") {
grphcs[0] = images.p1;
grphcs[1] = images.p2;
grphcs[2] = images.p3;
grphcs[3] = images.p4;
grphcs[4] = images.p5;
grphcs[5] = images.p6;
} else if (settings.preset_images == "4") {
grphcs[0] = images.e1;
grphcs[1] = images.e2;
grphcs[2] = images.e3;
grphcs[3] = images.e4;
grphcs[4] = images.e5;
grphcs[5] = images.e6;
} else if (settings.preset_images == "5") {
grphcs[0] = images.leaf1;
grphcs[1] = images.leaf2;
grphcs[2] = images.leaf3;
grphcs[3] = images.leaf4;
grphcs[4] = images.leaf5;
grphcs[5] = images.leaf6;
} else if (settings.preset_images == "6") {
grphcs[0] = images.t1;
grphcs[1] = images.t2;
grphcs[2] = images.t3;
grphcs[3] = images.leaf1;
grphcs[4] = images.leaf6;
grphcs[5] = images.t3;
} else if (settings.preset_images == "7") {
grphcs[0] = images.halloween1;
grphcs[1] = images.halloween2;
grphcs[2] = images.halloween3;
grphcs[3] = images.halloween4;
grphcs[4] = images.halloween5;
grphcs[5] = images.halloween6;
} else if (settings.preset_images == "8") {
grphcs[0] = images.snow1;
grphcs[1] = images.snow2;
grphcs[2] = images.snow3;
grphcs[3] = images.snow4;
grphcs[4] = images.snow5;
grphcs[5] = images.snow3;
} else if (settings.preset_images == "9") {
grphcs[0] = images.c1;
grphcs[1] = images.c2;
grphcs[2] = images.c3;
grphcs[3] = images.c4;
grphcs[4] = images.c5;
grphcs[5] = images.c6;
grphcs[6] = images.snow2;
grphcs[7] = images.snow2;
} else {
grphcs[0] = settings.image_1;
grphcs[1] = settings.image_2;
grphcs[2] = settings.image_3;
grphcs[3] = settings.image_4;
grphcs[4] = settings.image_5;
grphcs[5] = settings.image_6;
}

proboards.preload(grphcs);

function iecompattest() {
return (document.compatMode && document.compatMode.indexOf("CSS") != -1) ? document.documentElement : document.body
}

Ypos = new Array();
Xpos = new Array();
Speed = new Array();
Step = new Array();
Cstep = new Array();
ns = (document.layers) ? 1 : 0;
ns6 = (document.getElementById && !document.all || window.opera) ? 1 : 0;
var newie = /MSIE (\d+)/.exec(navigator.userAgent);
if (newie && newie[1] > 8) {
ns6 = true;
}
speed = ns6 ? speed - 12 : speed

if (ns) {
for (i = 0; i < Amount; i++) {
var P = Math.floor(Math.random() * grphcs.length);
rndPic = grphcs[P];
document.write("<LAYER NAME='sn" + i + "' LEFT=0 TOP=0><img src=" + rndPic + "></LAYER>");
}
} else {
document.write('<div style="position:fixed;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++) {
var P = Math.floor(Math.random() * grphcs.length);
rndPic = grphcs[P];
document.write('<img id="si' + i + '" src="' + rndPic + '" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight = (ns || ns6) ? window.innerHeight : window.iecompattest().clientHeight - 66;
WinWidth = (ns || ns6) ? window.innerWidth - 70 : window.iecompattest().clientWidth - 66;
for (i = 0; i < Amount; i++) {
Ypos[i] = Math.round(Math.random() * WinHeight);
Xpos[i] = Math.round(Math.random() * WinWidth);
Speed[i] = (Math.random() * 5 + 3) * dir;
Cstep[i] = 0;
Step[i] = Math.random() * 0.1 + 0.05;
}

function fall() {
var WinHeight = (ns || ns6) ? window.innerHeight : window.iecompattest().clientHeight - 66;
var WinWidth = (ns || ns6) ? window.innerWidth - 70 : window.iecompattest().clientWidth - 66;
var hscrll = (ns || ns6) ? window.pageYOffset : iecompattest().scrollTop;
var wscrll = (ns || ns6) ? window.pageXOffset : iecompattest().scrollLeft;
for (i = 0; i < Amount; i++) {
sy = Speed[i] * Math.sin(90 * Math.PI / 180);
sx = Speed[i] * Math.cos(Cstep[i]);
Ypos[i] += sy;
Xpos[i] += sx * sway * 0.1;
if (Ypos[i] > WinHeight && dir == 1 || Ypos[i] < 0 && dir == -1) {
Xpos[i] = Math.round(Math.random() * WinWidth);
Speed[i] = (Math.random() * 5 + 3) * dir;
}
Ypos[i] = (Ypos[i] > WinHeight && dir == 1) ? -60 : (Ypos[i] < 0 && dir == -1) ? WinHeight + 60 : Ypos[i];
if (ns) {
document.layers['sn' + i].left = Xpos[i] + wscrll;
document.layers['sn' + i].top = Ypos[i] + hscrll;
} else if (ns6) {
var dirFac = dir == 1 ? 60 : 200
document.getElementById("si" + i).style.left = Math.min(WinWidth, Xpos[i]) + 'px';
document.getElementById("si" + i).style.top = Ypos[i] - dirFac + 'px';
} else {
document.all["si" + i].style.left = Xpos[i] + 'px';
document.all["si" + i].style.top = Ypos[i] + 'px';
}
Cstep[i] += Step[i];
}
setTimeout('fall()', speed);
}

jQuery(fall);
}

jscheuer1
10-29-2013, 05:14 PM
You don't need to turn the current version into a plugin. As I explained in my previous post, it already is a plugin. You can set anything you need to in the new fall_rise() call. But, if you must layer another plugin on top of it, you can. You can do things like (see the highlighted line):


/* 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: proboards.plugin.get('falling_images').settings.fall_direction, // 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
]
},


You don't need:


proboards.preload(grphcs);

Because the script does that itself now, even delaying the onset of the effect until the images load (or error in the case of a missing image or images). I see you have a large if/else if/else thing there for the images starting with:


var grphcs = new Array(6);

Although there are more efficient and wiser ways to do that, you can keep that exactly how it is. Do it before the code at the top of this post, and when you get to the grphcs section of it do (again, see the highlighted line):


(function($){
rise_fall.prototype = {
defaults: { //these items may be set in the on page call
dir: proboards.plugin.get('falling_images').settings.fall_direction, // 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: grphcs
},


Hopefully you are getting the picture, I don't want to have to rewrite your plugin completely to use the latest code. But if you have more questions about how to get a specific value into the latest code, feel free to ask.

Just remember, if you're setting everything via the defaults property, when you finally get to the new fall_rise() call, leave it empty:


leaves = new fall_rise();

Otherwise, anything that's left in there will override what gets set in the defaults.

Baller95
10-30-2013, 12:22 AM
Thanks John, I'll check this out later today!

Baller95
10-30-2013, 03:22 AM
John, that's definitely helped so thanks a lot! :)

The only issue now is that the fall doesn't cycle meaning once the leaves fall out of the screen it doesn't come back as seen on my test forum here - http://inspiredtestforum.proboards.com

The accumulate doesn't seem to be working as well.

Also, on my old code, I had CSS that automatically resized all big images to 45px.


img[id^="si"] {
max-width: 45px;
}

What's the variable in the new code I can replace "si" with?

jscheuer1
10-30-2013, 04:52 AM
dir must be a number, not a string:


1

not:


'1'

and not:


"1"

I don't see where it's originally set. Presumably where:


proboards.plugin.get('falling_images').settings.fall_direction

is set. There, or wherever it's originally set, it must be an unquoted integer. It may be either 1 for falling, or -1 for rising.

Fixing that will allow the images to fall repeatedly and to accumulate.



There currently is no css hook for the images. One is easily created. Add the highlighted:


$master: $('<div id="fall_rise_master" style="position:fixed;top:0;left:0;"></div>'),

Now you can do:


#fall_rise_master img {
max-width: 45px;
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

Baller95
10-30-2013, 12:36 PM
Thanks John, you're the man! :D I'll see how it works once I'm at my laptop.

Baller95
10-30-2013, 03:18 PM
dir must be a number, not a string:

John, here's what I have -


var plugin = proboards.plugin.get('falling_images');
var settings = plugin.settings;
var images = plugin.images;
var fall_direction = settings.fall_direction;


dir: fall_direction,

The value of "fall_direction" is either 1 or -1. It's only a number and as far I can see it's not a string.

The fall cycle still isn't working but the CSS works great.

jscheuer1
10-30-2013, 04:00 PM
Line 29 of the served source code of the page itself:


proboards.plugin._plugins["falling_images"] = {
settings: {"placement":"1","fall_direction":"1","preset_ima . . .

Should be (without the red quotes):


proboards.plugin._plugins["falling_images"] = {
settings: {"placement":"1","fall_direction":1,"preset_ima

If there's a problem for you with that, we can type convert to a number here:



dir: fall_direction,

like so:


dir: +fall_direction,

Baller95
10-30-2013, 11:18 PM
Thanks for all the help John, it looks like I'm all done with this! :)