Falling Snow Background image

Snitz™ Forums 2000
https://forum.snitz.com/forumTopic/Posts/60551?pagenum=1
04 November 2025, 23:51

Topic


NiteOwl
Falling Snow Background image
24 December 2005, 01:31


I found the following script on the net to add falling snowflakes to my forum. Can I do this with SNITZ and if so what file do I need to edit?

The following website shows this script:
http://javascript.internet.com/bgeffects/snow.html

<font color="navy"><font size="1"><SCRIPT LANGUAGE="JavaScript1.2">
<!-- Original: Altan (snow@altan.hr) -->
<!-- Web Site: http://www.altan.hr/snow -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var no = 25; // snow number
var speed = 10; // smaller number moves the snow faster
var snowflake = "http://www.your-web-site-address-here.com/snow.gif";

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
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 (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
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 (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script</font id="size1"></font id="navy">>

<font size="1"><font color="black">< Moved to [i]MOD Add-On Forum (W/O Code)</i> by Shaggy /></font id="black"></font id="size1">

 

Replies ...


Classicmotorcycling
24 December 2005, 03:52


Would you not need to add the code to the inc_header.asp file and just after the second
Code:
<body>
tag add a
Code:
%>(JavaScript Code)<%
and it should work as long as you have their image (or one of your own) in the folder the JS points to.
I hope that helps.<
Sonic
24 December 2005, 04:37


search in --> inc_header.asp
this line (new install on line 277)

Response.Write "</head>" & vbNewLine & _
"<body" & strTmpPageBGImageURL & " bgColor=""" & strPageBGColor & """ text=""" & strDefaultFontColor & """ link=""" & strLinkColor & """ aLink=""" & strActiveLinkColor & """ vLink=""" & strVisitedLinkColor & """>" & vbNewLine & _


edit after that it to:

Response.Write "</head>" & vbNewLine & _
"<body" & strTmpPageBGImageURL & " bgColor=""" & strPageBGColor & """ text=""" & strDefaultFontColor & """ link=""" & strLinkColor & """ aLink=""" & strActiveLinkColor & """ vLink=""" & strVisitedLinkColor & """>" & vbNewLine
if DatePart("ww", Date()) > 47 or DatePart("ww", Date()) < 10 then
Response.Write "<script language=""JavaScript1.2"" src=""snow.js"" type=""text/javascript""></SCRIPT>" & vbNewLine
end If
Response.Write "<a name=""top""></a>" & vbNewLine & _

save the script shown on your first post as --> snow.js the green part in the code: let automaticly display the "snow" on a certain time of the year. in this sample at the 48 week of the year till the 11 week of the new year. rest of time no snow is showing.
eg left in the menu of my page:


don't forget to save the javascript and save some "snow" pics :-)
<
NiteOwl
24 December 2005, 12:53


Thanks!! this is sounding better all the time:

OK, I have saved the original code to snow.js
I have a snowflake image in my images folder called snow.gif
I have edited the original script to point to the snow graphic. I have added the new piece of code directly after the line you indicated.
However no snow is falling. :)

BTW - I ahve two instances of the code you mentioned on line 94 and line 344, I inserted your string on the 344 line.<
Sonic
24 December 2005, 13:22


attention -->
delete in the snow.js file these lines

-- > <SCRIPT LANGUAGE="JavaScript1.2"> (first line)
and </script> (last line)

save it and it should work :-) the line 344 is ok
the path of the snowflakes must be right


--------------------------------------------------------------


if you wish to have 3 different snowflakes try this modificated code
(edit the gif path and make some images)
-->
Code:

var snowsrc="";
var snowsrc1="../img/snow/snow1.gif";
var snowsrc2="../img/snow/snow2.gif";
var snowsrc3="../img/snow/snow3.gif";

var no = 10; // change number of snow
var speed = 30; // smaller number moves the snow faster

var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) {
snowsrc = eval("snowsrc"+RanSpan(1,3));
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ns4up) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' border=\"0\"><\/layer>");
}
else if (ie4up||ns6up) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}


function snowIE_NS6() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height) {
xp[i] = Math.random()*(doc_width-am[i]-10);
yp[i] = -5;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth : document.body.clientWidth;
doc_height = ns6up?window.innerHeight : document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top = yp[i];
document.getElementById("dot"+i).style.left = xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", speed);
}


function Random(N) {
return Math.floor(N*(Math.random()%1))
}


function RanSpan(MinV, MaxV) {
return MinV + Random(MaxV-MinV+1)
}

if (ie4up) {
snowIE_NS6();
}
<
TonyB7
25 December 2005, 10:25


Ditto here - the flakes just sit in the upper left corner; no falling.<
Classicmotorcycling
25 December 2005, 14:51


I have no issues adding it to the forum: VN Commodore Support<
CalloftheHauntedMaster
25 December 2005, 15:53


While I'm here, can someone just post the actual code snowflake code that works.<
Sonic
25 December 2005, 16:42


see above i use this code<
Classicmotorcycling
25 December 2005, 17:45


The only thing I have done to get the demo working is changed the DatePart statement that Sonic supplied to be the following:
Code:
	Dim MyWeekday
MyWeekday = DatePart("ww", date)
if (MyWeekday > 47 and MyWeekday < 54) or (MyWeekday > 0 and MyWeekday < 10) then
Response.Write "<script language=""JavaScript1.2"" src=""snow.js"" type=""text/javascript""></script>" & vbNewLine
end If
This made it work for me with adding the original code to .js file and removing the lines as stated again by Sonic:
Code:
<SCRIPT LANGUAGE="JavaScript1.2"> (first line)
and </script> (last line)
It is running at the link I gave earlier now I have the DatePart working fine. <
TonyB7
26 December 2005, 09:25


Oops. They are indeed falling in MSIE. Any idea how to make them fall in Firefox 1.5?
Under Options>Content I have both Java and Javascript enabled.<
Classicmotorcycling
26 December 2005, 16:46


OK, this is what I have that works also in Internet Explorer, Netscape and Firefox:

1. I first make a file called snow.js from the following: snow.js 2. Call on the file in inc_header.asp just after the second <body tag so it looks like the following:
Code:
	Response.Write	"<body bgColor=""" & strPageBGColor & """ text=""" & strDefaultFontColor & """ link=""" & strLinkColor & """ aLink=""" & strActiveLinkColor & """ vLink=""" & strVisitedLinkColor & """>" & vbNewLine

Dim MyWeekday
MyWeekday = DatePart("ww", date)
if (MyWeekday > 47 and MyWeekday < 54) or (MyWeekday > 0 and MyWeekday < 10) then
Response.Write "<script language=""JavaScript1.2"" src=""snow.js"" type=""text/javascript""></script>" & vbNewLine
end If

Response.Write "<a name=""top""></a>" & vbNewLine & _
3. Use the following image for the snow flake:
That all works in all 3 browsers. I hope it helps.<
NiteOwl
26 December 2005, 19:25


Hi Dave I notice that my snowflakes only now come down in a group and never seem to create new ones, is this just something I need to live with since its a forum? <
Classicmotorcycling
26 December 2005, 20:04


The code you have supplied needs to be changed like the following:
Code:
	"</head>" & vbNewLine & _
vbNewLine & _
"<body" & strTmpPageBGImageURL & " bgColor=""" & strPageBGColor & """ text=""" & strDefaultFontColor & """ link=""" & strLinkColor & """ aLink=""" & strActiveLinkColor & """ vLink=""" & strVisitedLinkColor & """>" & vbNewLine

Dim MyWeekday
MyWeekday = DatePart("ww", date)
if (MyWeekday > 47 and MyWeekday < 54) or (MyWeekday > 0 and MyWeekday < 10) then
Response.Write "<script language=""JavaScript1.2"" src=""snow.js"" type=""text/javascript""></script>" & vbNewLine
end If

Response.Write "<a name=""top""></a>" & vbNewLine & _
vbNewLine & _
That should work for you.
Originally posted by NiteOwl
Hi Dave My inc_header file does not ahve any Responce.Write lines after the second <Body

This is my file:

"</head>" & vbNewLine & _
vbNewLine & _
"<body" & strTmpPageBGImageURL & " bgColor=""" & strPageBGColor & """ text=""" & strDefaultFontColor & """ link=""" & strLinkColor & """ aLink=""" & strActiveLinkColor & """ vLink=""" & strVisitedLinkColor & """>" & vbNewLine & _
"<a name=""top""></a>" & vbNewLine & _
vbNewLine & _
<
NiteOwl
26 December 2005, 20:30


excellent, yes that did work! Thanks Dave<
Classicmotorcycling
26 December 2005, 21:10


Glad I could help and you got it going at: http://www.bcfmwu-forum.com/default.asp<
NiteOwl
27 December 2005, 08:20


Merry Christmas all - And a safe new Year.<
TonyB7
27 December 2005, 21:49


Interesting. I wonder why this one includes a link on some flakes? Also, this one cuts off near the top of the screen on Active Topics as apparently it thinks that's the bottom of the page.<
Classicmotorcycling
27 December 2005, 23:30


I had removed it from the site after NiteOwl got it working on his site as it is not really the thing to use on the site I put it on. Still never had the issue with it cutting off on some pages. smile<
TonyB7
02 January 2006, 07:11


I see there was a 'windowheight' option to get the snow to fall a full page.
This has proven so wildly popular at my forum I just have to ask:

1) When a flake gets near the right edge it causes horizontal scroll bar flashing. I tried changing
xp[i] = Math.random()*(doc_width-80); // set position variables
to -80 so far and it helps, but is there a better way to stop this?
2) It would sure be nice if there were more than one flake. Again, the 3-flake script wouldn't work in Firefox.<
Sonic
02 January 2006, 15:54


here is the rewritten code working on firefox too
-->
Code:
var snowsrc="";
var snowsrc1="../img/snow/snow1.gif";
var snowsrc2="../img/snow/snow2.gif";
var snowsrc3="../img/snow/snow3.gif";

var no = 10; // change number of snow
var speed = 30; // smaller number moves the snow faster

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 800;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) {
snowsrc = eval("snowsrc"+RanSpan(1,3));
dx[i] = 0;
xp[i] = Math.random()*(doc_width-10);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ie4up||ns6up) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}


function snowIE_NS6() {
doc_width = ns6up?window.innerWidth : document.body.clientWidth;
doc_height = ns6up?window.innerHeight : document.body.clientHeight;
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height) {
xp[i] = Math.random()*(doc_width-am[i]-10);
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";
}
setTimeout("snowIE_NS6()", speed);
}

function Random(N) {
return Math.floor(N*(Math.random()%1))
}

function RanSpan(MinV, MaxV) {
return MinV + Random(MaxV-MinV+1)
}

if (ie4up||ns6up){
snowIE_NS6();
}
<
TonyB7
02 January 2006, 17:09


I dunno. This one is generating both horizontal and vertical scroll bars. Is there a way to keep the flakes in-bounds?<
keng38
30 November 2006, 05:45


I have used the JS code given by sonic above (2nd Jan)and it works a treat. One thing I did miss was to remove the & _ from the line

"<body" & strTmpPageBGImageURL & " bgColor=""" & strPageBGColor & """ text=""" & strDefaultFontColor & """ link=""" & strLinkColor & """ aLink=""" & strActiveLinkColor & """ vLink=""" & strVisitedLinkColor & """>" & vbNewLine
<
CalloftheHauntedMaster
01 December 2006, 12:26


This code cripples my member's ability to edit avatars:

Microsoft VBScript compilation error '800a0411'

Name redefined

/bbs/inc_header.asp, line 370

Dim MyWeekday
----^<
JJenson
02 December 2006, 11:22


Ok i have been reading this thread and made all the changes minus doing the 3 flaks I did the one David showed on here. Two things I get on this. All my flakes fall in one line on the left side. and I get the IE warning that this page contains secure and non secure items do you want to continue. Is there a way to get around this? you can take a look at

www.thebragboard.com/other/forum1

Thanks
<
Sonic
05 December 2006, 17:55


use the code posted at - 02 January 2006 : 15:54:43 and it should work fine :-)<
JJenson
05 December 2006, 18:23


Thanks Sonic. I thought that was only if you wanted 3 snowflakes i guess I should read a little better. Working now except I can't control the height and width with those controls for some reason.
Thanks
Jeff<
Simko
08 December 2006, 11:38


Hmmm, always got that error:

Microsoft VBScript compilation Error "800a03ea'

Syntax error

/en/forum/inc_header.asp, line 307

Dim MyWeekday
^

Saved Sonics Code to snow.js, uploaded it to the server, also uploaded 3 snowflakes, added this code:

Dim MyWeekday
MyWeekday = DatePart("ww", date)
if (MyWeekday > 47 and MyWeekday < 54) or (MyWeekday > 0 and MyWeekday < 10) then
Response.Write "<script language=""JavaScript1.2"" src=""snow.js"" type=""text/javascript""></script>" & vbNewLine
end If

Anyone?<
CalloftheHauntedMaster
08 December 2006, 11:59


I didn't use Sonic's code so I can't help with that. However, if you use classicmotor's code, it'll look like this and work correctly:

Code:
<%
response.write "-->" & vbNewLine
response.write "</style>" & vbNewLine & _
"</head>" & vbNewLine & _
vbNewLine & _
"<body background=img/bg.gif bottomMargin=""0"" leftMargin=""0"" topMargin=""0"" rightMargin=""0"" marginwidth=""0"" marginheight=""0"" bgColor=""" & strPageBGColor & """ text=""" & strDefaultFontColor & """ link=""" & strLinkColor & """ aLink=""" & strActiveLinkColor & """ vLink=""" & strVisitedLinkColor & """>" & vbNewLine
Response.Write "<script language=""JavaScript1.2"" src=""snow.js"" type=""text/javascript""></script>" & vbNewLine
end If

Response.Write "<a name=""top""></a>" & vbNewLine & _
vbNewLine & _

%>
<
Simko
08 December 2006, 14:46


Ah, thanks a lot! Now it works :)<
CalloftheHauntedMaster
08 December 2006, 14:54


Glad to help. However, be sure to check out your avatars. This causes problems with Zuel's addon.<
Simko
09 December 2006, 02:04


Nope, no Problems here :) Checkt it, everything works fine. But thanks anyway.<
spyderuk
15 December 2006, 18:07


I've tried getting this going but all to no avail. Tried the version with 3 flakes but just cannot get it to snow. aarrgghhhh! <
JJenson
15 December 2006, 18:09


Any kind of errors or anything. What is happening?<
NiteOwl
26 December 2007, 09:22


Lon
27 December 2007, 11:04


I used Sonic's code and my users love it. I've been informed by my one user today that if you open 4 or more tabs to your forum, it will max the CPU. I was able to duplicate this, thou I don't know why he would need 4 tabs to the forum open.<
NiteOwl
27 December 2007, 12:19


I don't know what causes it directly, but I do usually have more than 4 tabs open, but they are to multiple sites and only one to the forum, on my system the code by sonic will cause the window to just sit there and continuously resize as the snow is moving down the screen. very frustrating. smile
So my old code works, it just does not display anything to those users of FireFox.
Update: its all working now, using the snow.js above in green, even with multiple tabs in firefox

<
© 2000-2021 Snitz™ Communications