Page 5 of 8 FirstFirst ... 34567 ... LastLast
Results 41 to 50 of 78

Thread: Autumn Leaves

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

    Default

    Thanks John. Strangely, it works on my iPad (Safari) but not on my laptop when using the latest version of FF & IE.

  2. #42
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,138
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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:

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

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

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

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

    Baller95 (10-26-2013)

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

    Default

    Perfect, works like a charm! Thanks John

  5. #44
    Join Date
    Oct 2013
    Posts
    72
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    This is cool! Have you checked this out yet on W8.1 with IE11? Just upgraded to this. Hi Baller95!

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

    Default

    Quote Originally Posted by JRR View Post
    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.

  7. #46
    Join Date
    Oct 2013
    Posts
    72
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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?

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

    Default

    Quote Originally Posted by JRR View Post
    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

  9. #48
    Join Date
    Oct 2013
    Posts
    72
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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.


    Code:
    <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?
    Last edited by jscheuer1; 10-26-2013 at 09:41 PM. Reason: Format

  10. #49
    Join Date
    Oct 2013
    Posts
    72
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    I've replied to you also.

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

    Default

    Quote Originally Posted by JRR View Post
    Do you mind if I ask John about this?
    Oops I missed this, yeah definitely ask John, he'll be able to help

Similar Threads

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