Autumn Leaves

[JRR]

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/s...se_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]

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]

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]

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]

I understand thanks.

[Metermaid]

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]

Yes Hi Rita!

[Baller95]

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]

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]

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