Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Snow Effect

  1. #1
    Join Date
    Dec 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Snow Effect

    http://www.dynamicdrive.com/dynamicindex3/snow.htm

    We can not figure out where to put our URL.

    We have this but it is not working....

    <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="http://img.photobucket.com/albums/v248/Darmy/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[i] = 0; // set coordinate variables
    xp[i] = Math.random()*(doc_width-50); // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20; // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 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[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();
    }
    dx[i] += stx[i];
    document.getElementById("dot"+i).style.top=yp[i]+"px";
    document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"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>
    Last edited by Darmy; 12-02-2005 at 03:43 AM.

  2. #2
    Join Date
    Dec 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,677
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    Your script works fine here in FF. In IE, on a blank page, there are problems. This is true of the demo as well. In fact, if you do not have enough content on your page to fill the window, the effect will stop at the bottom of your content. This kludge seems to take care of the problem for short pages though, put this in the head of your page:

    Code:
    <style type="text/css">
    body {
    height:100%;
    }
    </style>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Dec 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much for the suggestion.

    On our board though we don't get an effect at all. We just get the entire script showing up on the top half of our board. We are using an ezboard, is there something different we have to do to get images instead of words?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,677
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    If putting that body style declaration in the head of the page doesn't solve it and using:

    style="height:100%;"

    in the body tag*, ex"

    HTML Code:
    <body style="height:100%;">
    doesn't either**, there may be a problem in using remotely hosted images on your server. Or, there may be a conflict. Since your code worked locally here (with the remote hosted image, once I added the style to the page), I'd need to see it live to figure out if there is a fix:

    PLEASE: Include the URL to your problematic webpage that you want help with.

    Notes:

    * only one <body> tag allowed per page, add the style attribute to the existing <body> tag. ** Use only one or the other of these two methods for setting body height.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I figured it out. =) I had to put it in the <Custome Header> box. Thank you for all your help though.

    One more question is there a way to speed it up?

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,677
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    There may be a way to speed it up but, the script, as written, is already 'pegged'. If you want faster falling effects, it would be easier to simply use a different script. This demo, although running bottom to top, can run top to bottom, it is in the configuration. You can use your snowflake instead of the bubble and the speed is configurable as well, with more variation available than with the current script you are using. The whole issue about setting the body height is unnecessary with this script as well.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Dec 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    THANKS!!! You have been most helpful and everyone LOVES the snow on our board. =)

  9. #9
    Join Date
    Dec 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I am having the same problem. Can some help me also?

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,677
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    I would suggest using the demo mentioned in post_#7 of this thread, or if you still want to use the original script, which I feel is outdated, follow the instructions about adding style and/or content to the body of your page as described in the earlier portions of this thread.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •