SitePoint Sponsor

# Thread: scaling

1. ## scaling

I use a JS to generate snowflakes on a HTML page.
I want to calculate the size of the snowflakes by using the Math.random() function to get a great variety. I just can't find the right method to do so.

The line where it's all about (to my opinion) is:

document.all["dot"+i].scaleX = document.all["dot"+i].scaleY = 20+Math.random()*30;

<script language="JavaScript1.2">

var number = 30; // number of snowflakes
var speed = 20; //lower number=faster snowflakes
var snowflake = "snow4.gif";

var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp; // coordinates and position of variables
var am, stx, sty; // amplitude and steps of variables
var i, doc_width = 800, doc_height = 600;

if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < number; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position on X and Y
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude
stx[i] = 0.02 + Math.random()/10; // set number steps X
sty[i] = 0.7 + Math.random(); // set number steps Y

if (ie4up) { // set div voor IE
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION:absolute; Z-INDEX: "+ i +"; VISIBILITY:visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowflake+"' border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION:absolute; Z-INDEX: "+ i +"; VISIBILITY:visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowflake+"' border=\"0\"></div>");
}
}
}

function snowIE() { // IE main animation function
for (i = 0; i <number; ++ i) { // iterate for every dot
yp[i] += sty[i];

if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
document.all["dot"+i].scaleX = document.all["dot"+i].scaleY = 20+Math.random()*30;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

}
setTimeout("snowIE()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}

</script>

Thanks

2. What's it doing or not doing?

scaleX? where are you getting this from? (it's not a property of the img.style object in IE)

Also, you're trying to size the image, but are referring to the div that contains the image, no change will take place even if you successfully set a property that controls size. (give the img the id, not the div)

Try pixelHeight and pixelWidth, you'll also probably want to parseInt() the result from the math before assigning it.

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•