Falling leaves

[Sassy]

Thank you Baller95 for all your help in the matter.

[Timebomb007]

How do you make the image fall all the way down the forum in Firefox with the following code?

Oct 4, 2013 16:11:51 GMT -8 jrryan said:

blc


Here was the bad code that Eton fixed give it a try. Also you will need to add your own leaf url on this line:

var snowsrc = "http://www.jr-richscooterdoc.com/XsmileP/leaf1.gif";





<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/XsmileP/leaf1.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 = (window.innerHeight && snowdistance == "windowheight") ? window.innerHeight : (ie4up && snowdistance == "windowheight") ? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance == "pageheight") ? iecompattest().scrollHeight : iecompattest().offsetHeight;
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>


[Timebomb007]

Oct 7, 2013 17:35:05 GMT -8 jrryan said:

Timebomb007
I wouldn't know? You would need to tag Eton on that? I would think any code that Eton does will work in any browser? He knows what to do that's for sure.

Chris

I was trying to edit the code for multiple links but haven't gotten that to work either.

[Chris]

Oct 7, 2013 17:43:42 GMT -8 Timebomb007 said:

Chris

I was trying to edit the code for multiple links but haven't gotten that to work either.

That code was originally written to accept only one image but as I told jrryan I modified it to automatically look for a sequence

Oct 6, 2013 21:15:35 GMT -8 Chris said:

The code is only meant to accept ONE image but as I said I saw you were trying to input 6 images so I made it so that it looked for 6 images based on the image that was entered

var snowsrc = "http://www.jr-richscooterdoc.com/XsmileP/leaf1.gif";


Given the above image it would automatically assume the following also exists and use them

"http://www.jr-richscooterdoc.com/XsmileP/leaf2.gif";
"http://www.jr-richscooterdoc.com/XsmileP/leaf3.gif";
"http://www.jr-richscooterdoc.com/XsmileP/leaf4.gif";
"http://www.jr-richscooterdoc.com/XsmileP/leaf5.gif";
"http://www.jr-richscooterdoc.com/XsmileP/leaf6.gif";

It is NOT A GENERAL ALL-PURPOSE USE CODE since I modified it with jrryan specific needs in mind but if you want multiple image support then that is the way it currently operates.

[Timebomb007]

Chris

Oh, okay, thanks. The issue with that code is, at least in Firefox, the images don't fall all the way down the page. 

[Chris]

Oct 8, 2013 12:51:43 GMT -8 Timebomb007 said:

Chris

Oh, okay, thanks. The issue with that code is, at least in Firefox, the images don't fall all the way down the page. 

If you give me a link where you have it installed then I'll take a look since Firefox is my main browser but I suspect you may have changed
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

to "windowheight" which means it would no longer be based on page but rather on viewable area, change it back if you did

[Timebomb007]

pondfriends.boards.net

[Chris]

This one is a bit puzzling although I do notice that you've changed the "hidesnowtime" variable to 90 which might not be enough time for the first images to flutter all the way to the bottom, try increasing that time.

Also forgot to point out that you've apparently misunderstood since I see this in your edited code

//Configure below to change URL path to the snow image
var snowsrc = "http://i42.tinypic.com/2qvtqvq.gif";
"http://www.jr-richscooterdoc.com/XsmileP/leaf2.gif";
"http://www.jr-richscooterdoc.com/XsmileP/leaf3.gif";
"http://www.jr-richscooterdoc.com/XsmileP/leaf4.gif";
"http://www.jr-richscooterdoc.com/XsmileP/leaf5.gif";
"http://www.jr-richscooterdoc.com/XsmileP/leaf6.gif";
// Configure below to change number of snow to render
var no = 8;
/

Those red lines are not needed, what is needed is a file that has a number at the end, for example if you had "http://i42.tinypic.com/2qvtqvq1.gif" then it would look for images of that same name that ended with 2,3,4,5 and 6 without you needing to actually put those in the code

"http://i42.tinypic.com/2qvtqvq2.gif"
"http://i42.tinypic.com/2qvtqvq3.gif"
"http://i42.tinypic.com/2qvtqvq4.gif"
"http://i42.tinypic.com/2qvtqvq5.gif"
"http://i42.tinypic.com/2qvtqvq6.gif"


That was a quick way to get it to support multiple files (the way jrryan had it) without having to rewrite basically the entire code.

[Timebomb007]

Oct 8, 2013 14:06:37 GMT -8 Chris said:

This one is a bit puzzling although I do notice that you've changed the "hidesnowtime" variable to 90 which might not be enough time for the first images to flutter all the way to the bottom, try increasing that time.

I've changed it to 180, 500, 1000, and no difference. The below code used to work, which are the images I'd like to use, but now the images just stay all the way on top without falling at all.

<script language="Javascript1.2" type="text/javascript">
//This Code Free To Use - Providing This Notice Remains//
//Autumn leaves- by Kurt Grigg ([e-mail])//
//Modified by Dynamic Drive for NS6 functionality//
//visit http://www.dynamicdrive.com for this script//
//Javascript Code Effect Found At: Development Resource & Javascript Code & Generator Public Archive Center//
//Located: http://www.DesignerWiz.com//
//Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply*//
//Pre-load your image below!
grphcs=new Array(4)
Image0=new Image();
Image0.src=grphcs[0]="http://i42.tinypic.com/2qvtqvq.gif";
Image1=new Image();
Image1.src=grphcs[1]="http://i41.tinypic.com/23tjeb9.gif"
Image2=new Image();
Image2.src=grphcs[2]="http://i43.tinypic.com/v33j2h.gif"
Image3=new Image();
Image3.src=grphcs[3]="http://i41.tinypic.com/2zpuk4y.gif"
Image4=new Image();
Image4.src=grphcs[4]=" http://i39.tinypic.com/14tpifb.gif "

Amount=4; //Smoothness depends on image file size, the smaller the size the more you can use!
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)?1:0;

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:absolute;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.document.body.clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
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;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
var wscrll=(ns||ns6)?window.pageXOffset:document.body.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;
if (Ypos[i] > WinHeight){
Ypos[i]=-60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=Math.random()*5+3;
}
if (ns){
document.layers['sn'+i].left=Xpos[i]+'px';
document.layers['sn'+i].top=Ypos[i]+hscrll+'px';
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i])+'px';
document.getElementById("si"+i).style.top=Ypos[i]+hscrll+'px';
}
else{
eval("document.all.si"+i).style.left=Xpos[i]+'px';
eval("document.all.si"+i).style.top=Ypos[i]+hscrll+'px';
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',200);
}

window.onload=fall
//-->
</script>

[Chris]

I'd suggest you use the plugin that was created earlier in this thread then if you're looking to use multiple non-consecutive image files,like I said this was an edit specific for jrryan. I'm seeing multiple copies of that code you just posted in your header/footer which would be working against each other since it is written to use global variables and functions (placing a if(1=="2") around it won't help in this situation). Either dwindle it down to ONE code or just use the plugin which might be easier for you to configure.

As for the "hidesnowtime" I came to that conclusion after interrupting the code and changing it from 90 back to 0 and then watched it fall all the way to the bottom. I cannot however test the values you say you used since the code isn't even running anymore.

[Timebomb007]

The plugin has issues with images showing up in at least Internet Explorer and Safari (on Mac). They show up fine in Firefox, but like in IE, you'd get falling boxes with a red x in them. I've posted about it in the plugin thread, but there hasn't been any resolution.

Do you want me to put in the code that used to work? I currently put back the code you changed with one image.

[Chris]

Oct 8, 2013 14:48:29 GMT -8 Timebomb007 said:

The plugin has issues with images showing up in at least Internet Explorer and Safari (on Mac). They show up fine in Firefox, but like in IE, you'd get falling boxes with a red x in them. I've posted about it in the plugin thread, but there hasn't been any resolution.

Do you want me to put in the code that used to work? I currently put back the code you changed with one image.

OK I see you've put the code back in an set that value to 1000 and it still disappearing midway down, so try this instead, change this line in the code (the red one)

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up ? window.innerWidth - 10 : iecompattest().clientWidth - 10;
doc_height = (window.innerHeight && snowdistance == "windowheight") ? window.innerHeight : (ie4up && snowdistance == "windowheight") ? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance == "pageheight") ? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++i) { // iterate for every dot

to this instead


doc_height = $(document).height()

[Baller95]

Oct 8, 2013 14:48:29 GMT -8 Timebomb007 said:

The plugin has issues with images showing up in at least Internet Explorer and Safari (on Mac). They show up fine in Firefox, but like in IE, you'd get falling boxes with a red x in them. I've posted about it in the plugin thread, but there hasn't been any resolution.

Do you want me to put in the code that used to work? I currently put back the code you changed with one image.

I'm working on recoding the plugin but I'll get it preset for you be the end of the week.

[Timebomb007]

Oct 8, 2013 15:01:20 GMT -8 Chris said:

Oct 8, 2013 14:48:29 GMT -8 Timebomb007 said:

The plugin has issues with images showing up in at least Internet Explorer and Safari (on Mac). They show up fine in Firefox, but like in IE, you'd get falling boxes with a red x in them. I've posted about it in the plugin thread, but there hasn't been any resolution.

Do you want me to put in the code that used to work? I currently put back the code you changed with one image.

OK I see you've put the code back in an set that value to 1000 and it still disappearing midway down, so try this instead, change this line in the code (the red one)

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up ? window.innerWidth - 10 : iecompattest().clientWidth - 10;
doc_height = (window.innerHeight && snowdistance == "windowheight") ? window.innerHeight : (ie4up && snowdistance == "windowheight") ? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance == "pageheight") ? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++i) { // iterate for every dot

to this instead


doc_height = $(document).height()

Thanks, that fixed it.

Oct 8, 2013 15:09:55 GMT -8 Baller95 said:

Oct 8, 2013 14:48:29 GMT -8 Timebomb007 said:

The plugin has issues with images showing up in at least Internet Explorer and Safari (on Mac). They show up fine in Firefox, but like in IE, you'd get falling boxes with a red x in them. I've posted about it in the plugin thread, but there hasn't been any resolution.

Do you want me to put in the code that used to work? I currently put back the code you changed with one image.

I'm working on recoding the plugin but I'll get it preset for you be the end of the week.

Thanks.

[Chris]

As for the other code, I'll just repeat what I said about having multiple copies of this one code. It uses global variables and globally defined functions so even if you try to put if(1=="2") like I see you're doing that WILL NOT stop them from interfering with each other