Page 4 of 8 FirstFirst ... 23456 ... LastLast
Results 31 to 40 of 78

Thread: Autumn Leaves

  1. #31
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  2. #32
    Join Date
    Oct 2013
    Location
    Toronto, Canada
    Posts
    28
    Thanks
    9
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    Why not?
    Quote Originally Posted by djr33 View Post
    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.

  3. #33
    Join Date
    Oct 2013
    Location
    Toronto, Canada
    Posts
    28
    Thanks
    9
    Thanked 1 Time in 1 Post

    Default

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

  4. #34
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

    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"
    ]
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #35
    Join Date
    Oct 2013
    Location
    Toronto, Canada
    Posts
    28
    Thanks
    9
    Thanked 1 Time in 1 Post

    Default

    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.

  6. #36
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <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:

    HTML Code:
    </body>
    </html>
    If you cannot place it there, change this:

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

    Code:
    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:

    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"
         ]
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #37
    Join Date
    Oct 2013
    Location
    Toronto, Canada
    Posts
    28
    Thanks
    9
    Thanked 1 Time in 1 Post

    Default

    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?

  8. #38
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    I did not tell you to remove the highlighted:

    Code:
    			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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #39
    Join Date
    Oct 2013
    Location
    Toronto, Canada
    Posts
    28
    Thanks
    9
    Thanked 1 Time in 1 Post

    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

  10. #40
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    I had a typo (since fixed on the live version) in the script, which you copied, here:

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

    Code:
    		$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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Autumn Leaves
    By Metermaid in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 09-17-2012, 08:17 AM
  2. autumn leaves
    By chaotic in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-17-2008, 08:30 PM
  3. Autumn leaves!!!!
    By Don in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 10-14-2008, 11:14 AM
  4. DD Autumn leaves script
    By ianric in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-05-2008, 07:49 PM
  5. Autumn leaves
    By walshy in forum JavaScript
    Replies: 3
    Last Post: 08-09-2005, 09:23 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •