Turning a javascript on/off

[zoahkrieg]

Alright, so I'm new and Javascript, and trying to learn. I have this javascript for my website, and makes it look like its raining, or snowing, and stupid stuff like that....But it makes my site lag pretty bad. What I want to do is have a button that says "Click here to see the weather" or something like that, and when it's clicked, the rain program is turned on. How would I go about doing this?? I posted the code, in case it helps..




<SCRIPT LANGUAGE="JavaScript">

//Raining
var no = 50;
var speed = 1;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var s, x, y, sn, cs;
var a, r, cx, cy;
var i, doc_width = 800, doc_height = 600;

if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else

if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

x = new Array();
y = new Array();
r = new Array();
cx = new Array();
cy = new Array();
s = 8;

for (i = 0; i < no; ++ i) {
initRain();

if (ns4up) {

if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");
document.write(",</font></layer>");

}
else {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");
document.write(",</font></layer>");
}
}
else

if (ie4up) {

if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
document.write(",</font></div>");
}

else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
document.write(",</font></div>");
}
}
}

function initRain() {
a = 6;
r[i] = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx[i] = Math.random() * doc_width + 1;
cy[i] = Math.random() * doc_height + 1;
x[i] = r[i] * sn + cx[i];
y[i] = cy[i];
}

function makeRain() {
r[i] = 1;
cx[i] = Math.random() * doc_width + 1;
cy[i] = 1;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}

function updateRain() {
r[i] += s;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}

function raindropNS() {
for (i = 0; i < no; ++ i) {

updateRain();

if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}

document.layers["dot"+i].top = y[i];
document.layers["dot"+i].left = x[i];

}

setTimeout("raindropNS()", speed);

}

function raindropIE() {

for (i = 0; i < no; ++ i) {
updateRain();

if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

document.all["dot"+i].style.pixelTop = y[i];
document.all["dot"+i].style.pixelLeft = x[i];

}

setTimeout("raindropIE()", speed);

}

if (ns4up) {
raindropNS();
}

else
if (ie4up) {
raindropIE();
}

//End

</script>

[Roelf]

afaics, the rain is started by the functions raindropIE() or raindropNS() with this part of the code:

if (ns4up) {
raindropNS();
} else {
if (ie4up) {
raindropIE();
}
}

change it into a function like

function startweather() {
if (ns4up) {
raindropNS();
} else {
if (ie4up) {
raindropIE();
}
}
}

then call it onclick of a button
<input type="button" value="Let it snow" onclick="startweather()" />

[glenngv]

it needs more tweaking than you thought. as you notice, the divs and layers are set to visible. so if the user doesn't click the button to start the snow falling, he can see a bunch of snow (commas) hanging static on the page. They must be hidden at first and shown once the button is clicked. And to let the user stop the snow, the setTimeout must be assigned to a variable to be able to do a clearTimeout(variable) and then hide the divs again.

good luck! :)