Snow Effect

Discussion in 'HTML' started by ArbolOne, Mar 28, 2009.

  1. ArbolOne

    ArbolOne Guest

    After reading the instruction in http://www.dynamicdrive.com/dynamicindex3/snow.htm,
    I put the code in a test page, to see how it woulod work.
    Strangely, the snow flakes do now fall they all stay at the top of the
    browser flushing and not falling.

    What have I done wrong?
    T.I.A.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1"
    http-equiv="content-type">
    <title>test</title>
    </head>
    <body>
    <br>
    <script type="text/javascript">
    /******************************************
    * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/
    index.html)
    * Visit Dynamic Drive DHTML code library (http://
    www.dynamicdrive.com/) for full source code
    * Last updated Nov 9th, 05' by DD. This notice must stay intact for
    use
    ******************************************/
    //Configure below to change URL path to the snow image
    var snowsrc="snow.gif"
    // Configure below to change number of snow to render
    var no = 10;
    // Configure whether snow should disappear after x seconds (0=never):
    var hidesnowtime = 0;
    // Configure how much snow should drop down before fading
    ("windowheight" or "pageheight")
    var snowdistance = "pageheight";
    ///////////Stop Config//////////////////////////////////
    var ie4up = (document.all) ? 1 : 0;
    var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")?
    document.documentElement : document.body
    }
    var dx, xp, yp; // coordinate and position variables
    var am, stx, sty; // amplitude and step variables
    var i, doc_width = 800, doc_height = 600; if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
    } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
    }
    dx = new Array();
    xp = new Array();
    yp = new Array();
    am = new Array();
    stx = new Array();
    sty = new Array();
    snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" :
    snowsrc
    for (i = 0; i < no; ++ i) { dx = 0; // set coordinate variables
    xp = Math.random()*(doc_width-50); // set position variables
    yp = Math.random()*doc_height;
    am = Math.random()*20; // set amplitude variables
    stx = 0.02 + Math.random()/10; // set step variables
    sty = 0.7 + Math.random(); // set step variables
    if (ie4up||ns6up) {
    if (i == 0) {
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-
    INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=
    \"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><
    \/div>");
    } else {
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-
    INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img
    src='"+snowsrc+"' border=\"0\"><\/div>");
    }
    }
    }
    function snowIE_NS6() { // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest
    ().clientWidth-10;
    doc_height=(window.innerHeight && snowdistance=="windowheight")?
    window.innerHeight : (ie4up && snowdistance=="windowheight")?
    iecompattest().clientHeight : (ie4up && !window.opera &&
    snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest
    ().offsetHeight;
    for (i = 0; i < no; ++ i) { // iterate for every dot
    yp += sty;
    if (yp > doc_height-50) {
    xp = Math.random()*(doc_width-am-30);
    yp = 0;
    stx = 0.02 + Math.random()/10;
    sty = 0.7 + Math.random();
    }
    dx += stx;
    document.getElementById("dot"+i).style.top=yp+"px";
    document.getElementById("dot"+i).style.left=xp + am*Math.sin(dx
    )+"px"; }
    snowtimer=setTimeout("snowIE_NS6()", 10);
    }
    function hidesnow(){
    if (window.snowtimer) clearTimeout(snowtimer)
    for (i=0; i<no; i++) document.getElementById
    ("dot"+i).style.visibility="hidden"
    }
    if (ie4up||ns6up){
    snowIE_NS6();
    if (hidesnowtime>0)
    setTimeout("hidesnow()", hidesnowtime*1000)
    }
    </script>
    </body>
    </html>
     
    ArbolOne, Mar 28, 2009
    #1
    1. Advertising

  2. ArbolOne

    John Hosking Guest

    ArbolOne wrote:
    > After reading the instruction in http://www.dynamicdrive.com/dynamicindex3/snow.htm,
    > I put the code in a test page, to see how it woulod work.
    > Strangely, the snow flakes do now fall they all stay at the top of the
    > browser flushing and not falling.
    >
    > What have I done wrong?


    Failed to provide a URL. ;-)

    But I'm looking at <http://www.altan.hr/snow/>, which I presume is the
    page in question, and in FF2 or IE6 or Safari Win 3.1.1, with JS on, the
    snowflakes fall from the top of the page to a point V farther down the
    page, where V is the height of the viewport at the moment of viewing.
    The results appear different, therefore, depending on how much I've
    scrolled vertically.

    Since this is clearly* a JS question, I suggest you look for further
    help in comp.lang.javascript.

    * Assuming it's not just some weirdness in one browser/PC of yours.

    --
    John
    Pondering the value of the UIP: http://improve-usenet.org/
     
    John Hosking, Mar 28, 2009
    #2
    1. Advertising

  3. ArbolOne

    cwdjrxyz Guest

    On Mar 27, 10:19 pm, ArbolOne <> wrote:
    > After reading the instruction inhttp://www.dynamicdrive.com/dynamicindex3/snow.htm,
    > I put the code in a test page, to see how it woulod work.
    > Strangely, the snow flakes do now fall they all stay at the top of the
    > browser flushing and not falling.
    >
    > What have I done wrong?


    That script you use is ancient and comes from the height of the
    browser war era when you had to write 3 different script paths after
    detecting if you had NN4, IE4+, or NN6+. I am not about to go through
    code that uses NN4 layers at this late date. However I have an old
    version of this code that uses an external script so you don't have to
    write a lot of script every time you use the effect on a new page, It
    strips the path for NN4 to greatly reduce code clutter, and it still
    works for IE4 up to today. However since the same script can now be
    used for most browsers in current use, the code could be made even
    more simple today by dropping IE4 support. It also uses the standard
    keyboard symbol "*" instead of crude images of snowflakes to speed
    things up and also make the code more simple.

    See http://www.cwdjr.net/dhtml/snow_link2.html. This is quite simple.
    When you right click to see the code, you will find the url for the
    external script which you can copy. I checked this out on several
    current browsers, and it works on the most recent versions of IE7,
    Firefox, Opera, Saffari for Windows, K-Meleon, Flock, and Seamonkey.
    Thus it should still be usable for most current browsers. I am not
    about to take the time to update this old code, since I doubt if I
    will ever use it again. Using flash might be the most simple path for
    this sort of thing now. Also, when Java was more popular than now, you
    could do elaborate effects with it. A Java confetti effect is shown
    at: http://www.cwdjr.net/java/burlesque_house.html . This will still
    work on at least some browsers. However I am not going to take the
    time to check it in detail because I likely will never use it.
     
    cwdjrxyz, Mar 28, 2009
    #3
  4. ArbolOne

    rf Guest

    ArbolOne wrote:
    > After reading the instruction in
    > http://www.dynamicdrive.com/dynamicindex3/snow.htm, I put the code in
    > a test page, to see how it woulod work.
    > Strangely, the snow flakes do now fall they all stay at the top of the
    > browser flushing and not falling.
    >
    > What have I done wrong?


    You forgot to wait for Winter. It's still the middle of Summer over here.
     
    rf, Mar 28, 2009
    #4
  5. On Mar 27, 11:19 pm, ArbolOne <> wrote:
    > What have I done wrong?


    First you tried to put snow falling on your site...
     
    Travis Newbury, Mar 28, 2009
    #5
  6. ArbolOne

    dorayme Guest

    In article
    <>,
    Travis Newbury <> wrote:

    > On Mar 27, 11:19 pm, ArbolOne <> wrote:
    > > What have I done wrong?

    >
    > First you tried to put snow falling on your site...


    What is wrong with this? As long as the snow piles up and covers all the
    text and stuff, and there are some Xmas carols playing with that
    wonderfully magic muffled sounds of bells and stuff...

    btw there are surely better ways to make nicer less boring snow flake
    shapes and to have them vary in size amongst themselves than has been
    seen so far?

    --
    dorayme
     
    dorayme, Mar 28, 2009
    #6
  7. ArbolOne

    rf Guest

    cwdjrxyz wrote:
    > On Mar 27, 10:19 pm, ArbolOne <> wrote:
    >> After reading the instruction
    >> inhttp://www.dynamicdrive.com/dynamicindex3/snow.htm, I put the code
    >> in a test page, to see how it woulod work.
    >> Strangely, the snow flakes do now fall they all stay at the top of
    >> the
    >> browser flushing and not falling.
    >>
    >> What have I done wrong?

    >
    > That script you use is ancient


    Probably because the snowflake effect is also ancient, like the lake mirror
    effect and blinking text and all the other things from last century.
    Although the marquee still seems to live on a little.

    These days we are into in your-face-flash movies that never stop and drag
    the eye totally away from the content.

    Then again perhaps dorayme has it right, just cover up the content with a
    snowdrift :)

    http://mulubinba.com.au/pictures.chapter5.html?image=4087
     
    rf, Mar 28, 2009
    #7
  8. ArbolOne

    cwdjrxyz Guest

    On Mar 28, 5:57 am, dorayme <> wrote:
    > In article
    > <>,
    >  Travis Newbury <> wrote:
    >
    > > On Mar 27, 11:19 pm, ArbolOne <> wrote:
    > > > What have I done wrong?

    >
    > > First you tried to put snow falling on your site...

    >
    > What is wrong with this? As long as the snow piles up and covers all the
    > text and stuff, and there are some Xmas carols playing with that
    > wonderfully magic muffled sounds of bells and stuff...


    Your wish is granted. Get a nice midi of jingle bells at
    http://millennium.fortunecity.com/kirkwall/394/christmas_midi.html
    .. :).

    > btw there are surely better ways to make nicer less boring snow flake
    > shapes and to have them vary in size amongst themselves than has been
    > seen so far?


    You have to remember that the dhtml snow effect came from the browser
    war era when many people thought they had a high speed connection if
    it really was a 56K one. It would be easy to add different shapes and
    sizes of image flakes, but you would be unable to show more than a
    very few flakes falling.

    Java is more capable of giving a more realistic snow effect. See
    http://javaboutique.internet.com/RealSnow/ for a demo and for free
    code. You get variation in size and shape of the flakes. You can
    control wind turbulence and amount of snow.

    I am waiting with baited breath to see you demonstrate a beautiful
    application of this Java snow effect. And don't forget to include the
    jingle bells midi, but make it play at full volume. :).
     
    cwdjrxyz, Mar 28, 2009
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. stevesnow
    Replies:
    1
    Views:
    286
    Bruno Desthuilliers
    Apr 5, 2007
  2. Tim Streater

    Re: [OT - completley] SNOW.

    Tim Streater, Apr 6, 2008, in forum: HTML
    Replies:
    0
    Views:
    373
    Tim Streater
    Apr 6, 2008
  3. dorayme

    Re: [OT - completley] SNOW.

    dorayme, Apr 6, 2008, in forum: HTML
    Replies:
    2
    Views:
    365
    dorayme
    Apr 7, 2008
  4. Blinky the Shark

    Re: [OT - completley] SNOW.

    Blinky the Shark, Apr 6, 2008, in forum: HTML
    Replies:
    8
    Views:
    356
    Tim Streater
    Apr 8, 2008
  5. JKD

    snow effect

    JKD, Nov 19, 2003, in forum: Javascript
    Replies:
    1
    Views:
    102
    cwdjr
    Nov 19, 2003
Loading...

Share This Page