Let it snow (Trying to accomplish this)

[Chezshire]

Hi everyone,

  First let me say that I am at best a novice when it comes to code. Generally speaking i can copy a script and plug it in and get it working (usually). Currently I'm trying to get it to snow for the holidays on a friend's gaming site for the holidays as a present. I've tested the code and it works in all browsers (www.xaviers-children.net/snow.php) but when I try to plug the script in so that it works throughout the site by having it delivered through the header, it only works in I.E. Im safari and firefox, the snowflakes accumulate in a single spot (in the upper right corner of the surreal portrait of Professor Xavier - it's a fun x-men site )

 

Site url: www.xaviers-children.net/welcome.php

test url: www.xaviers-children.net/snow.php

 

Javascript code:

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Set the letter that creates your snowflake (recommended:*)
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6

// Set the maximal-size of your snowflaxes
var snowmaxsize=22

// Set the minimal-size of your snowflaxes
var snowminsize=8

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing 
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////


// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent 
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie5||ns6||opera

function randommaker(range) {		
rand=Math.floor(range*Math.random())
    return rand
}

function initsnow() {
if (ie5 || opera) {
	marginbottom = document.body.clientHeight
	marginright = document.body.clientWidth
}
else if (ns6) {
	marginbottom = window.innerHeight
	marginright = window.innerWidth
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
	crds[i] = 0;                      
    	lftrght[i] = Math.random()*15;         
    	x_mv[i] = 0.03 + Math.random()/10;
	snow[i]=document.getElementById("s"+i)
	snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
	snow[i].size=randommaker(snowsizerange)+snowminsize
	snow[i].style.fontSize=snow[i].size
	snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
	snow[i].sink=sinkspeed*snow[i].size/5
	if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
	if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
	if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
	if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
	snow[i].posy=randommaker(6*marginbottom-marginbottom-6*snow[i].size)
	snow[i].style.left=snow[i].posx
	snow[i].style.top=snow[i].posy
}
movesnow()
}

function movesnow() {
for (i=0;i<=snowmax;i++) {
	crds[i] += x_mv[i];
	snow[i].posy+=snow[i].sink
	snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
	snow[i].style.top=snow[i].posy

	if (snow[i].posy>=marginbottom-6*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
		if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
		if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
		if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
		if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
		snow[i].posy=0
	}
}
var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
window.onload=initsnow
}

 

 

Any help is greatly appreciated

Thank you everyone and cheers/happy holidays to one and all alike

 

 

[Chezshire]

I was able to make the script work on FF as long as it was not colliding with all the APIs that are referenced on the page (jQuery, Scriptaculous, etc.)

 

So I added the following code at the bottom of the 'snow' JS:

 

if (browserok) {

      addOnload(initsnow);

}

 

function addOnload(myfunc)

{//addOnload function allows us to attach

    if(window.addEventListener){

        window.addEventListener('load', myfunc, false);

    }else if(window.attachEvent){

        window.attachEvent('onload', myfunc);

    }

}

 

 

But it is only working on firefox and I.E. (and safari I think) for the PC. Anyone have any suggestions - I am very defeated at this point

 

 

 

[Philip]

For a lightweight "onLoad"cross-browser script I use a tweaked version of this one:

http://ryanmorr.com/archives/ondomready-no-browser-sniffing