Falling Images

[Baller95]

Thanks jrryan, I'm glad all is working well!

[Baller95]

jrryan, Moving gifs should be fine, I did notice the scroll bar moving with some images sometimes, I'm not sure why it does that though. I've only noticed it in IE as well but it doesn't affect anything else does it?

[Baller95]

jrryan, you're right, a lot of people do use IE and aren't as tech savy as we are. As long as it's not causing any other problem it should be ok but I guess it's a bit annoying having the scroll bar moving around

[Timebomb007]

The below code works best for me.

Images don't start paused in the top left, like it does with the plugin.
Images still fall at the same rate when scrolling, unlike with the plugin when using Firefox. Plus, images don't go upward when scrolling up, like with the plugin does in Firefox.

However, it might be the reason why a script error occurs in Internet Explorer 8: support.proboards.com/post/5568400/thread
As well, there's members who want to opt out of falling images, and using the only code I was given for hiding from groups, it causes a space between the banner ad and "Register to See the Entire Forum box" that I have on my forum, due to <xmp>. support.proboards.com/thread/486388/remove-white-space

<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 = "1.gif";
// Configure below to change number of snow to render
var no = 10;
// 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.gif" : 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$/,(parseInt(Math.random()*5+1)+".gif")) + "' 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$/,(parseInt(Math.random()*5+1)+".gif")) + "' 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 * 90)
}

</script>

[pixiedust12]

I am having trouble getting this to work, I admit I am not real tech savvy

[Baller95]

jrryan, I didn't modify the height and width settings. I really didn't do anything to the original code aRMY83 posted other than putting it together as a plugin. Perhaps Tim Camara may know? I understand Tim's a busy guy so no worries if there's nothing you can do.

pixiedust12, what have you done so far?

[Baller95]

Interesting, jrryan, does that code only accept 1 image?

[Baller95]

jrryan, I was going to try resizing the images to no more than 42 or 43px but you've already tested it with no success. It's very strange how some themes do it and others don't. The only differences are the images so the images can be the only factor?!

[Baller95]

jrryan, I'm not quite understanding you when you say it jumps. I can see the bottom scroll bar moving around in IE sometimes.

[Chris]

Oct 13, 2013 12:09:23 GMT -8 jrryan said:

Baller95
Baller could you do one thing? Put all of your leaf images in with the one leaf I resized to 42px in the default link and try it on your computer on IE? reason I say this is because my internet speed is a little slow right now and that may have had an effect on my test? If it jumps for you on the default link with all the images at 42px or less then we know for sure it's got to be another variable?

As I mentioned in the other thread, the problem with IE may be deeper than with other browsers because it does not specify a buffer zone so that the images don't float off the right side of the screen thus causing scroll bars to appear then disappears once the image comes back into view causing a "jump" effect. I'll try to illustrate the problem...

That green zone on the right would be a buffer zone that the code creates and uses to detect when an image is about to go off screen and in the code used by this plugin that is defined on this line
WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;

As you can see it is subtracting 70 from the innerWidth to create that buffer zone that I've colored as green in my illustration. That's all good and fine if the image can fit within that zone but if the image is too large and even the slightest part of that image ends up off screen before it is fully inside that zone then the browser has to create scroll bars at the bottom in order to allow viewing of the part that is off screen. If there is a vertical scroll bar (to scroll up and down) on the right then that takes space away from that green area meaning the images will need to be even smaller in order to fit in that buffer zone without going off screen.

You'll also notice that no buffer zone is created for IE (no clientWidth-70 for example) like it is for other browsers (innerWidth) so a good place to start is by subtracting something from there as well (clientWidth does not include the width of a scroll bar if it exists like innerWidth does so no need to account for that)

[Chris]

Oct 13, 2013 13:48:23 GMT -8 jrryan said:

Chris

Ok I understand this and even the code you changed for me via PM sometimes will jump just once here and there and it is exactly as you say when a image goes past the side. When they drop and don't do that the jumping ceases.

So what is the answer Eton for IE users? Is it simply put in a lot smaller images or can the buffer zone be changed to make it have more room?  I mean it's like I said many people use IE 10 like me because it's what you get when you buy a lot of computers now?

I don't recall making any other changes to that code I sent in PM other than making it able to accept multiple images as you were obviously trying to accomplish and increasing the buffer zone to 60 (I don't recall ,it was maybe 40 to begin with) and I did show the lines where that change was made in one of my previous reply as well so it would be a simple case of increasing the number. As for the other code I placed a line of code in a [code] showing exactly where that zone is created (and not create in the case of IE) with a simple number that could be increased as well as modified to add support for a zone in IE

The last paragraph in my last reply gives a starting point since I mention that the code DOES NOT CREATE A BUFFER ZONE for the IE browser like it does for other browsers. I do not have IE10 because I've got a special build with a few toys that I do not wish to lose so that is something you would need to test on your own.

[Baller95]

Haha yeah I hear you jrryan! Does that code have fall speed and image amount setting by any chance? Perhaps Chris may know.

[Baller95]

Ah yeah gotcha, thanks for clarifying jrryan

[Baller95]

Oh I see jrryan! I've just had a look on your forum on my iPad and I noticed that the leaves starts right at the top of the page and goes right to the bottom before looping whereas the code aRMY posted loops when the leaves fall out of the screen. Also, there doesn't seem to be a setting for image fall speed? I wish the code I used in my plugin could have a fix for the jumping but to make a new plugin using the code you're using seems confusing.

[Baller95]

jrryan, I completely missed that post by Chris, thanks for bringing it up! I'd love to find a fix for this code but I'm going to need help. Check this post out - support.proboards.com/post/5576830/thread