Page 8 of 8 FirstFirst ... 678
Results 71 to 78 of 78

Thread: Autumn Leaves

  1. #71
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,939
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

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

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

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

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

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

    Code:
    leaves = new fall_rise();
    Otherwise, anything that's left in there will override what gets set in the defaults.
    - John
    ________________________

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

  2. The Following 2 Users Say Thank You to jscheuer1 For This Useful Post:

    Baller95 (10-30-2013),Metermaid (10-29-2013)

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

    Default

    Thanks John, I'll check this out later today!

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

    Default

    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.

    Code:
    img[id^="si"] {
    max-width: 45px;
    }
    What's the variable in the new code I can replace "si" with?

  5. The Following User Says Thank You to Baller95 For This Useful Post:

    Metermaid (10-30-2013)

  6. #74
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,939
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    dir must be a number, not a string:

    Code:
    1
    not:

    Code:
    '1'
    and not:

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

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

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

    Code:
    #fall_rise_master img {
    max-width: 45px;
    }
    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. The Following 2 Users Say Thank You to jscheuer1 For This Useful Post:

    Baller95 (10-30-2013),Metermaid (10-30-2013)

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

    Default

    Thanks John, you're the man! I'll see how it works once I'm at my laptop.

  9. #76
    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
    dir must be a number, not a string:
    John, here's what I have -

    Code:
    var plugin = proboards.plugin.get('falling_images');
    var settings = plugin.settings;
    var images = plugin.images;
    var fall_direction = settings.fall_direction;
    Code:
    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.
    Last edited by Baller95; 10-30-2013 at 03:27 PM.

  10. #77
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,939
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    Line 29 of the served source code of the page itself:

    Code:
    proboards.plugin._plugins["falling_images"] = {
    									settings: {"placement":"1","fall_direction":"1","preset_ima . . .
    Should be (without the red quotes):

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

    Code:
    dir: fall_direction,
    like so:

    Code:
    dir: +fall_direction,
    - John
    ________________________

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

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Baller95 (10-30-2013)

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

    Default

    Thanks for all the help John, it looks like I'm all done with this!

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
  •