Closed Thread Icon

Topic awaiting preservation: I have a big problem - Need some help! (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=24321" title="Pages that link to Topic awaiting preservation: I have a big problem - Need some help! (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: I have a big problem - Need some help! <span class="small">(Page 1 of 1)</span>\

 
Black Hat
Bipolar (III) Inmate

From: Sin City (Can you guess where?)
Insane since: Sep 2004

posted posted 12-07-2004 06:45

Ok guys, I have a weird problem. It does with Javascript and validating. Ok, the JS in question is the following:

code:
<script language="JavaScript" type="text/javascript">
// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=10

// 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=2

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

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

// 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(2*marginbottom-marginbottom-2*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-2*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>



You can see it in action: http://lostcitytinnos.net/imgood.htm

Now it seems to work great! However if you add, say...

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">



It doesn't work.

http://lostcitytinnos.net/imgood2.htm

It works when that code isn't in the document, but when you add the validation information, it doesn't work. Does anyone know why and does anyone have a work around?

Edit: I wanted to add that this is a FireFox 1.0 related issue. It works in Internet Explorer just fine but dont take my word for it, check it out for yourselves!

-----------------------------------------------


(Edited by Black Hat on 12-07-2004 07:00)

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 12-07-2004 16:15

The value of the top and left CSS properties must have units specified. Just add "px" to the end of the style being written and it works.


 

jjarman
Nervous Wreck (II) Inmate

From:
Insane since: Nov 2004

posted posted 12-07-2004 18:22

wow slime, i looked at the code for over 15 min. and didn't catch that.
did you just "see" the problem, or did you use a tool/debugger?

Black Hat
Bipolar (III) Inmate

From: Sin City (Can you guess where?)
Insane since: Sep 2004

posted posted 12-07-2004 19:28

Dude, Im not following what you are saying. .CSS in the javascript? Sorry bro, I really confused now.

-----------------------------------------------

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 12-07-2004 20:21

I'm saying, change

style='position:absolute;top:-"+snowmaxsize+"'

to

style='position:absolute;top:-"+snowmaxsize+"px'

jjarman: The reason I looked for something like that was that he said it stopped working when he put the doctype in. I don't think any browsers actually validate javascript against the standard, so I was looking for a problem in the code that the javascript was generating (since that's what would be treated differently when a doctype is added). I suspected this line quickly because the unit of measurement is a commonly overlooked requirement (usually overlooked because the browser usually doesn't care). I'm glad Firefox is requiring this.

To be complete, you should also change

snow[i].style.top=snow[i].posy

into

snow[i].style.top=snow[i].posy + "px"

and the same with the .left property; however, Firefox doesn't seem to be complaining about that part.


 

Black Hat
Bipolar (III) Inmate

From: Sin City (Can you guess where?)
Insane since: Sep 2004

posted posted 12-07-2004 20:59

Ok I just tried changing everything you said to exactly how you show it but nothing worked. Its still not working.

here it is with the modifyed j-script:

http://lostcitytinnos.net/imgood3.htm

-----------------------------------------------


(Edited by Black Hat on 12-07-2004 21:04)

(Edited by Black Hat on 12-07-2004 21:04)

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 12-07-2004 22:11

Oh, I'm sorry. I accidentally downloaded the version without the doctype earlier, so when it worked I thought it was my change which had fixed it. =)

[edit: but after making the change which I said wasn't necessary, it works. Just add

+ "px"

to the ends of lines 94 and 95 in imgood2.htm.]


 

(Edited by Slime on 12-07-2004 22:14)

Black Hat
Bipolar (III) Inmate

From: Sin City (Can you guess where?)
Insane since: Sep 2004

posted posted 12-07-2004 22:42

So I should do everything you said above plus what you just said to do?

edit: thanks man, figured it out. works now.
-----------------------------------------------


(Edited by Black Hat on 12-07-2004 22:46)

Scott
Paranoid (IV) Inmate

From: schillmania.com
Insane since: Jul 2002

posted posted 12-15-2004 21:06

On a possibly-related note, though not necessarily helpful to solving your problem.. I wrote my own variant of a javascript snow effect last year (I've added some tweaks since.) It works fairly well across most modern browsers, but I'm sure it has its pitfalls also etc.

(Edited by Scott on 12-15-2004 21:07)

« BackwardsOnwards »

Show Forum Drop Down Menu