PDA

View Full Version : Snowfall javascript is not working in firefox


indianleo
11-26-2008, 05:04 AM
Please check the code I used and pls let me know how to make this script work in firefox. in firefox it snows the to the left top corner but it is static not falling like in Internet Explorer


<script>

var snowmax=35

var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

var snowletter="*"

var sinkspeed=0.6

var snowmaxsize=22

var snowminsize=8

var snowingzone=1


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 ff=browserinfos.match(/ff/)
var opera=browserinfos.match(/Opera/)
var firefox=(browserinfos != null && browserinfos.indexOf( "Firefox/" ) != -1 );
var browserok=ie5||ns6||opera||firefox;

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
}
</script>

davidj
11-26-2008, 05:07 PM
Do you have a link to these sites

I'm intrigued

ranjan
11-26-2008, 09:17 PM
do u have a doctype for the html? please link to your page

PS: easiest way will be to remove doctype from html document. but that would not be the correct way. the script is based on old coding methods and the better way would be to modify the script to work with a doctype

indianleo
11-27-2008, 05:36 AM
So what is the final code

d a v e
11-27-2008, 01:07 PM
So what is the final code

the final code is ...
url to the site as requested!

davidj
11-27-2008, 07:22 PM
ranjan

indianleo likes to copy and paste im afraid

ranjan
11-27-2008, 10:38 PM
See comments in script

Please note this is still quick and dirty, particularly the global variables are a big no no


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
var snowmax=35
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
var snowletter="*"
var sinkspeed=0.6
var snowmaxsize=22
var snowminsize=8
var snowingzone=1

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();
/*Get rid of stupid browser based detection */
//var browserinfos=navigator.userAgent
//var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
//var ns6=document.getElementById&&!document.all
//var ff=browserinfos.match(/ff/)
//var opera=browserinfos.match(/Opera/)
//var firefox=(browserinfos != null && browserinfos.indexOf( "Firefox/" ) != -1 );
/*Detect the required properties instead, Note that a valid doctype is required for this to work*/
var browserok=(window.innerHeight || document.documentElement.clientHeight)?true:false;

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

function initsnow() {
if (window.innerHeight) {
marginbottom = window.innerHeight
marginright = window.innerWidth
}
else if (document.documentElement.clientHeight) {
marginbottom = document.documentElement.clientHeight
marginright = document.documentElement.clientWidth
}
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]) +"px";//proper doctype requires a unit, added px here
snow[i].style.top=snow[i].posy +"px";//proper doctype requires a unit, added px here

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
}
</script>
</head>
<body></body>
</html>

lexius
12-22-2009, 05:38 PM
ranjan
Thank you very much for your script! I also used the old version, and now update the site for new DOCTYPE and the old script does not work in Firefox. Your script is an excellent alternative, but tell me how to insert images instead of the "*". Previously I used:var snowletter=["<img src=images/snow1.gif>","<img src=images/snow2.gif>","<img src=images/snow3.gif>","<img src=images/snow4.gif>","<img src=images/snow5.gif>"];
Now it does not work. How do now, help me please.