Snow Effect

A

ArbolOne

After reading the instruction in http://www.dynamicdrive.com/dynamicindex3/snow.htm,
I put the code in a test page, to see how it woulod work.
Strangely, the snow flakes do now fall they all stay at the top of the
browser flushing and not falling.

What have I done wrong?
T.I.A.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>test</title>
</head>
<body>
<br>
<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="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 = 0; // set coordinate variables
xp = Math.random()*(doc_width-50); // set position variables
yp = Math.random()*doc_height;
am = Math.random()*20; // set amplitude variables
stx = 0.02 + Math.random()/10; // set step variables
sty = 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 += sty;
if (yp > doc_height-50) {
xp = Math.random()*(doc_width-am-30);
yp = 0;
stx = 0.02 + Math.random()/10;
sty = 0.7 + Math.random();
}
dx += stx;
document.getElementById("dot"+i).style.top=yp+"px";
document.getElementById("dot"+i).style.left=xp + am*Math.sin(dx
)+"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>
</body>
</html>
 
J

John Hosking

ArbolOne said:
After reading the instruction in http://www.dynamicdrive.com/dynamicindex3/snow.htm,
I put the code in a test page, to see how it woulod work.
Strangely, the snow flakes do now fall they all stay at the top of the
browser flushing and not falling.

What have I done wrong?
Click to expand...

Failed to provide a URL. ;-)

But I'm looking at <http://www.altan.hr/snow/>, which I presume is the
page in question, and in FF2 or IE6 or Safari Win 3.1.1, with JS on, the
snowflakes fall from the top of the page to a point V farther down the
page, where V is the height of the viewport at the moment of viewing.
The results appear different, therefore, depending on how much I've
scrolled vertically.

Since this is clearly* a JS question, I suggest you look for further
help in comp.lang.javascript.

* Assuming it's not just some weirdness in one browser/PC of yours.
 
C

cwdjrxyz

After reading the instruction inhttp://www.dynamicdrive.com/dynamicindex3/snow.htm,
I put the code in a test page, to see how it woulod work.
Strangely, the snow flakes do now fall they all stay at the top of the
browser flushing and not falling.

What have I done wrong?
Click to expand...

That script you use is ancient and comes from the height of the
browser war era when you had to write 3 different script paths after
detecting if you had NN4, IE4+, or NN6+. I am not about to go through
code that uses NN4 layers at this late date. However I have an old
version of this code that uses an external script so you don't have to
write a lot of script every time you use the effect on a new page, It
strips the path for NN4 to greatly reduce code clutter, and it still
works for IE4 up to today. However since the same script can now be
used for most browsers in current use, the code could be made even
more simple today by dropping IE4 support. It also uses the standard
keyboard symbol "*" instead of crude images of snowflakes to speed
things up and also make the code more simple.

See http://www.cwdjr.net/dhtml/snow_link2.html. This is quite simple.
When you right click to see the code, you will find the url for the
external script which you can copy. I checked this out on several
current browsers, and it works on the most recent versions of IE7,
Firefox, Opera, Saffari for Windows, K-Meleon, Flock, and Seamonkey.
Thus it should still be usable for most current browsers. I am not
about to take the time to update this old code, since I doubt if I
will ever use it again. Using flash might be the most simple path for
this sort of thing now. Also, when Java was more popular than now, you
could do elaborate effects with it. A Java confetti effect is shown
at: http://www.cwdjr.net/java/burlesque_house.html . This will still
work on at least some browsers. However I am not going to take the
time to check it in detail because I likely will never use it.
 
D

dorayme

Travis Newbury said:
First you tried to put snow falling on your site...
Click to expand...

What is wrong with this? As long as the snow piles up and covers all the
text and stuff, and there are some Xmas carols playing with that
wonderfully magic muffled sounds of bells and stuff...

btw there are surely better ways to make nicer less boring snow flake
shapes and to have them vary in size amongst themselves than has been
seen so far?
 
R

rf

cwdjrxyz said:
That script you use is ancient
Click to expand...

Probably because the snowflake effect is also ancient, like the lake mirror
effect and blinking text and all the other things from last century.
Although the marquee still seems to live on a little.

These days we are into in your-face-flash movies that never stop and drag
the eye totally away from the content.

Then again perhaps dorayme has it right, just cover up the content with a
snowdrift :)

http://mulubinba.com.au/pictures.chapter5.html?image=4087
 
C

cwdjrxyz

What is wrong with this? As long as the snow piles up and covers all the
text and stuff, and there are some Xmas carols playing with that
wonderfully magic muffled sounds of bells and stuff...
Click to expand...

Your wish is granted. Get a nice midi of jingle bells at
http://millennium.fortunecity.com/kirkwall/394/christmas_midi.html
.. :).
btw there are surely better ways to make nicer less boring snow flake
shapes and to have them vary in size amongst themselves than has been
seen so far?
Click to expand...

You have to remember that the dhtml snow effect came from the browser
war era when many people thought they had a high speed connection if
it really was a 56K one. It would be easy to add different shapes and
sizes of image flakes, but you would be unable to show more than a
very few flakes falling.

Java is more capable of giving a more realistic snow effect. See
http://javaboutique.internet.com/RealSnow/ for a demo and for free
code. You get variation in size and shape of the flakes. You can
control wind turbulence and amount of snow.

I am waiting with baited breath to see you demonstrate a beautiful
application of this Java snow effect. And don't forget to include the
jingle bells midi, but make it play at full volume. :).
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

how change from down to up to up to down 1
JavaScript: how to keep track of the circle in canvas on specific path? 0
How to fix this javascript to work in Netscape 7.1 and 4.x (also for IE4 and IE6) 2
how can i get te bubbels from top to down 1
Closing an overlay outside the overlay as well 1
Help with code 0
I need help making a zooming function 11
Help with my responsive home page 2

Members online

No members online now.
Total: 22 (members: 0, guests: 22)
Robots: 162

Forum statistics

Threads
473,755
Messages
2,569,534
Members
45,008
Latest member
Rahul737

Latest Threads

Top