I am trying to get the "Snow Flake" java script running that is posted on the "LowTechGeezer's" web site (under "java scripts/page effects).

What I get is "snowing" squares with a red x in the center but no snow flakes.

The snow flake images are loaded in the root on my web host server. The name of the folder containing the snowflake images is named "snowflakes" and the five image files are named "image1.gif","image2.png", "image3.png", "image4.png", "image5.png".

I modified the custom header as follows:

<script type=”text/javascript”>
// User defined parameters
var upd_speed = 50;
var num_flakes = 10
var snowflakes = new Array(
“./snowflakes/image1.gif”,
“./snowflakes/image2.png”,
“./snowflakes/image3.png”,
“./snowflakes/image4.png”,
“./snowflakes/image5.png”);
</script>
// Include script file
<script src=”snow.js” type=”text/javascript”></script>
<script type=”text/javascript”>
startSnow();
</script>

Any idea what I am doing wrong?

Thanks for your help.

Franz

Can you post a link to your page?

The code is expecting the images to be in a folder called "/snowflakes". You have them in your root folder which is unnecessary. I suspect you don't actually have them in your snowflakes folder -- worth a double-check.

I copied and pasted your code (above) into a test project. Then created a /snowflakes folder under by [root] directory and placed 5 images there. The script worked, so I suspect that Bruce may be correct and your snowflakes folder is not a sub-directory of your [root]. Also double check and make sure all your image file names are correct.

Thanks for all your help. I did double check that the "snowflakes" folder is in the root folder (public_html. All the spelling seems to be right. So, I am not sure what is going on.

For your info, I attached the prototype URL for my site.

Thank you.

FranzFranz Zihlmann Photo

Just to complete the information, here is the Java Script that I am using:

<SCRIPT type="text/javascript">
/*Script distributed by Hypergurl.com Visit
http://www.hypergurl.com/easyhtml.html for this script and many more
*/
// This part preloads images. You can use different images.
// Change URL path to the snow image below
grphcs=new Array(6);
Image0=new Image(); Image0.src=grphcs[0]="snow.gif";
Image1=new Image(); Image1.src=grphcs[1]="snow.gif";
Image2=new Image(); Image2.src=grphcs[2]="snow.gif";
Image3=new Image(); Image3.src=grphcs[3]="snow.gif";
Image4=new Image(); Image4.src=grphcs[4]="snow.gif";
Image5=new Image(); Image5.src=grphcs[5]="snow.gif";
// Configure below - change number of snow to render
Amount=15;
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];
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else if (ns6) {
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
document.getElementById("si"+i).style.top=Ypos[i]+hscrll;
}
else {
eval("document.all.si"+i).style.left=Xpos[i];
eval("document.all.si"+i).style.top=Ypos[i]+hscrll;
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',115);
}
window.onload=fall
//-->
</SCRIPT>

Is my face red! I am so very sorry. Somehow I managed to include the wrong snow.js script in the zip file you downloaded. I have updated the zip file with the correct script, so if you download it again, it should work. Again, I apologize for the inconvenience this has caused you.

Larry, thanks again - and NO need to be red faced - your help over the past has been fantastic!

I did download the new script and something weird is happening. When I paste the code into my home page using the "Enter Code" icon, the Java script does not display in the newly created window. However, when I "Preview" the home page, the window now shows with the java script text in it. However, I believe the code is not executing. Is there also a new custom header with the new script?

Franz

The code is designed to be included in the header via the way you had it in your initial post. The code is missing the <script> tags. Since the script is included on the page via the src= line, these would cause an error if found inside the included file. But if you paste the code inside a code object, it would need the <script> tags.

I am way over my head on this......

Could you please be a little bit more explicit what I need to do.

Thanks for your patience and help.

Franz

Upload the snow.js script again. What you were using:

quote:

<script type=”text/javascript”>
// User defined parameters
var upd_speed = 50;
var num_flakes = 10
var snowflakes = new Array(
“./snowflakes/image1.gif”,
“./snowflakes/image2.png”,
“./snowflakes/image3.png”,
“./snowflakes/image4.png”,
“./snowflakes/image5.png”);
</script>
<script src=”snow.js” type=”text/javascript”></script>
<script type=”text/javascript”>
startSnow();
</script>

should work with the updated script.

No cigar. See my web page:

Franz Zihlmann Photo

Here are the stepps i took:

1. I included the "snow.js" in my home page using the SiteSpinner "Enter Code Text" icon. This created a new window on the home page showing the Java code text.

2. I added the header script using the Page Editor "Header" tab.

3. I uploaded the web site using the SiteSpinner "Publish" function

4. I uploded the Snowflake images to the root of my my web host

The haeder code is as follows:

<script type=”text/javascript”>
// User defined parameters
var upd_speed = 50;
var num_flakes = 10
var snowflakes = new Array(
“./snowflakes/image1.gif”,
“./snowflakes/image2.png”,
“./snowflakes/image3.png”,
“./snowflakes/image4.png”,
“./snowflakes/image5.png”);
</script>
<script src=”snow.js” type=”text/javascript”></script>
<script type=”text/javascript”>
startSnow();
</script>

The snow.js script I used is as follows:

// Snow Effect Javascript
// copyright 19th November 2004, 20th July 2006 by Stephen Chapman
// permission to use this Javascript on your web page is granted
// provided that all of the code in this script (including these
// comments) is used without any alteration
// you can change the number of snow flakes if you like

//var num_flakes = 10;
//var snowflakes = new Array("./image/snowflake.gif","./image/snowflake1.gif");
//var upd_speed = 50;

// DOM test
var aDOM = 0, ieDOM = 0, nsDOM = 0;
var stdDOM = document.getElementById;

if (stdDOM)
aDOM = 1;
else {
ieDOM = document.all;
if (ieDOM)
aDOM = 1;
else {
var nsDOM = ((navigator.appName.indexOf('Netscape') != -1)
&& (parseInt(navigator.appVersion) ==4));
if (nsDOM) aDOM = 1;
}
}

function findDOM(objectId, wS) {
if (stdDOM)
return wS ? document.getElementById(objectId).style:
document.getElementById(objectId);
if (ieDOM)
return wS ? document.all[objectId].style: document.all[objectId];
if (nsDOM)
return document.layers[objectId];
}

// window size tests
function findLivePageWidth() {
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth :700;
}

function findLivePageHeight() {
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight :500;
}

function posX() {
return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;
}

function posY() {
return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;
}

// make it snow
var movw = new Array();
var movh = new Array();
var move = new Array();
var stepw = new Array();
var steph = new Array();
var posw = new Array();
var posh = new Array();
var dir = new Array();
var winWidth;var winHeight;

function moreSnow() {
for (var i = 0; i < num_flakes; i++) {
if (posh[i] > winHeight-50) {
posw[i] = 10 + Math.random()*(winWidth-movw[i]-30);
posh[i] = 0;
dir[i] = (Math.random()<0.5)?1:-1;
stepw[i] = 0.02 + Math.random()/9;
steph[i] = 1.3 + Math.random();
}
move[i] += stepw[i] *dir[i];
if (Math.abs(move[i]) > 3) {
dir[i] = -dir[i];
posh[i] += Math.abs(movh[i]*move[i]);
posw[i] += movw[i]*move[i];
move[i]=0;
}
objstyle = findDOM('snow'+i,1);
objstyle.left = (posX() + posw[i] + movw[i]*move[i])+'px';
objstyle.top = (posY() + posh[i] + movh[i]*(Math.abs(Math.cos(move[i])+move[i])))+'px';
objstyle.visibility = 'visible';
}
setTimeout("moreSnow()", upd_speed);
}

function startSnow() {
winWidth = findLivePageWidth() - 75;
winHeight = findLivePageHeight() - 50;
for (var i = 0; i < num_flakes; i++) {
move[i] = 0;
movh[i] = 12 + Math.random() * 2;
movw[i] = 11 + Math.random() * 4;
posw[i] = Math.random() * (winWidth-35) + 12;
posh[i] = Math.random() * winHeight;
stepw[i] = 0.02 + Math.random() / 10;
steph[i] = 0.7 + Math.random();
dir[i] = (Math.random()>0.5)?1:-1;
document.write('<div id="snow'+ i +'" style="position: absolute; z-index: '+ i +'; visibility:hidden; "><img src="'+snowflakes[Math.floor(Math.random()*snowflakes.length)]+ '" border="0"></div>');
}
setTimeout("moreSnow()", upd_speed);
}

The script needs to be included in a custom header, not a code object. The original method did this by using:

<script src=”snow.js” type=”text/javascript”></script>  

to include the script. If you upload the current snow.js script (as a separate file, not part of the page) to your root directory, it should work.

I guess I have to give up. I uploaded the snow.js script to the root but it does not work.

As before, I included the following Custom Header (using the Page Editor "header" tab):

<script type=”text/javascript”>
// User defined parameters
var upd_speed = 50;
var num_flakes = 10
var snowflakes = new Array(
“./snowflakes/image1.gif”,
“./snowflakes/image2.png”,
“./snowflakes/image3.png”,
“./snowflakes/image4.png”,
“./snowflakes/image5.png”);
</script>
<script src=”snow.js” type=”text/javascript”></script>
<script type=”text/javascript”>
startSnow();
</script>

FYI - i checked the code in the "About.com/ Stephen Chapman)site and it appears that the code listed in that site and what I downloaded from he "http://sitespinner.lowtechgeezer.com/" site do not match.

Yes, the scripts are different. I modified Stephan Chapman's code slightly to get it to run in SiteSpinner.

I have your page working here. I needed to modify the code you posted for your custom header. The code shown is using "smart" quotes around the text, which is not HTML standard. I changed them to normal double-quotes and the code worked. Could this be the problem? You also need to extract this part of the code:

<script type="text/javascript">
startSnow();
</script>  

place it into its own code object, and position it before the closing </body> tag (use the "to Front" button).

Hi folks,

I created a little snowflake animation with SiteSpinner Pro, you can view it here.

It took about 10 minutes, and can be added to any SiteSpinner Pro page. I'll post a link to a short tutorial on how to reproduce it if you like (you might also be seeing it in an upcoming SiteSpinner Newsletter).

I have done a little playing with animation for SSPro, but can't figure out how you did that.

There are seven snowflakes and seven black strips of varying widths -- I suspect the width controls the horizontal track of the snowflake. But that's as far as I can go....

There are some devious minds at VM

Just a detail that might help. If you use SS Publisher to upload your files to the server add the snow.js file as a Foreign Object (Publish File format) to your page and not as a Code Object.

Snowflake Tutorial

• use the Mona Lisa icon to import snowflake.gif (you can download ours from here)
  
• click on the Polygon tool on the left tool bar, then hold the left mouse button down and scribble a vertical line down the page where you want your snowflake to fall. Double-click where you want it to end
  
• use your mouse to select the snowflake, then open the Action Editor on the left tool bar and go to the Paths tab. For 'Follow Object Path', select the polygon object you just created. Click OK
  
• Preview

You should see that you snowflake follows the vertical line you created. That is the basics of the animation. To clean things up:

Select the vertical line, and go to Special FX, and select Hide While Loading, and then Hide After Loading

Select the snowflake and select Hide While Loading.

To make the snowflake repeat, select it and open the Action Editor again. This time go to the Timing tab, and select Loop. Here you can also select the speed that the snowflake falls, as well as other things.

To make things easier when creating multiple snowflakes, you can rename any of the objects. For example, you can name the polygon trails traill1, trail2, etc. This makes it easier when it comes to assigning the snowflake to the particular path.

The project file for our snowflake page can be downloaded from here. Set the background to white to see the trails.