Printable View
1) Script Title: Autumn Leaves
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...m#.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
The link you posted only goes to a login page that doesn't contain the script.
Ooops sorry - sorted now.
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/s...s_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.
Thanks John - I'll give it a try.
Working a treat now thanks John. :cool:
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:
(since you already have jQuery on the page) to:Code:window.onload=fall;
which will execute it once the document has been parsed.Code:jQuery(fall);
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.
The leaves certainly start falling much sooner now, John. :)
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:
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.Code: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
I'll add that as you have suggested. I'm a Mac Safari user by the way. :)
Hello John, I noticed when scrolling the page up, the falling images go up as well. Is there a way to fix this?Quote:
Originally Posted by jscheuer1
Thanks :)
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/s...rect_fixed.htm
John, I've changed the original "absolute" to "fixed" but that didn't work.
I changed this -
To this -Quote:
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
Is there something else I have to change?Quote:
document.write('<div style="position:fixed;top:0px;left:0px"><div style="position:relative">');
Use the updated code found here:
http://home.comcast.net/~jscheuer1/s...rect_fixed.htm
Use the browser's "View Source" to get it.
Hmm, it still isn't working like the demo page John. Will using CSS (to automatically resize the images) affect this?
Oops, never mind. It's working :)
Thanks John!
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?
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.
Thanks Daniel! It's not much of an issue and coming to think of it, I think it's fine how it is. :)
You might like:
http://home.comcast.net/~jscheuer1/s...ll_rise_jq.htm
That's pretty cool. Could you (without too much trouble) add a fade as the leaves are at the bottom?
I like that effect. :)Quote:
Originally Posted by jscheuer1
The leaves accumulating at the bottom is what they do in reality, as with snow I'd really like it! :cool:
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:
Make that:Code:rise_fall.init({speed: 60, Amount: 10, accumulate: 255});
And they will slide off the screen at the bottom.Code:rise_fall.init({speed: 60, Amount: 10});
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.
Great stuff John, thanks for that! :)
The leaves don't seem to be accumulating for me. Is there anything I need to change?Quote:
Originally Posted by jscheuer1
Is there a way to integrate the accumulating into this code?
Quote:
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);
Not really. Get rid of all of that and use the latest code:
http://home.comcast.net/~jscheuer1/s...se_jq_ssmu.htm
script is here (right click and 'Save As'):
http://home.comcast.net/~jscheuer1/s...y.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:
Code:<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>
John I need it all in one script, I can't do two scripts.
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.
Quote:
Originally Posted by jscheuer1
Hmm, I'll play around with it a little more and see if it works and I'll report back.Quote:
Originally Posted by djr33
So I have this in a JavaScript component but I just can't get it to work! :(
Quote:
/* 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});
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:
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.Code://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"
]
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.
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:
to right before:HTML Code:<script type="text/javascript" src="http://s29136.storage.proboards.com/5399136/j/LdpC_6aN2x7cr2Yc8rJ8.js" data-plugin="15" data-component="29"></script>
If you cannot place it there, change this:HTML Code:</body>
</html>
to:Code:var leaves = new rise_fall({speed: 60, sway: 20, Amount: 10, accumulate: 255});
You still have semi-colons, where there should be commas, change:Code:var leaves;
jQuery(function($){
leaves = new rise_fall({speed: 60, sway: 20, Amount: 10, accumulate: 255});
});
to:Code: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.Code: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"
]
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?
I did not tell you to remove the highlighted:
Replace it.Code:this.loadem();
}
};
})(jQuery);
var leaves;
jQuery(function($){
leaves = new rise_fall({speed: 60, sway: 20, Amount: 10, accumulate: 255});
});
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.
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
I had a typo (since fixed on the live version) in the script, which you copied, here:
That should be:Code:$master: $('<div style: "position:fixed,top:0,left:0;">'),
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.Code:$master: $('<div style="position:fixed;top:0;left:0;"></div>'),
The browser cache may need to be cleared and/or the page refreshed to see changes.