PDA

View Full Version : Snow Effect



Darmy
12-02-2005, 04:29 AM
http://www.dynamicdrive.com/dynamicindex3/snow.htm

We can not figure out where to put our URL.

We have this but it is not working....

<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://img.photobucket.com/albums/v248/Darmy/snow.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+"' 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+"' 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-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();
}
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>

Darmy
12-02-2005, 04:44 AM
Link to snowflake
http://img.photobucket.com/albums/v248/Darmy/snow.gif

jscheuer1
12-02-2005, 06:06 AM
Your script works fine here in FF. In IE, on a blank page, there are problems. This is true of the demo as well. In fact, if you do not have enough content on your page to fill the window, the effect will stop at the bottom of your content. This kludge seems to take care of the problem for short pages though, put this in the head of your page:


<style type="text/css">
body {
height:100%;
}
</style>

Darmy
12-02-2005, 11:47 AM
Thank you very much for the suggestion.

On our board though we don't get an effect at all. We just get the entire script showing up on the top half of our board. We are using an ezboard, is there something different we have to do to get images instead of words?

jscheuer1
12-02-2005, 04:35 PM
If putting that body style declaration in the head of the page doesn't solve it and using:

style="height:100%;"

in the body tag*, ex"


<body style="height:100%;">

doesn't either**, there may be a problem in using remotely hosted images on your server. Or, there may be a conflict. Since your code worked locally here (with the remote hosted image, once I added the style to the page), I'd need to see it live to figure out if there is a fix:

.

Notes:

* only one <body> tag allowed per page, add the style attribute to the existing <body> tag. ** Use only one or the other of these two methods for setting body height.

Darmy
12-02-2005, 11:47 PM
I figured it out. =) I had to put it in the <Custome Header> box. Thank you for all your help though.

One more question is there a way to speed it up?

jscheuer1
12-03-2005, 04:52 AM
There may be a way to speed it up but, the script, as written, is already 'pegged'. If you want faster falling effects, it would be easier to simply use a different script. This demo (http://home.comcast.net/~jscheuer1/side/bubble_leaves_bidirect.htm), although running bottom to top, can run top to bottom, it is in the configuration. You can use your snowflake instead of the bubble and the speed is configurable as well, with more variation available than with the current script you are using. The whole issue about setting the body height is unnecessary with this script as well.

Darmy
12-04-2005, 08:16 AM
THANKS!!! You have been most helpful and everyone LOVES the snow on our board. =)

Racer X
12-05-2005, 01:55 AM
I am having the same problem. Can some help me also?

jscheuer1
12-05-2005, 04:03 AM
I would suggest using the demo mentioned in post_#7 (http://www.dynamicdrive.com/forums/showpost.php?p=22326&postcount=7) of this thread, or if you still want to use the original script, which I feel is outdated, follow the instructions about adding style and/or content to the body of your page as described in the earlier portions of this thread.

Ms.Brasil
11-11-2006, 03:34 PM
H


Hi I am new to here and I recently got this snow effect as well. I managed to make it appear on my screen/computer. But others on my board aren't seeing the snow effect? I have 2 computers here and noticed its not appearing on the other. Any ideas on how to fix this? Here is how I have it...


<center><br>
<table border="0" bordercolor="#FFFFF" cellpadding="11" cellspacing="0" width="700">
<tr><td bgcolor="#FFFFFF">
<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %>
<% STATS %><br />

</style><center>Skin created by <b>Vision</b> of the <a href=http://ifsz.net><b>InvisionFree Skin Zone.net</b></a></center><style type="text/css">

<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://i36.photobucket.com/albums/e31/MsBrasil/snow2.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+"' 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+"' 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-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();
}
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>

That is placed on the board&Header part..any help would be great! I use Invisionfree boards if that helps

jscheuer1
11-11-2006, 07:20 PM
See:

http://www.dynamicdrive.com/forums/showpost.php?p=22417&postcount=10

Ms.Brasil
11-12-2006, 03:03 AM
Thanks for your reply I haven't check if it works on the other computer yet and if my members can see it yet. But is there a way to make the snow/leaves fall down instead of up? The bubble one makes them float up.

jscheuer1
11-12-2006, 04:10 AM
From the configuration:


var dir=-1 // Set 'falling' direction (1 for down, -1 for up)

Ms.Brasil
11-12-2006, 08:39 PM
Thanks alot

farbeit
02-08-2007, 01:28 PM
This demo (http://home.comcast.net/~jscheuer1/side/bubble_leaves_bidirect.htm), although running bottom to top, can run top to bottom...John, Your script fixes many of the bugs found in the original - great work! Is it possible to change your script to run images from left to right?