Web Analytics Made Easy -
StatCounter Page effects Qs - CodingForum

Announcement

Collapse
No announcement yet.

Page effects Qs

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Page effects Qs

    My last post was thrown out with the change.
    Let’s try this again!
    I am creating my first site (not uploaded yet) and I have a few questions I hope you can help with. On my “Fun Page” I would like to include snow, rain (from Dynamic Drive), fall leaves and lake effect (thinking of using Anfe). My questions are #1, no matter what I do I cant get the image to show in snow just the place holders. I have checked my path to the image file as in example-
    //Configure below to change URL path to the snow image
    var snowsrc = "E:\Documents and Settings\kevin\My Documents\My Webs\homesite1\images\page4\snow[3].gif"
    // Configure below to change number of snow to render
    var no = 20;

    What simple thing am I missing?
    Question #2, can I cause them not to auto start when the page opens to enable user choice pursuant to question #3? If not can I timeout the effects? Example from rain (from Dynamic Drive)- function moverain(){
    for(move = 0; move < drops; move++){
    xx[move]+=movex; yy[move]+=mv[move];
    hmm = Math.round(Math.random()*1);
    if(xx[move] < 0){xx[move] = maxx+10;}
    if(yy[move] > maxy){yy[move] = 10;}
    drop[move].left = xx[move]
    drop[move].top = yy[move]+document.body.scrollTop;
    }setTimeout('moverain()','1')}

    Question #3, I would like to use buttons/links to activate and deactivate the effects per user choice. Can this be done and if so how?

    If needed I can post more code/information.
    Edit: after the first problems and now that this post has been moved to an unbrowsed forum I don't have much hope for it.... time to look for another forum to hope to get some help from and in time be a real contributor to like the other forums I subscribe to.
    Last edited by newmate; Jun 13, 2002, 11:58 PM.
    Editor; FrontPage 2002 (included in Office XP). Personal Operating System; Windows XP and ME. Browsers; Latest versions, NN, IE and Opera. Server running; RedHat Linux 7.2

  • #2
    For the first question, it's a good idea to always use an absolute path to the snow image on your server, such as:

    var snowsrc = "http://www.mydomain.com/snow.gif"

    Obviously, make sure snow.gif exists on your server first.

    Anyhow, this is a Dynamic Drive question, and should be posted in the DD forum. Moving thread there.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

    Comment


    • #3
      Re: Page effects Qs

      Originally posted by newmate
      ...Edit: after the first problems and now that this post has been moved to an unbrowsed forum I don't have much hope for it.... time to look for another forum to hope to get some help from and in time be a real contributor to like the other forums I subscribe to.
      Well, sorry you feel that way. Where were you informed that this was an "unbrowsed" forum? For the record, you are asking about Dynamic Drive scripts, which is what this forum is here for (thus the title). If the Administration had not moved your thread here, I would have done it because this is the proper forum for your question.

      Remember, the scripts you're using were provided free to you and the help offered here is also free and voluntary. Just be patient and polite (not slam this forum for starters) and you'll find the members here are very knowledgeable and willing to help you.
      Last edited by boxer_1; Jun 14, 2002, 12:16 AM.
      boxer_1
      CodingForum Moderator
      "How did a fool and his money get together in the first place?"

      Comment


      • #4
        Originally posted by WA
        For the first question, it's a good idea to always use an absolute path to the snow image on your server, such as:

        var snowsrc = "http://www.mydomain.com/snow.gif"

        Obviously, make sure snow.gif exists on your server first.

        Anyhow, this is a Dynamic Drive question, and should be posted in the DD forum. Moving thread there.
        Thank you for your reply!
        I did post that I have not uploaded my site yet just in case there may be something relevant “I am creating my first site (not uploaded yet)” and did show the full direct path that I used on my drive. I have tried other paths and folder sources and new copies of the image file. What is frustrating me about this after over 12 hours of trying to get it to work is I know it is almost a no-brainer and their for I must be missing something very simple(too simple) here. The other questions are harder. I am not a slacker and have done research and read many tutorials before asking a question. I am new at this and I would like to get my site on the web soon, but I do want to get something worth while to upload first and get the web and code worked out here first before I upload it and maybe deal with the transition and server problems that can happen then. any other help would be really nice.
        Editor; FrontPage 2002 (included in Office XP). Personal Operating System; Windows XP and ME. Browsers; Latest versions, NN, IE and Opera. Server running; RedHat Linux 7.2

        Comment


        • #5
          Ok, very late here so bear with me, let's deal with you first question first. Just guessing (that's about all that can be done at this point), I noticed in you image path that you're calling for "snow[3].gif". The image offered on the page where you got the script is simply named "snow.gif". Did you rename the image or create a different image to use?

          What I would try first is creating a simple html document (using notepad would be fine) and save it to a folder. Then place the "snow.gif" in the same folder. For testing purposes, don't modify the script or the image name until you get things to work right.

          How about this...highlight and copy the below code:
          Code:
          <html>
          <head>
          <title>newmate</title>
          
          </head>
          <body bgcolor="#000000" text="#ffffff" link="#0000ff" alink="ff0000" vlink="#800080">
          <script language="JavaScript1.2">
          
          /*
          Snow Effect Script
          Submitted by Altan d.o.o. ([email protected], http://www.altan.hr/snow/index.html)
          Permission granted to Dynamicdrive.com to feature script in archive
          For full source code to this script, visit http://dynamicdrive.com
          */
            
          
            //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;
          
            var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
            var ie4up = (document.all) ? 1 : 0;
            var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
          
            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 (ns4up||ns6up) {
              doc_width = self.innerWidth;
              doc_height = self.innerHeight;
            } else 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 < 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 (ns4up) {                      // set layers
                if (i == 0) {
                  document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><a href=\"http://dynamicdrive.com/\"><img src='"+snowsrc+"' border=\"0\"></a></layer>");
                } else {
                  document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' border=\"0\"></layer>");
                }
              } else 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 snowNS() {  // Netscape main animation function
              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();
                  doc_width = self.innerWidth;
                  doc_height = self.innerHeight;
                }
                dx[i] += stx[i];
                document.layers["dot"+i].top = yp[i];
                document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
              }
              setTimeout("snowNS()", 10);
            }
          
            function snowIE_NS6() {  // IE and NS6 main animation function
              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();
                  doc_width = ns6up?window.innerWidth : document.body.clientWidth;
                  doc_height = ns6up?window.innerHeight : document.body.clientHeight;
                }
                dx[i] += stx[i];
                if (ie4up){
                document.all["dot"+i].style.pixelTop = yp[i];
                document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
                }
                else if (ns6up){
                document.getElementById("dot"+i).style.top=yp[i];
                document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
                }   
              }
              setTimeout("snowIE_NS6()", 10);
            }
          
            if (ns4up) {
              snowNS();
            } else if (ie4up||ns6up) {
              snowIE_NS6();
            }
          
          </script>
          </body>
          </html>
          Now, open notepad and turn off word wrap. Paste the above code, as is, into notepad and click 'save as', change the "save as type" to all files. Then name the file "snow.html" and click save. Be sure to save it to the same folder where snow.gif is saved.

          Then open your browser, click file -> open -> Browse and navigate to the folder containing "snow.html". Open it up and you should have a page with the snow script working .
          boxer_1
          CodingForum Moderator
          "How did a fool and his money get together in the first place?"

          Comment


          • #6
            Thank you for your late night time. I have been greeted by the birds in the morning a few nights lately to let me know it's time to give things a small rest. The gif file is just one I tried to get a smaller "snow flake" I did use the original first and later two. Before I/we go farther let me post the full page without the snow code but with the rain that works perfectly the first time as follows„³
            <html>

            <head>
            <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
            <meta name="ProgId" content="FrontPage.Editor.Document">
            <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
            <title>page4</title>
            <style fprolloverstyle>A:hover {color: #FF0000; font-weight: bold}
            </style>

            <style>
            .drop { position: absolute; width: 3; filter: flipV(), flipH(); font-size: 40; color: blue }
            </style>
            <script language="javascript">

            //Rain/Snow effect- By Craig Blanchette Craiga.topcities.com
            //Script featured on Dynamic Drive
            //Visit http://www.dynamicdrive.com for this script and more

            snow = false; // false-rain; true-snow
            snowsym = " * " //These are the symbols for each
            rainsym = " ' " //You can put images here.
            howmany = 10 //How many drops/snowflakes?

            /**************Do not need to change anything below***********/
            if(snow){sym = snowsym; speed=1; angle=10; drops=howmany}
            else{sym = rainsym; speed=50; drops=howmany; angle=6}
            movex = -speed/angle; movey = speed; count = 0;

            function moverain(){
            for(move = 0; move < drops; move++){
            xx[move]+=movex; yy[move]+=mv[move];
            hmm = Math.round(Math.random()*1);
            if(xx[move] < 0){xx[move] = maxx+10;}
            if(yy[move] > maxy){yy[move] = 10;}
            drop[move].left = xx[move]
            drop[move].top = yy[move]+document.body.scrollTop;
            }setTimeout('moverain()','1')}

            </script>
            </head>

            <body background="images/page4/P4bg.jpg">


            <div align="center">
            <center>
            <table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" id="AutoNumber1">
            <tr>
            <td nowrap align="center">
            <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">i</font></td>
            <td nowrap align="center"><span style="letter-spacing: 7pt">
            <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">sdf1230912C456</font></span></td>
            <td nowrap align="center">
            <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">j</font></td>
            </tr>
            <tr>
            <td nowrap align="center">
            <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">0</font><p>
            <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">6</font></td>
            <td nowrap align="center"><span style="letter-spacing: 7pt; font-weight: 700">
            <font size="6" face="BeyondControl" color="#FFFFFF">Fun Pages</font></span></td>
            <td nowrap align="center">
            <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">4</font><p>
            <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">7</font></td>
            </tr>
            <tr>
            <td nowrap align="center">
            <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">,</font></td>
            <td nowrap align="center"><span style="letter-spacing: 7pt">
            <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">}cv8b9t:ZXVtf3</font></span></td>
            <td nowrap align="center">
            <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">.</font></td>
            </tr>
            </table>
            </center>
            </div>
            <p><a href="index.htm">Home</a></p>
            <p><a href="page2.htm">Inside Colorado</a></p>
            <p><a href="page3.htm">Photos</a></p>

            <p><a href="page5.htm">Links</a></p>

            <p><a href="page5.htm">Download</a></p>

            <script language="javascript">

            if (document.all){
            drop = new Array(); xx = new Array(); yy = new Array(); mv = new Array()
            ly = "document.all[\'"; st = "\'].style"
            for(make = 0; make < drops; make++){
            document.write('<div id="drop'+make+'" class=drop>'+sym+'</div>');
            drop[make] = eval(ly+'drop'+make+st);
            maxx = document.body.clientWidth-40
            maxy = document.body.clientHeight-40
            xx[make] = Math.random()*maxx;
            yy[make] = -100-Math.random()*maxy;
            drop[make].left = xx[make]
            drop[make].top = yy[make]
            mv[make] = (Math.random()*5)+speed/4;
            drop[make].fontSize = (Math.random()*10)+20;
            if(snow){col = 'white'}else{col = 'blue'}
            drop[make].color = col;
            }
            window.onload=moverain
            }
            </script>
            </body>

            </html>

            and..............................................>
            Editor; FrontPage 2002 (included in Office XP). Personal Operating System; Windows XP and ME. Browsers; Latest versions, NN, IE and Opera. Server running; RedHat Linux 7.2

            Comment


            • #7
              This is the same page recreated with the snow that I could not get to work„³
              <html>

              <head>
              <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
              <meta name="ProgId" content="FrontPage.Editor.Document">
              <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
              <title>page4</title>
              <style fprolloverstyle>A:hover {color: #FF0000; font-weight: bold}
              </style>

              <style>
              .drop { position: absolute; width: 3; filter: flipV(), flipH(); font-size: 40; color: blue }
              </style>
              </head>

              <body background="images/page4/P4bg.jpg">

              <script language="JavaScript1.2">

              /*
              Snow Effect Script
              Submitted by Altan d.o.o. ([email protected], http://www.altan.hr/snow/index.html)
              Permission granted to Dynamicdrive.com to feature script in archive
              For full source code to this script, visit http://dynamicdrive.com
              */


              //Configure below to change URL path to the snow image
              var snowsrc = "E:\Documents and Settings\kevin\My Documents\My Webs\homesite1\images\page4\snow[1].gif"
              // Configure below to change number of snow to render
              var no = 20;

              var ns4up = (document.layers) ? 1 : 0; // browser sniffer
              var ie4up = (document.all) ? 1 : 0;
              var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

              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 (ns4up||ns6up) {
              doc_width = self.innerWidth;
              doc_height = self.innerHeight;
              } else 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 < 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 (ns4up) { // set layers
              if (i == 0) {
              document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><a href=\"http://dynamicdrive.com/\"><img src='"+snowsrc+"' border=\"0\"></a></layer>");
              } else {
              document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' border=\"0\"></layer>");
              }
              } else 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 snowNS() { // Netscape main animation function
              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();
              doc_width = self.innerWidth;
              doc_height = self.innerHeight;
              }
              dx[i] += stx[i];
              document.layers["dot"+i].top = yp[i];
              document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
              }
              setTimeout("snowNS()", 10);
              }

              function snowIE_NS6() { // IE and NS6 main animation function
              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();
              doc_width = ns6up?window.innerWidth : document.body.clientWidth;
              doc_height = ns6up?window.innerHeight : document.body.clientHeight;
              }
              dx[i] += stx[i];
              if (ie4up){
              document.all["dot"+i].style.pixelTop = yp[i];
              document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
              }
              else if (ns6up){
              document.getElementById("dot"+i).style.top=yp[i];
              document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
              }
              }
              setTimeout("snowIE_NS6()", 10);
              }

              if (ns4up) {
              snowNS();
              } else if (ie4up||ns6up) {
              snowIE_NS6();
              }

              </script>
              <div align="center">
              <center>
              <table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" id="AutoNumber1">
              <tr>
              <td nowrap align="center">
              <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">i</font></td>
              <td nowrap align="center"><span style="letter-spacing: 7pt">
              <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">sdf1230912C456</font></span></td>
              <td nowrap align="center">
              <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">j</font></td>
              </tr>
              <tr>
              <td nowrap align="center">
              <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">0</font><p>
              <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">6</font></td>
              <td nowrap align="center"><span style="letter-spacing: 7pt; font-weight: 700">
              <font size="6" face="BeyondControl" color="#FFFFFF">Fun Pages</font></span></td>
              <td nowrap align="center">
              <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">4</font><p>
              <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">7</font></td>
              </tr>
              <tr>
              <td nowrap align="center">
              <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">,</font></td>
              <td nowrap align="center"><span style="letter-spacing: 7pt">
              <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">}cv8b9t:ZXVtf3</font></span></td>
              <td nowrap align="center">
              <font face="Mini Pics L'il Folks" color="#FFFFFF" size="4">.</font></td>
              </tr>
              </table>
              </center>
              </div>
              <p><a href="index.htm">Home</a></p>
              <p><a href="page2.htm">Inside Colorado</a></p>
              <p><a href="page3.htm">Photos</a></p>

              <p><a href="page5.htm">Links</a></p>

              <p><a href="page5.htm">Download</a></p>

              </body>

              </html>

              Simple page, simple scripts. Does it have something to do with trying to run it from my disk and not from a http or www site? I would not think so, but I am greener than spring grass at this for now.
              Editor; FrontPage 2002 (included in Office XP). Personal Operating System; Windows XP and ME. Browsers; Latest versions, NN, IE and Opera. Server running; RedHat Linux 7.2

              Comment


              • #8
                newmate, I still have to believe the problem with your snow script is simply with you path to you image or image name.

                I copied your code exactly as you posted it, saved it to the same folder where I have snow.gif saved in, and previwed the page...the script worked w/o any problem.

                Let me ask you this, do you see squares with red "x"s falling on the page in place of where the snow gif should be when you preview the page?

                Now this should work, go back to Dynamic Drive and get the "snow.gif" image. Save it to the same folder where you have the snow script you posted saved. Then change this line:

                var snowsrc = "E:\Documents and Settings\kevin\My Documents\My Webs\homesite1\images\page4\snow[1].gif"

                To this:

                var snowsrc = "snow.gif"

                Now preview the page and it should work .
                boxer_1
                CodingForum Moderator
                "How did a fool and his money get together in the first place?"

                Comment


                • #9
                  Thank you! Now for the fun part...

                  Thank you, boxer_1!
                  It worked first perfectly the first time following your advice . The error that I made was to put the source in the images folder for that page and try to link to it there. The frustrating part was that the problem was that simple. I feel much better now.

                  Is there a rule that governs source locations for java?

                  Anyone have any ideas for creating user select option to start and stop each page or document effect?
                  Editor; FrontPage 2002 (included in Office XP). Personal Operating System; Windows XP and ME. Browsers; Latest versions, NN, IE and Opera. Server running; RedHat Linux 7.2

                  Comment


                  • #10
                    Ohhhhh I do so lervvve happy endings! hehe...
                    To escape criticism - do nothing, say nothing, be nothing. . . Vaya Con Dios

                    Comment

                    Working...
                    X