Adding START and STOP to a script

**Vatinari** · 11-28-2008 10:45 AM

Hi

I want to adapt a snowfall script from Peter Gehrig but I'm stuck on how to do it.

the code is :

Code:

<script> 
// CREDITS: // Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved. 
// Distributed by http://www.hypergurl.com // Permission given to use the script 
on webpages provided that this notice remains as is. // Set the number of snowflakes 
(more than 30 - 40 not recommended) var snowmax=35 // Set the colors for the snow. 
Add as many colors as you like var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD") 
// Set the fonts, that create the snowflakes. Add as many fonts as you like var 
snowtype=new Array("Arial Black","Arial Narrow","Times","Comic 
Sans MS") // Set the letter that creates your snowflake (recommended:*) var 
snowletter="*" // Set the speed of sinking (recommended values range 
from 0.3 to 2) var sinkspeed=0.6 // Set the maximal-size of your snowflaxes var 
snowmaxsize=22 // Set the minimal-size of your snowflaxes var snowminsize=8 // 
Set the snowing-zone // Set 1 for all-over-snowing, set 2 for left-side-snowing 
// Set 3 for center-snowing, set 4 for right-side-snowing var snowingzone=3 /////////////////////////////////////////////////////////////////////////// 
// CONFIGURATION ENDS HERE /////////////////////////////////////////////////////////////////////////// 
// Do not edit below this line var snow=new Array() var marginbottom var marginright 
var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new 
Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) 
var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/) 
var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random()) 
return rand } function initsnow() { if (ie5 || opera) { marginbottom = document.body.clientHeight 
marginright = document.body.clientWidth } else if (ns6) { marginbottom = window.innerHeight 
marginright = window.innerWidth } var snowsizerange=snowmaxsize-snowminsize for 
(i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i] 
= 0.03 + Math.random()/10; snow[i]=document.getElementById("s"+i) snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)] 
snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size 
snow[i].style.color=snowcolor[randommaker(snowcolor.length)] snow[i].sink=sinkspeed*snow[i].size/5 
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) 
{snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} 
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} 
snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx 
snow[i].style.top=snow[i].posy } movesnow() } function movesnow() { for (i=0;i<=snowmax;i++) 
{ crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]); 
snow[i].style.top=snow[i].posy if (snow[i].posy>=marginbottom-2*snow[i].size 
|| parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){ if (snowingzone==1) 
{snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} 
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} 
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} 
snow[i].posy=0 } } var timer=setTimeout("movesnow()",50) } for (i=0;i<=snowmax;i++) 
{ document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>") 
} if (browserok) { window.onload=initsnow } </script>

OK, I've moved the initsnow() call from the script and put it in a onclick event of a hyperlink:

<a onclick=initsnow()>START</a>

And that's fine, but I want to add a STOP option also. so how can I set an onclick event or something similar to stop the script.

I have considered having the STOP link just re-load the page but its a bit messy.

Looking forward to all your wonderful and ingenious ideas and suggestions!

**CuppyTea** · 11-28-2008 12:13 PM

Unfortunately, that script seems to have broke when copied and pasted over here, hence all the comments and variable declarations mix horribly, and i'm not about to scroll through that wall of text to make it work

However, "timer = setTimeout()" jumped out at me from that wall of text, so maybe try "<a onclick='clearTimeout(timer)'>Stop</a>".

Ill have another look if I can have an easy-to-copy version of the script

**CuppyTea** · 11-28-2008 12:41 PM

K, I managed to find the script on the internet and have modified it to stop / start....

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script>
// CREDITS:
// Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Distributed by http://www.hypergurl.com
// Permission given to use the script provided that this notice remains as is.

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Set the letter that creates your snowflake (recommended:*)
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6

// Set the maximal-size of your snowflaxes
var snowmaxsize=22

// Set the minimal-size of your snowflaxes
var snowminsize=8

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing 
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////


// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent 
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie5||ns6||opera

function disableSnow() {
	clearTimeout(timer);
	
	for(var i=0;i<snow.length;i++) {
		document.body.removeChild(document.getElementById("s"+i));
	}
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
    return rand
}

function initsnow() {
	for (var i=0;i<=snowmax;i++) {
		document.body.innerHTML += "<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>";
	}
	
	if (ie5 || opera) {
		marginbottom = document.body.clientHeight
		marginright = document.body.clientWidth
	}
	else if (ns6) {
		marginbottom = window.innerHeight
		marginright = window.innerWidth
	}
	var snowsizerange=snowmaxsize-snowminsize
	for (i=0;i<=snowmax;i++) {
		crds[i] = 0;                      
    	lftrght[i] = Math.random()*15;         
    	x_mv[i] = 0.03 + Math.random()/10;
		snow[i]=document.getElementById("s"+i)
		snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
		snow[i].size=randommaker(snowsizerange)+snowminsize
		snow[i].style.fontSize=snow[i].size
		snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
		snow[i].sink=sinkspeed*snow[i].size/5
		if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
		if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
		if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
		if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
		snow[i].posy=randommaker(6*marginbottom-marginbottom-6*snow[i].size)
		snow[i].style.left=snow[i].posx
		snow[i].style.top=snow[i].posy
	}
	movesnow()
}

function movesnow() {
	for (i=0;i<=snowmax;i++) {
		crds[i] += x_mv[i];
		snow[i].posy+=snow[i].sink
		snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
		snow[i].style.top=snow[i].posy
		
		if (snow[i].posy>=marginbottom-6*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
			if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
			if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
			if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
			if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
			snow[i].posy=0
		}
	}
	timer=setTimeout("movesnow()",50)
}

if (browserok) {
	window.onload=initsnow
}
</script>
</head>

<body>
<p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p>
<input type="button" onclick="disableSnow();"/>
<input type="button" onclick="initsnow();"/>
</body>
</html>

works for me.

The changes are as follows....

Changed "var timer=setTimeout(...)" to just timer=setTimeout : we don't want this timeout to use the global variable defined so we can clear it with clearTimeout();
Moved the part of the script that adds the snow flakes to init, so the snowflakes can be added back again after the user stops the snowflakes
Created the function disableSnow(), which clears the timeout, and removes all snowflakes from the screen.

**Vatinari** · 12-09-2008 03:54 PM

Hi CuppyTea

Thanks for that - just used it and it works a treat.

Marry Christmas

Vat

Thread: Adding START and STOP to a script

Thread Tools

Display

Adding START and STOP to a script

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions