Page effects Qs

[newmate]

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.

[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.

[boxer_1]

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.

[newmate]

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.

[boxer_1]

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:

<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], [url]http://www.altan.hr/snow/index.html[/url])
Permission granted to Dynamicdrive.com to feature script in archive
For full source code to this script, visit [url]http://dynamicdrive.com[/url]
*/
  

  //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 .

[newmate]

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..............................................>

[newmate]

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.

[boxer_1]

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 .

[newmate]

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?

[^KoalaBear^]

Ohhhhh I do so lervvve happy endings! hehe...