Closed Thread Icon

Topic awaiting preservation: I have a big problem - Need some help! (Page 1 of 1) Pages that link to <a href="https://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)

« Backwards — Onwards »

Show Forum Drop Down Menu