SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: scaling

  1. #1
    SitePoint Member
    Join Date
    Jan 2004
    Location
    Belgium
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    SitePoint Wizard silver trophy rushiku's Avatar
    Join Date
    Dec 2003
    Location
    A van down by the river
    Posts
    2,056
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.


Bookmarks

Posting Permissions

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